Menu
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>
681
Best way to use ngFor and ngIf together is to use <ng-container> element to write one of the structural directive. ng-container allows us to create a separate section in a template without adding it to DOM. The ng-container does not get added to the DOM, but content inside it is rendered.
Instead of using productItem component variable, we can save it in a local variable (for instance product) using as syntax so that it can be used in component template. To use the *ngif as variable in alternative then template or else template, refer the variable prefixed with let keyword in <ng-template> element.
Here we have nested the ngIf directives at the top of the component template so that we get all the data needed anywhere in the component upfront. All this nesting doesn't look great visually, but at least it prevents a lot of the code repetition. If it works, why not?
Can't have multiple template bindings on one element. You can use ng-container to move one directive to enclose the other as shown below. The following code shows the ng-template using the ngIf, then & else example. Here we use the ng-template specify the template for the then & else clause.
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
114
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
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
