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>
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.
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:
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.