0

Angular doc says for ngOnInit ;

Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties.

But what does exactly initializing mean ?

Because When I create a component and debug it, component doesn't display data-bound properties to DOM until ngAfterViewInit is called. But standart HTML elements are being rendered to the DOM when ngOnInit is called. Please check the following;

Component HTML

<h1 class="parent-normal"> I'M TRYING TO MAKE SENSE OF ANGULAR</h1> --> Being rendered when ngOninit is called

<div class="parent-data-bound">{{parentDataBound}}</div> -->Not being rendered until ngAfterViewInit is called

<app-child></app-child> --> Same as parent component. Standart HTML elements of child are being rendered when parent's ngOnInit component rendered. But data bound properties are not being rendered until
parent's ngAfterViewInit is rendered

So is the expression wrong what angular doc says ? Because when ngOnInit is called, data-bound properties are not being rendered.

seniorlearner
  • 25
  • 6
  • What you mean by "debugging"? I also debug, just 2 days ago and the own data of the component display right after constructor runs, after that, onInit run. I put breakpoint to the RenderView/UpdateView and trace down the code, each time I hit F9, I see one text appear on screen - this what I called "debug". You can read my answer and the link I attached to get more info about the lifecycle hook: https://stackoverflow.com/a/74556232/4960765 – Jimmy Nov 26 '22 at 18:43
  • I added breakpoints to all lifecycle hooks to see if DOM is being rendered. In ngOnInit hook, data-bound properties was not still rendered until ngAfterViewInit. Is that wrong way to debug ? – seniorlearner Nov 26 '22 at 19:37
  • I wouldn't say it right or wrong as it depends on your data, the way you setup your component. As in my previous answer, every time I hit F9 (after set a breakpoint in TemplViewFn), it shows me each binding on screen, 1 F9 = 1 binding, so I know when and what exactly is rendering. At the same time, I add a console.log in each lifecycle hook, if after hitting F9, and see a console.log, I know they run together. But in my case, onInit always run after first binding. – Jimmy Nov 26 '22 at 19:47
  • So if you're sure your breakpoint always hit After onInit/lifecycle hook then you can share the stackblitz link here. We could debug together. – Jimmy Nov 26 '22 at 19:48
  • I don't know how to use deeply chrome debugger but I'm setting breakpoints to console.log statements like this ; https://stackblitz.com/edit/angular-ivy-tngipt?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html – seniorlearner Nov 26 '22 at 19:58
  • I checked and indeed the onInit run before data bound. Need to debug further, I will notify you later, it's 4 AM here – Jimmy Nov 26 '22 at 20:32
  • Alright, so the key word here is `data-bound properties`, that is the @input of the component, `name` in your example is the own data, not data-bound. Data-bound won't available in constructor so onInit is where we get it. – Jimmy Nov 27 '22 at 17:22
  • and yes, `name` or own properties is only available when the View/Component is checked, `AfterViewInit` is where Change Detection finished checking the own properties aka rendering own properties on screen. ContentInit is content projection, just to add more info. – Jimmy Nov 27 '22 at 17:24

0 Answers0