How to use the same template in ngIf

Question

I have many conditions to show the same template. For example:

<template [ngIf]="item.url.indexOf('http') == -1">
  <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >             
    <span class="media-body media-middle" *ngIf="isUserLoggedIn == true">{{item.name}}</span>
  </a> 
  <p>Hello, World!</p>
</template>

<template [ngIf]="item.url.indexOf('http') == 0">
  <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >             
    <span class="media-body media-middle" *ngIf="isUserLoggedIn == true">{{item.name}}</span>
  </a> 
  <p>Hello, World!</p>
</template>

<template [ngIf]="item.url.indexOf('http') == 1">
  <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >             
    <span class="media-body media-middle" *ngIf="isUserLoggedIn == true">{{item.name}}</span>
  </a> 
  <p>Hello, World!</p>
</template>

<template [ngIf]="item.url.indexOf('http') == 2">
  <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >             
    <span class="media-body media-middle" *ngIf="isUserLoggedIn == true">{{item.name}}</span>
  </a> 
  <p>Hello, World!</p>
</template>

Is it possible to take this html elements:

<a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >             
   <span class="media-body media-middle" *ngIf="isUserLoggedIn == true">
        {{item.name}}
   </span>
</a> 
<p>Hello, World!</p>

and put somewhere and then just call this html elements by name/reference in *ngIf? For example:

<template [ngIf]="item.url.indexOf('http') == 2">
  <!--reference to the repeatable code-->
</template>

Yes. It's called a component: https://angular.io/api/core/Component — random_user_name, Sep 06 '17 at 19:36
See also https://stackoverflow.com/questions/46055133/how-do-i-insert-a-template-while-interpolating-in-angular-4/46055169#46055169 — Günter Zöchbauer, Sep 06 '17 at 19:45
Check out ngSwitch here: https://angular.io/guide/template-syntax#the-ngswitch-directives — DeborahK, Sep 06 '17 at 20:03

Vega · Accepted Answer · 2017-09-07T05:54:41.377

Actually ngIf has a 'cool' attribute, then, that you could make use of:

  <ng-container *ngIf="item.url.indexOf('http') === -1; then myTemplate">
  </ng-container>

  <ng-container *ngIf="item.url.indexOf('http') === 0; then myTemplate">
  </ng-container>

  <ng-container *ngIf="item.url.indexOf('http') === 1; then myTemplate">
  </ng-container>

  <ng-template #myTemplate>
    <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >             
       <span class="media-body media-middle">{{item.name}}</span>
    </a> 
    <p>Hello, World!</p>
  </ng-template>

As <template> has been deprecated, use <ng-template> instead or <ng-container>. You can remove the second ngIf in the template as the first is sufficient.

Stackblitz

jesusverma · Answer 2 · 2017-09-07T07:57:43.590

Yes it is possible using NgIf DIRECTIVE

Conditionally includes a template based on the value of an expression.

ngIf evaluates the expression and then renders the then or else template in its place when expression is truthy or falsy respectively. Typically the:

then template is the inline template of ngIf unless bound to a different value.
else template is blank unless it is bound.

Below is snapcode:

<div *ngIf="condition; then thenBlock else elseBlock"></div>

    <ng-template #thenBlock></ng-template>
    <ng-template #elseBlock></ng-template>

Angular4 ngIf will give you more detail.

Hope this plunker will help you

How to use the same template in ngIf

2 Answers2