CODEWITHSUNDEEP
angularangular7angular8
POV
POV

Reputation: 12015

What is difference between tab content realization?

There is my approach to show the tab content:

<mat-tab-group>
  <mat-tab label="First">
    <ng-template matTabContent>
      The First Content
    </ng-template>
  </mat-tab>
</mat-tab-group>

What is difference between this

<mat-tab-group>
  <mat-tab label="First">
    <ng-template *ngIf="condition">
      The First Content
    </ng-template>
  </mat-tab>
</mat-tab-group>

and this?

<mat-tab-group>
  <mat-tab label="First">
    <app-component *ngIf="condition"></app-component>
  </mat-tab>
</mat-tab-group>

Upvotes: 1

Views: 164

Answers (2)

RanjithKumar
RanjithKumar

Reputation: 11

Approach1:

<ng-template *ngIf="condition">
      The First Content
</ng-template>

Above template will not be rendered in view since it's virtual element. We can use it with template reference variable & *ngTemplateOutlet directive like below:

<ng-template #myContent>This is ngTemplate content</ng-template>
<div *ngTemplateOutlet="myContent"></div>

In the above code myContent is a template reference variable with '#' symbol. So element will get replaced with content. By using this, we can define reusable template and use in many places.

Approach2:

<app-component *ngIf="condition"></app-component>

if Condition is truthy, it will render app-component template.

Upvotes: 1

Nikhil
Nikhil

Reputation: 6641

A: 

<app-component *ngIf="condition"></app-component>

If condition value is truthy, then the above code loads the app-component.

B:

  <ng-template *ngIf="condition">
      The First Content
  </ng-template>

The above code wouldn't render anything. This is because <ng-template> is a template element and is never displayed directly. It only works when used with structural directives.

Before rendering, Angular replaces the above code with:

<ng-template [ngIf]="condition">
  <ng-template>
    The First Content
  </ng-template>
</ng-template>

This is why even if condition value is truthy, no content would be displayed. <ng-template> would be replaced by diagnostic comments by Angular, and since there are no structural directives, no content would be displayed.

Upvotes: 1

Related Questions