There is performance difference using ngIf directly on a component

Asked

Viewed 55 times

3

Hello, Could someone tell me if there is a difference in performance in the code snippets below, and if there is, what would be the most performative? Thank you!!

<div *ngIf="false">
    <componente></componente>
</div>

<componente *ngIf="false"></componente>

javascript angular web-application front-end

  • Did you ever test whether the ngIf works within <componente></componente>?

  • 1

    In reality both forms work... what I would like to know is if the <component> comes to be instantiated in the GIFT and then removed from the GIFT, or if it does not even enter in the GIFT. Another detail... in the example it is clearer if false is used... because the doubt is in loading the component. I do not know if it is clear.

1 answer

1

Both have the same performance ngIf is a structural directive so it generates an ng-template around the element you place it and manipulates the gift accordingly. Thus in no case does it instantiate the component if ngIf is false. However there is a difference between semantics and style since the div has a display block and the component does not necessarily.

<componente *ngIf="hero" class="name">{{hero.name}}</componente>

flipped

<ng-template [ngIf]="hero">
  <componente class="name">{{hero.name}}</componente >
</ng-template>

more information: Directive differences in Angular

Browser other questions tagged javascript angular web-application front-end

You are not signed in. Login or sign up in order to post.