CODEWITHSUNDEEP
angularangular-template
Herick
Herick

Reputation: 217

Angular multiple ngif else passing parameter in template

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>

Upvotes: 1

Views: 13984

Answers (4)

mtpultz
mtpultz

Reputation: 18248

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.

Upvotes: 6

than
than

Reputation: 887

  • 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.

Upvotes: 0

Nikola Gavric
Nikola Gavric

Reputation: 3543

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'>

Upvotes: -1

Doh09
Doh09

Reputation: 2385

You could wrap 2 *ngIf inside each other.

so like

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

Upvotes: 0

Related Questions