Angular multiple ngif else passing parameter in template

Question

Is it possible to do two ngIf in angular.html?

An example:

if(1=2){
}else{
    if(){
    }
}

I need to make two checks.

Check the teacher's restriction if it is false to check the availability of the classroom.

follows an example of my code. I'm new to angular and I do not know how everything works.

   <td *ngIf="!restricaoSegUm; else templateName" *ngIf="!restricaoSalaSegUm; else sala" [dragula]='"another-bag"' [dragulaModel]='segUm'>
      <div [@resultadoAnimacao]="animationsState" class="cursor-pointer"  *ngFor='let s1 of segUm' (dblclick)="removeNumbers(s1,this.segUm)">{{s1?.no_diciplinas}}</div>
    </td>

<ng-template #templateName >
    <td style="background-color: rgb(244, 67, 54);"></td>
</ng-template>
<ng-template-sala #sala>
    <td style="background-color: rgb(244, 146, 54);"></td>
</ng-template-sala>

Just use the logical AND operator '&&' like so *ngif="!teachersRestriction && classRoomAvailable;" should work — than
– than, Commented Feb 13, 2018 at 22:45
@than The problem is that each restriction will have its background-color. Teachers color red. classRoom color orange. — Herick
– Herick, Commented Feb 13, 2018 at 23:10
correct me if I am wrong, those restrictions are only to alter background color, you still want whatever is in div to show up? and if my assumption is right here then you should use [ngStyle] instead — than
– than, Commented Feb 13, 2018 at 23:14
more or less, I need to change the color and cancel the drag and drop ([dragula]). so, cuz of this I did it with ngIf — Herick
– Herick, Commented Feb 13, 2018 at 23:36
have a look at the answer I have provided, if it still doesn't solve your problem then I would suggest you provide a plunker example and state all possible logical use cases. — than
– than, Commented Feb 14, 2018 at 2:36

mtpultz · Accepted Answer · 2019-03-19 00:32:34Z

Instead of the structural directive *ngIf to accomplish what you're doing. You could try and work with ngTemplateOutlet and ngTemplateOutletContext to help structure the markup so it's more readable.

<ng-container [ngTemplateOutlet]="(statement) ? if : else"
              [ngTemplateOutletContext]="{ data: { key: value, values: [...], ... } }"></ng-container>

<ng-template #if>
  <div>...</div>
</ng-template>

<ng-template #else 
             let-data="data" 
             let-values="values" 
             let-...="'...'">

  <ng-container [ngTemplateOutlet]="(statement) ? innerIf : innerElse"></ng-container>

  <ng-template #innerIf>
    <td [ngClass]="'text-danger': data.key === 'something'">{{ data.key }}</td>
  </ng-template>

  <ng-template #innerElse>
    <td *ngFor="let value in values">{{ value }}</td>
  </ng-template>

</ng-template>

Regardless of what method (*ngIf, *ngTemplateOutlet, ...) you choose with this kind of complexity in your template it seems like the best solution would be creating more stateless components.

Alex09 · Accepted Answer · 2018-02-13 22:46:55Z

0

You could wrap 2 *ngIf inside each other.

so like

<div ng-if="myVar">
<div ng-if="myOtherVar">
<!--
Your code
-->
</div>
</div>

answered Feb 13, 2018 at 22:46

Alex09

2,3851 gold badge19 silver badges33 bronze badges

Comments

than · Accepted Answer · 2018-02-14 02:33:36Z

You should not be putting 2 *ngIfs but rather do this instead *ngIf="conditions; then thenBlock; else elseBlock".
In conditions section, check for teacher restriction, once in the templateName block then you determine which background color to use.

Try this:

<td *ngIf="!restricaoSegUm; else templateName" 
    [dragula]='"another-bag"' [dragulaModel]='segUm'>
    <div [@resultadoAnimacao]="animationsState" class="cursor-pointer"  *ngFor='let s1 of segUm' (dblclick)="removeNumbers(s1,this.segUm)">{{s1?.no_diciplinas}}</div>
</td>

<ng-template #templateName >
    <td [ngStyle]="restricaoSalaSegUm ? { 'background-color': 'rgb(244, 67, 54)' } : { 'background-color': 'rgb(244, 146, 54);' }">
        <div [@resultadoAnimacao]="animationsState" class="cursor-pointer"  *ngFor='let s1 of segUm' (dblclick)="removeNumbers(s1,this.segUm)">{{s1?.no_diciplinas}}</div>
    </td>
</ng-template>

I don't understand what your logical conditions evaluate to, hopefully I have pointed you in the right direction.

Nikola Gavric · Accepted Answer · 2018-02-13 22:46:56Z

-1

You can put both conditions inside one *ngFor and btw it's incorrect to use 2 *ngFor on a single element:

<td *ngIf="!restricaoSegUm && !restricaoSalaSegUm; else templateName" [dragula]='"another-bag"' [dragulaModel]='segUm'>

answered Feb 13, 2018 at 22:46

Nikola Gavric

3,5331 gold badge10 silver badges16 bronze badges

1 Comment

Boat Over a year ago

This won't work, because [dragula] is not a property of td.

Collectives™ on Stack Overflow

Angular multiple ngif else passing parameter in template

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related