What s the difference between ngOnInit and ngAfterViewInit of Angular2

Question

I can not understand what the difference between ngOnInit and ngAfterViewInit  I found the only difference between them is  ViewChild  According to the following code  the elementRef nativeElement in them are the same  What scene should we use ngAfterViewInit   Component     selector   my-child-view     template       lt div id  quot my-child-view-id quot  gt   hero   lt  div gt         export class ChildViewComponent      Input   hero  string    Jack                              Component     selector   after-view     template         lt div id  quot after-view-id quot  gt -- child view begins -- lt  div gt         lt my-child-view  hero   quot heroName quot  gt  lt  my-child-view gt       lt div gt -- child view ends -- lt  div gt                lt p  ngIf  quot comment quot  class  quot comment quot  gt          comment        lt  p gt         export class AfterViewComponent implements AfterViewInit  OnInit     private prevHero         public heroName    Tom     public comment             Query for a VIEW child of type  ChildViewComponent     ViewChild ChildViewComponent  viewChild  ChildViewComponent     constructor private logger  LoggerService  private elementRef  ElementRef           ngOnInit         console log  OnInit        console log this elementRef nativeElement querySelector   my-child-view-id         console log this elementRef nativeElement querySelector   after-view-id         console log this viewChild       console log this elementRef nativeElement querySelector  p            ngAfterViewInit         console log  AfterViewInit        console log this elementRef nativeElement querySelector   my-child-view-id         console log this elementRef nativeElement querySelector   after-view-id         console log this viewChild       console log this elementRef nativeElement querySelector  p

User · Answer

ngOnInit   is called after ngOnChanges   was called the first time  ngOnChanges   is called every time inputs are updated by change detection   ngAfterViewInit   is called after the view is initially rendered  This is why  ViewChild   depends on it  You can t access view members before they are rendered

User · Answer

ngOnInit   is called right after the directive s data-bound properties have been checked for the first time  and before any of its children have been checked  It is invoked only once when the directive is instantiated   ngAfterViewInit   is called after a component s view  and its children s views  are created  Its a lifecycle hook that is called after a component s view has been fully initialized

User · Answer

Content is what is passed as children  View is the template of the current component   The view is initialized before the content and ngAfterViewInit   is therefore called before ngAfterContentInit        ngAfterViewInit   is called when the bindings of the children directives  or components  have been checked for the first time  Hence its perfect for accessing and manipulating DOM with Angular 2 components  As  G  nter Z  chbauer mentioned before is correct  ViewChild   hence runs fine inside it   Example    Component       selector   widget-three       template    lt input  input1 type  text  gt      export class WidgetThree       ViewChild  input1   input1       constructor private renderer Renderer         ngAfterViewInit            this renderer invokeElementMethod              this input1 nativeElement               focus

[angular] What's the difference between ngOnInit and ngAfterViewInit of Angular2?

Examples related to angular

Examples related to ngoninit