@Input property is not being updated second time

Question

I'm creating a reusable component which can be shown from any external component, but can be hidden using a function in same component, but somehow the property change in parent component is not updating child.

Here is the stackblitz for the same. https://stackblitz.com/edit/angular-hfjkmu

I need "Show" button should show the component all the time and I can hide the component using "hide" button any time.

Answer 1

you need sync value from child to parent using Output

  @Input()
  show = false;

  @Output()
  showChange = new EventEmitter<boolean>();

  constructor() { }

  ngOnInit() {
  }

  hide(){
    this.show = false;
    this.showChange.emit(this.show);
  }

<app-show-hide [(show)]="show"></app-show-hide>

The show property from child do not pointing to same prop in the parent comp, because it's primitive value. I don't recommend to modify data that not belong to child component (reference type, eg: object, array), it can lead to unexpected behavior.

Online demo with reference type (be careful when modify ref type): https://stackblitz.com/edit/angular-vhxgpo?file=src%2Fapp%2Fshow-hide-obj%2Fshow-hide-obj.component.tsenter link description here