How to use the same template in ngIf

Question

I have many conditions for displaying the same template. For instance:

<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 these 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 these html elements by name / link in *ngIf? For instance:

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

Answer 1

In fact, ngIf has the attribute 'cool' then, which you could use:

  <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>

Since it is <template>deprecated, use <ng-template>instead of or <ng-container>. You can delete the second ngIfin the template as the first.

Stackblitz

Answer 2

Yes, you can use NgIf DIRECTIVE

, .

ngIf , then else, . :

• ngIf, .
• else , .

snapcode:

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

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

Angular4 ngIf .

, plunker