How to invoke a function in child component based on Boolean value passed from Parent component?

Question

I am displaying a button from child component to AppComponent(parent). Whenever the button is clicked I would like to invoke the ' showAlert() ' method if ' lastPage ' value is set to true. But it doesn't seem to work. Attached a stackblitz example

Is this a correct way to invoke a function from the child component? is there a different way to do it?

app.component.html

<app-child [lastPage]="lastpage"></app-child>

app.component.ts

export class AppComponent {
  lastpage = true;
  name = 'Angular ' + VERSION.major;
}

child.component.html

<button>Click me for Alert</button>

child.component.ts

export class ChildComponent implements OnInit {
  @Input() lastPage?: boolean
  constructor() { }

  ngOnInit() {
    this.showAlert()
  }

  showAlert() {
    if (this.lastPage) {
      alert('Button Clicked from child');
    }
  }

}

Answer 1

You can use ngOnChange hook for catch the input change and where you can call your method enter link description here

Answer 2

The correct way to react to a change in an Input() in the component is via the ngOnChanges() lifecycle.

The ngOnChanges() lifecycle admits a paramater of type SimpleChanges SimpleChanges class is defined like this:

class SimpleChange {
  constructor(previousValue: any, currentValue: any, firstChange: boolean)
  previousValue: any
  currentValue: any
  firstChange: boolean
  isFirstChange(): boolean
}

So you can leverage this properties to find out what is the currentValue of your Input() and act accordingly in your code:

ngOnChanges(changes:SimpleChanges){
  if(changes.lastPage.currentValue){
    this.showAlert()
  }
}

You can find more info in this page: https://angular.io/api/core/OnChanges

Answer 3

app.component.ts

export class AppComponent {
lastpage = true;   // true or false
}

child.component.html

<button (click)="showAlert()">Click me for Alert</button>

child.component.ts

export class ChildComponent implements OnInit {
@Input() lastPage?: boolean
constructor() { }

ngOnInit() {    }

showAlert() {
if (this.lastPage == true) {
  alert('Button Clicked from child');
  }
 }
}

Answer 4

You have a few options for triggering that function. You can use the OnChanges Hook as others mentioned or you can use a getter and a setter.

However, I think you should trigger the alert from the parent component rather than the child. The child component should be as dumb as possible.

export class ChildComponent {
  @Output() clicked = new EventEmitter<void>();

  onClick() {
    this.clicked.emit();
  }
}

export class ParentComponent {
  lastPage = true;

  showAlertIfLastPage() {
    if (this.lastPage) {
      alert('Button Clicked from child');
    }
  }
}

<app-child (clicked)="showAlertIfLastPage()"></app-child>