Please clarify Angular's doc for ngOnInit

JavaScript
1

For the documentation of Angular. No need to link it.
ngOnInit()

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

Called once, after the first ngOnChanges()."

What does it mean by “displays the data-bound properties”?
Why use the world “display” if only data is stored?
What is the difference between “data-bound properties” and “input properties”?

2

It means it rendered everything that is inside double curly braces:

@Component({
  selector: 'greeting',
  template: `
    <h1>Hello {{name}}!</h1>
  `
})
export class GreetingComponent  {
  name = 'world' // data-bound property
}

A component wouldn’t only store data; it either displays data directly, or passes the data down to presentational components (which then display the data).

Input properties are received from outside, such as

@Component({
  selector: 'greeting',
  template: `
    <h1>Hello {{name}}!</h1>
  `
})
export class GreetingComponent  {
  @Input() name: string
}

and somewhere else

<greeting name="world"></greeting>
3

OK.

It was hard for me to understand that the data-bound property can be used in the HTML template, and thus it can be rendered.

  1. Render
  2. Run ngOnInit.

Does that mean that if ngOnInit does calculations and preparations that affect how the view should look like, it will result in extra rendering?

In that case, calculations could be put in the constructor to avoid multiple renderings.

Note: A @Component always has a view and is always presentational. The directive is more generic.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.