Angular ?? ?? ??? ???? ???? ???, ??, ??? ???? ???? Angular ?? ?? ?? ??? ?? ??? ??? ? ??? ?? ?????. ?? ????? ???? ?? ?? ??? ??? ????.

1. ???: ???? ?? ??? ? ?????. ? ?? ?????.
2. ngOnChanges: ?? ? ?????. ???? ?? ??? ??/??? ? ?????. ? ??? ??? ??? @input ?????? ???? ??? ?? ??? ???? ??. ??? ?? - ??? ??
3. ngOnInit: ?? ??? ????? ?????. ?? ??? ??? ???? ? ?????.
4. ngDoCheck: ?? ??? ???? ???? ? ?????(? ?? ?? ???? ???).
5. ngAfterContentInit: ???? ?? ??? ????? ? ?????.
6. ngAfterContentChecked: ??? ???? ??? ? ?????.
7. ngAfterViewInit: ?? ???? ? ?????.
8. ngAfterViewChecked: Angular? ????? ?? ??? ? ?????.
9. ngOnDestroy: ?? ??? ???? ??? ?????. Observable ?? ??? ?? ???? ???? ? ?????.

???? ?? ?? ????? ??? ?????.
??? ?? ?? ??? ?????. ?? ?? ??? ?? ??? ??? ?? ?? ?? ?? ?? ??? ???? ?? ?? ??? ?????.

parent.comComponent.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  value:string = '';
  SubmitValue(val: any) {
    this.value = val.value;
  }

}

parent.comComponent.html

<h1>Lifecycle Hooks</h1>

<input type="text" placeholder="Input here..." #val>
<button (click)="SubmitValue(val)">Submit Value</button>

<br><br>
<app-child [inputValue]="value"></app-child>

child.comComponent.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  constructor() { }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {
  }

}

child.comComponent.html

<div>
    Input Value: <strong>{{inputValue}}</strong>
</div>

??? ?? ?????.

1.???

• ???? ?? ??? ????? ? ???? TypeScript ??? ??????. Angular ?? ?? ?? ??? ?????.
• ?? ??: ??? ??? ????? ??? ?????.

export class ChildComponent implements OnInit {

  constructor() {
    **console.log("Constructor Called");**
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {}

}

2.ngOnChanges

• ????? ?? ??? ??? ? ?????.
• ?? ??? ?? ?? ?? ?? ???? SimpleChanges ??? ?????.
• ???: ? ??? ?????? ?? ?? ??? ??? ?? ??? ???????.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  value:string = '';
  SubmitValue(val: any) {
    this.value = val.value;
  }

}

?? ?? ???? ?? ngOnChanges? ????? ???? ? ?? ???????.

changes ??? ??? ??? ???????.

<h1>Lifecycle Hooks</h1>

<input type="text" placeholder="Input here..." #val>
<button (click)="SubmitValue(val)">Submit Value</button>

<br><br>
<app-child [inputValue]="value"></app-child>

? ?? ?? ?? ???????.

3.ngOnInit

• ? ?? ngOnChanges ?? ? ? ?????.
• ?? ??: ?? ??? ????? ???? ??? ???? ?????.

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  constructor() { }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {
  }

}

4.ngDoCheck

• Angular? ?? ??? ?? ?? ??? ?? ??? ??? ??? ?????.
• ??? ?? ?? ?? ??? ?????.

<div>
    Input Value: <strong>{{inputValue}}</strong>
</div>

5.ngAfterContentInit

• ???(?: )? ?? ??? ????? ? ? ? ?????.

child.comComponent.html

export class ChildComponent implements OnInit {

  constructor() {
    **console.log("Constructor Called");**
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {}

}

parent.comComponent.html

export class ChildComponent implements OnInit, OnChanges {

  constructor() {
    console.log("Constructor Called");
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log("ngOnChanges Called");
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {}

}

child.comComponent.ts

 ngOnChanges(changes: SimpleChanges): void {
    console.log("ngOnChanges Called", changes);
  }

6.ng??? ?? ?

• ??? ??? ??? ??? ?????.
• ?? ??? ????? ??? ?????.

export class ChildComponent implements OnInit, OnChanges {

  constructor() {
    console.log("Constructor Called");
  }
  ngOnChanges(changes: SimpleChanges): void {
    console.log("ngOnChanges Called");
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {
    console.log("ngOnInit Called");
  }

}

? ??? ??? ?????.

export class ChildComponent implements OnInit, OnChanges, DoCheck {

  constructor() {
    console.log("Constructor Called");
  }
  ngOnChanges(changes: SimpleChanges): void {
    console.log("ngOnChanges Called", changes);
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {
    console.log("ngOnInit Called");
  }

  ngDoCheck() {
    console.log("ngDoCheck Called");
  }

}

ng-content? ?? ??? ??? ngAfterContentChecked? ?????.

7.ngAfterViewInit

• ????? ?? ?? ?? ?? ???? ? ? ? ?????.
• ?? ????? ??? ?? DOM ??? ?????.

8.ngViewChecked

• ?? ??? ?? ?? ?? ?? ??? ??? ?????.

9.ngOnDestroy

• ????? ???? ??? ?????.
• Observable ?? ?? ?? ??? ??? ??? ?? ?? ??? ?????.

ngOnDestroy? ?? ??? ??? ?? ????? ?? ?? ?? ??? ???? ?? ?? ??? ??? ?????.
?????:

parent.comComponent.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  value:string = '';
  SubmitValue(val: any) {
    this.value = val.value;
  }

}

parent.comComponent.html

<h1>Lifecycle Hooks</h1>

<input type="text" placeholder="Input here..." #val>
<button (click)="SubmitValue(val)">Submit Value</button>

<br><br>
<app-child [inputValue]="value"></app-child>

???? ?? ??? ???? ??:

???? ?? ??? ??? ?:

???? ?? ??:

1. ???
2. ngOnChanges(@Input ??? ?? ??)
3. ngOnInit
4. ngDoCheck
5. ngAfterContentInit
6. ??? ?? ?
7. ngAfterViewInit
8. ngAfterViewChecked
9. ngOnDestroy

??? ??? ????? ???? ???? ?? ??? ??? ???? ?? ??? ??? ??? ? ????.

? ??? Angular? ???? ????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!