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

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');
    }
  }

}

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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');
  }
 }
}

CodePudding user response：

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>