Angular ngIf render

Question

just a simple question.

let's take as IE this code :

<div *ngIf="1===2">
 ...some content
</div>

Is the content inside the NgIf rendered and then hide from the page or angular "knows" that this div is not gonna be displayed so doesn't even render the content inside it?

The content is not rendered to the DOM. See this [question](https://stackoverflow.com/q/43034758/2309376) for more info — Simply Ged, Apr 10 '18 at 09:01
Please close your question by clicking the checkmark to the left of the answer that helped you most — Vikas, Jun 24 '18 at 18:38

score 2 · Answer 1 · answered Apr 10 '18 at 09:03

2

*ngIf evaluates the expression and then renders the template in its place when the expression is truthy or falsy respectively. It adds and removes them physically from the DOM.
see this ngIf case study

answered Apr 10 '18 at 09:03

Vikas

11,859
7
45
69

score 0 · Answer 2 · answered Apr 10 '18 at 09:05

so answering your question

Placing the ngIf directive on a component, or element, will, in fact, hide or show that element based on the expression you pass it to be evaluated. Once evaluated, Angular will simply add or remove your DOM nodes, mount or remount your components, from the DOM - as the expression changes.

for an example when your page loads in dom and angular js is been called angular knows checks that this div is not gonna be displayed so doesn't even render the content inside it

also when you check in your element debugger you can see that div is hidden showing the comment of your condition.

detailed

Angular ngIf render

2 Answers2