Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

332
Visualizações
angular2 change @input value in child component then change this value in parent component not work

parent component class

export class Parent {
   show: boolean = false;
   constructor() { }
   showChild() {
      this.show = true;
   }
}

parent component template

<child [isShow]="show"></child>

child component class

export class Child {
   @Input isShow: boolean = false;
   constructor() { }
   onClick() {
      this.isShow = false;
    }
}

after I triggered onClick() in child component, the showChild() would not work to show the child component.

why?

about 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

The value is being passed exclusively from parent to child because you're using square brackets.

In order for the value to go both ways, you need to use a two-way data binding.

That means your isShow attribute should be like:

@Input()  isShow: boolean;
@Output() isShowChange = new EventEmitter<boolean>();

And the template should be

<child [(isShow)]="show"></child>

or

<child [isShow]="show" (isShowChange)="show = $event"></child>

Take a look at the two-way data binding tutorial page:

https://angular.io/guide/template-syntax#two-way-binding---

about 4 years ago · Santiago Trujillo Relatório

0

You are creating values out of sync between the child and parent. Since the parent is passing the value down into the child, you need to change the value in the parent only. To send a value from the child to the parent you need to use an Output parameter as an EventEmitter. It will look like this:

export class Parent {
   show: boolean = false;
   constructor() { }
   showChild() {
      this.show = true;
   }
}

<child [isShow]="show" (updateValue)="show = $event"></child>



export class Child {
   @Input isShow: boolean = false;
   @Output() updateValue = new EventEmitter();

   constructor() { }
   onClick() {
      this.updateValue.emit(false);
    }
}

This emits the value false when the onClick method in the child runs. The parent receives that new value and assigns it to it's show variable, which gets sent down to the child component.

about 4 years ago · Santiago Trujillo Relatório

0

You need to use a getter and setter for the value so you can use the two-way data binding syntax. This can be accomplished using the following:

export class Child {
    private isShowValue = false;

    @Input()
    public get isShow(){
        return this.isShowValue;
    }

    @Output() isShowChange = new EventEmitter();

    set isShow(val) {
        this.isShowValue = val;
        this.isShowChange.emit(this.isShowValue);
    }

    constructor() { }

    onClick() {
        this.isShow = false;
    }
}
about 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda