How to choose HTML according to the value while using ngFor in angular4?

Question

i am new to angular, suppose i have an array of values like this

domElement:Array<boolean>=[true,false,false,false,false,true,true,true];

and i want different html for true values and different html for false values while using ngFor, I followed this blog and implemented this but it is not working

ie.

     <div *ngFor="let n of domElement; let i=index">   

<div *ngFor="let n of num; let i=index">

    <ng-template *ngIf="n; then gotValue else noValue"></ng-template>

    <ng-template #noValue>
        <div class="alert alert-warning">
            no value found - dummy element for no record !!!
        </div>
    </ng-template>
    <ng-template #gotValue>
        <div class="alert alert-success">
            got values !!!
        </div>
    </ng-template>
</div>

marouane kadiri · Answer 1 · 2017-08-31T08:00:06.303

2

I guess you defined two different block with the same name there is no #gotValue block in your code try this out:

<div *ngFor="let n of domElement">
    <ng-template *ngIf="n; then noValue else gotValue"></ng-template>
    <ng-template #noValue>
        <div class="alert alert-warning">
            no value found - dummy element for no record !!!
        </div>
    </ng-template>
    <ng-template #gotValue>
        <div class="alert alert-success">
            got values !!!
        </div>
    </ng-template>
</div>

edited Aug 31 '17 at 08:00

answered Aug 31 '17 at 07:14

marouane kadiri

316
1
8

i tried to implement this but no matter what the value is i always get the displayed, please see my updated question, thank you – Lijin Durairaj Aug 31 '17 at 07:52
If my new implementation doesn't work for you, then please share with us the component code. It might be something that causes the n to be equal 'undefined' which means that the if clause will automatically redirect you to the false block. – marouane kadiri Aug 31 '17 at 08:02

Krzysztof Lach · Accepted Answer · 2017-08-31T07:39:43.967

If you want different code for only two specific case scenerio then you have to use. *ngIf / else not *ngIf / then / else. Explanation here

<div *ngFor="let n of num"> <template1 *ngIf="n%2 === 0; else other_content"></template1> <template2 #other_content></template2> </div>

If your code doesn't change and only thing that changes is styling than is better to use one common component with style replacement by ng class directive.
- Angular doc. explanation of NgClass
- SO Explanation

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

score 1 · Answer 3 · answered Aug 31 '17 at 07:10

1

Is this what you're looking for?

<div *ngFor="let n of num">
    <template1 *ngIf="n%2 === 0"></template1>
    <template2 *ngIf="n%2 !== 0"></template2>
</div>

answered Aug 31 '17 at 07:10

JSON Derulo

9,780
7
39
56

score 0 · Answer 4 · answered Aug 31 '17 at 07:45

<div *ngFor="let n of num; let i=index">
<div *ngIf="n%2===0;else gotValue"></div>
    <div class="alert alert-warning">
        no value found - dummy element for no record !!!
    </div>
<ng-template #gotValue>
    <div class="alert alert-success">
        got values !!!
    </div>
</ng-template>

You Don't need noValue ng-template. This worked for me. Hope it helps.

How to choose HTML according to the value while using ngFor in angular4?

4 Answers4