Detect Input() Value Change Inside Child (Angular)

Question

I just need to update child component when Input value changes , the child component has some input parameters which set some local variables inside ngInit() but the issue is the parent when change the input parameters the child does not update because ngInit() only trigger once it is initialize.

Inside Parent

<app-site-parameter-tbl *ngIf="siteTbl==true" [siteParameterTDataSet]="siteParameterDataSet" [siteParameterTGridColumns]="siteParameterColumns" [siteParameterFoot]="siteParameterFooter" [siteParameterT]="siteParameterTbl" [model]="siteModel" [bckColor]="this.tabBackColor"></app-site-parameter-tbl>

On some trigger events the parent changes these properties (as input of child)

Parent Ts

method(ds, columns, footer) {

    this.siteParameterDataSet = ds;
    this.siteParameterColumns = columns;
    this.siteParameterFooter = footer;
}

This hit only once even after changing input values

Child ts

@Input() siteParameterT: boolean;
@Input() model: SiteModel;
@Input() siteParameterFoot: [];
@Input() siteParameterTGridColumns: [];
@Input() siteParameterTDataSet: any;

ngOnInit() {
    debugger;
    //setting local variables then they will render inside html

    this.siteParameter = this.siteParameterT;
    this.site = this.model;
    this.foot = this.siteParameterFoot;
    this.dataSet = this.siteParameterTDataSet;
}

Please help , if I can use Input properties directly inside html then how come can i make changes to it? Help me know how to notify when Input changes?

@TAHASULTANTEMURI Look at this link https://stackoverflow.com/a/36653734/7321113 — Abhishek, Dec 19 '19 at 09:21
@TAHASULTANTEMURI you can try to use ChangeDetectionStrategy on push in this scenario: https://angular.io/api/core/ChangeDetectionStrategy — tutorialfeed, Dec 19 '19 at 09:27
thank you @Abhishek ngOnChanges solved my problem ,also its one stop solution i can check property using switch then update — TAHA SULTAN TEMURI, Dec 19 '19 at 09:28

score 3 · Answer 1 · answered Dec 19 '19 at 08:58

3

Try using setters on the @Input:

@Input('siteParameterT')
set siteParameterT(value: boolean) {
    this.siteParameter = value
}

also, you can use ngOnChanges

answered Dec 19 '19 at 08:58

Ramesh Reddy

10,159
3
17
32

thank you very much for your time , but ngOnChanges worked fine. vote up..thanks again – TAHA SULTAN TEMURI Dec 19 '19 at 09:22

score 1 · Accepted Answer · answered Dec 19 '19 at 09:02

hook into ngOnChanges instead:

example usage

  @Input() employee: Employee

  ngOnChanges(changes: SimpleChanges) {
    /** Fire any time employee changes */
    if (changes.employee && changes.employee.currentValue) {
      this.formGroup.patchValue(this.employee)
    }
  }

There's also a decorator method. Though note the TypeScript decorator is experimental.

score 1 · Answer 3 · answered Dec 19 '19 at 09:02

1

You can achieve the functionality using ngOnChanges.

 public ngOnChanges(changes: SimpleChanges): void {
    this.siteParameter = changes.siteParameter;
    etc.,
  }

answered Dec 19 '19 at 09:02

Suhas Parameshwara

1,344
7
15

thank you very much for your time , but ngOnChanges worked fine. vote up..thanks again – TAHA SULTAN TEMURI Dec 19 '19 at 09:22

Detect Input() Value Change Inside Child (Angular)

3 Answers3