Angular múltiplos ngif else passando parametro no template

Stack Overflow em Português Asked by Herick on December 14, 2021

É possível fazer dois ngIf no angular.html? segue um exemplo

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

preciso fazer duas verificações.

Verificar restrição do professor caso for false verificar disponibilidade da sala de aula.

se um exemplo do meu código. Sou novo em angular e não sei como tudo funciona.

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

Alguma ajuda de como resolver?

angular

One Answer

Às vezes escrever em pseudocódigo ajuda a clarear o objetivo:

se restricaoSegUm == False && restricaoSalaSegUm == False então
    mostrar <div class="cursor-pointer">
senao
    se restricaoSegUm == True então
        mostrar <ng-template #templateName>
    senao se restricaoSalaSegUm == True então
        mostrar <ng-template-sala #sala>

Fazendo uso da diretiva NgIf (Angular 4 e 5)

<td *ngIf="!restricaoSegUm && !restricaoSalaSegUm"
    [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 *ngIf="restricaoSegUm; else sala" #templateName>
    <td style="background-color: rgb(244, 67, 54);"></td>
</ng-template>

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

Answered by mercador on December 14, 2021

Add your own answers!

Ask a Question

Get help from others!