angular-ng-if

Passing ngFor variable to an ngIf template

by

All you need is to use [ngTemplateOutletContext] Read More Here is the way how you can achieve that : <div> <h3>All Templates</h3> <ul *ngFor=”let number of numbers”> <ng-container [ngTemplateOutlet]=’number % 2 == 0 ? even_tpl : odd_tpl’ [ngTemplateOutletContext]=”{number:number}”></ng-container> </ul> </div> <ng-template #odd_tpl let-number=”number”> <li>Odd: {{number}}</li> </ng-template> <ng-template #even_tpl let-number=”number”> <li>Even: {{number}}</li> </ng-template> WORKING DEMO

How to include an ng-template element without a condition in Angular 2

by

<ng-template #myTemplate> <h1>Some Header</h1> <p>Some text…</p> </ng-template> <ng-container *ngTemplateOutlet=”myTemplate”> </ng-container> We can definitely use ‘ng-container’ to instantiate the ‘myTemplate‘ template on the page. We are referring to the ‘myTemplate‘ template via its template reference #myTemplate, and we are using the ngTemplateOutlet structural directive to render the template. ngTemplateOutlet directive inserts an embedded view from a … Read more

What is the difference between ng-if and *ng-if in angular2

by

ngIf is the directive. Because it’s a structural directive (template-based), you need to use the * prefix to use it into templates. *ngIf corresponds to the shortcut for the following syntax (“syntactic sugar”): <template [ngIf]=”condition”> <p> Our heroes are true! </p> </template> Equivalent to: <p *ngIf=”condition”> Our heroes are true! </p> See this doc for … Read more

Angular 4 default radio button checked by default

by

You can use [(ngModel)], but you’ll need to update your value to [value] otherwise the value is evaluating as a string. It would look like this: <label>This rule is true if:</label> <label class=”form-check-inline”> <input class=”form-check-input” type=”radio” name=”mode” [value]=”true” [(ngModel)]=”rule.mode”> </label> <label class=”form-check-inline”> <input class=”form-check-input” type=”radio” name=”mode” [value]=”false” [(ngModel)]=”rule.mode”> </label> If rule.mode is true, then that … Read more

How to conditionally wrap a div around ng-content

by

Angular ^4 As workaround i can offer you the following solution: <div *ngIf=”insideRedDiv; else elseTpl” style=”display: inline; border: 1px red solid”> <ng-container *ngTemplateOutlet=”elseTpl”></ng-container> </div> <ng-template #elseTpl><ng-content></ng-content> </ng-template> Plunker Example angular v4 Angular < 4 Here you can create dedicated directive that will do the same things: <div *ngIf=”insideRedDiv; else elseTpl” style=”display: inline; border: 1px red … Read more

Angular *ngIf variable with async pipe multiple conditions

by

You can do this: <ng-template ngFor let-user [ngForOf]=”users$ | async” *ngIf=”(users$ | async)?.length > 1 && (users$ | async)?.length < 5″> <div>{{ user | json }}</div> </ng-template> Keep in mind that when using a subscription from a http-request, this would trigger the request twice. So you should use some state-management pattern or library, to not … Read more

angular 4: *ngIf with multiple conditions

by

Besides the redundant ) this expression will always be true because currentStatus will always match one of these two conditions: currentStatus !== ‘open’ || currentStatus !== ‘reopen’ perhaps you mean one of !(currentStatus === ‘open’ || currentStatus === ‘reopen’) (currentStatus !== ‘open’ && currentStatus !== ‘reopen’)

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)