Complete Guide: Angular lifecycle hooks

[mariazayed]

Discussion for "Complete Guide: Angular lifecycle hooks" article

[nidhijha-tfc]

It's a wonderful guide. very well explained. Thank you do much, it made my life really easy to some extent.

[SrdjanMilic]

HTML chunk of code is missing at code example from parent.component.html at the beginning of the article (create "starter code" section). Actually, the whole file example is missing.

Missing part:

// parent.component.html
<button (click)="updateUser()">Update</button>
<app-child [userName]="userName"></app-child>

[mariazayed]

Yes, you're right.
Thank you

[gojain]

Very well explained. Thanks.

[ayyash]

Thank you for the thorough explanation, I have a question, does any of these hooks change when ChangeDetectionStrategy.OnPush is set?

[celalettin-turgut]

Hi There is a typo here.

// components/child/child.component.ts

export class ChildComponent implements OnChanges{

  @Input() userName = '';

  ngOnChanges(changes:SimpleChanges) {
     console.log('ngOnChanges triggered', changes);

     if (!changes['userName'].isFirstChange()){
        if (changes['userName'].currentValue === "Chris") {
           this.userName = 'Hello ' + this.userName
        } else {
           this.userName = changes['userName'].previousValue
        }
     }
  }
}

It should be changes['userName'].firstChange

[TitoMoi]

Very good, it's possible to add setter and getters to the lifecycle? like the constructor they are not part of the lifecycle but can help to understand the order and afectation of the inputs