What is the difference between ngAfterContentInit() and ngAfterViewInit()?

Question

What is the difference between functions ngAfterContentInit() and ngAfterViewInit()?

Günter Zöchbauer · Accepted Answer · 2017-08-26T14:52:09.840

47

Content is what is passed as children usually to be projected at some <ng-content> element of a component.
View is the template of the current component.

The view is initialized after the content and ngAfterViewInit() is therefore called after ngAfterContentInit().

@Component({
  selector: 'parent-cmp',
  template: '<div #wrapper><ng-content></ng-content></div>'
})
class ParentComponent {
  @ViewChild('wrapper') wrapper:ElementRef;
  @ContentChild('myContent') content:ElementRef;

  ngAfterViewInit() {
    console.log('ngAfterViewInit - wrapper', this.wrapper);
    console.log('ngAfterViewInit - content', this.content);
  }

  ngAfterContentInit() {
    console.log('ngAfterContentInit - wrapper', this.wrapper);
    console.log('ngAfterContentInit - content', this.content);
  }
}

<parent-cmp><div #myContent>foo</div></parent-cmp>

If you run this code, the output for ngAfterViewInit - content should be null.

More details about lifecycle hooks see https://angular.io/guide/lifecycle-hooks

edited Aug 26 '17 at 14:52

answered Jun 22 '16 at 12:23

Günter Zöchbauer

623,577
216
2,003
1,567

1

may be something was changed since Jun 22, because it returns me Object in both cases – Stepan Suvorov Nov 20 '16 at 19:48
Not sure what you mean with "returns Object". I guess it would be better to ask a new question with the code that demonstrates what you have tried – Günter Zöchbauer Nov 20 '16 at 19:51
1

well... it's the same question - trying to understand the difference. here the code - http://plnkr.co/edit/eOOzPdpRrsaZy1caBZn3?p=preview – Stepan Suvorov Nov 20 '16 at 20:07
I can confirm that both are available in `ngAfterViewInit()` that this is really weird. Looks like a bug to me. Same behavior with components instead of plain elements http://plnkr.co/edit/lXMC9nXykT1nfwqHn1j7?p=preview – Günter Zöchbauer Nov 20 '16 at 20:23
7

"The view is initialized before the content and ngAfterViewInit() is therefore called before ngAfterContentInit()." Doesn't seem right: https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview – Matthieu Drula Feb 10 '17 at 14:09
@GünterZöchbauer if it's called after, then the content shouldn't be null in `afterViewInit`. – Ced Apr 09 '18 at 12:38
4

Maybe something changed, but this answer is no longer correct. `AfterContentInit` lifecycle occurs before `AfterViewInit`. The output for `ngAfterContentInit - wrapper` is undefined. Other outputs are defined. See this for similar plunker using v8 https://plnkr.co/edit/vZzZyrYnsB46S64B?open=lib%2Fapp.ts&deferRun=1 – philip yoo Nov 20 '20 at 17:06

score 30 · Answer 2 · answered Apr 29 '17 at 19:38

30

The following picture shows the order of the hooks. source: Angular Lifecycle Hooks

ngAfterContentInit : This is called after components external content has been initialized.

ngAfterViewInit : This is called after the component view and its child views has been initialized.

answered Apr 29 '17 at 19:38

Debasis Panda

433
1
6
15

9

What exactly means "external content" ? – Nexeuz Apr 25 '19 at 20:58
4

@Nexeuz external content is passed by ng-content directive – Thomas Banderas Nov 24 '19 at 23:05
@Nexeuz external content means a way to import HTML content from outside of the component may be from parent component to a specific location of the current component. – Laxmikant Oct 22 '20 at 04:00
1

@Laxmikant now I have understood "content " refers also to content projected by bindings in the component, is correct?. – Nexeuz Nov 05 '20 at 02:41
ng-container is a good example for projected content @Nexeuz – hichem hamdaoui Jun 17 '21 at 11:01

What is the difference between ngAfterContentInit() and ngAfterViewInit()?

2 Answers2

Linked