CODEWITHSUNDEEP
angulartypescript
Thiago lourenço
Thiago lourenço

Reputation: 47

show or hide icon according to field information

I would like the icon to follow the logic within [ngIf]. If it is empty, the icon disappears, but if it has information in the field, it appears. I do this inside ngIF or I do it in my TS file. If anyone can give me a tip on how to do it. I can use the icon class to do it or I must create a method.

<ng-template [ngIf]="item.valor == null || item.valor.length < 199" [ngIfElse]="segundaParte">
        <div class="detalha" fxFlex="auto" fxFlex.gt-xs="33%" fxFlex.lt-sm="100%" fxFlex.gt-sm="33.3%">
          <h3 tabindex="0" class="item__titulo">{{item.objCampo.label}}</h3>
          <span tabindex="0" class="item__detalhar-conteudo item__detalhar-space">
              <ng-template [ngIf]="item.mascara === 2" [ngIfElse]="valorObjeto">
                  <a href="{{ linkItens(item.valor) }}" class="border-item-detalhe"  matTooltip="Ver processos" matTooltipPosition="right" target="_blank">
                      <span class="item__detalhar-item-valor" [innerHTML]="item.valor | mascarasCampos:item.mascara"></span>
                      <span class="material-icons item__detalhar-icon-detalhe">open_in_new</span> (This is the icon field)
                  </a>
              </ng-template>

              <ng-template #valorObjeto>
                  <span class="item__detalhar-item-valor" [innerHTML]="item.valor | mascarasCampos:item.mascara"></span>

                  <span class="material-icons item__detalhar-icon-detalha"></span>     
              </ng-template>
          </span>
        </div>
      </ng-template>
```

Upvotes: 0

Views: 678

Answers (1)

Srikar Phani Kumar M
Srikar Phani Kumar M

Reputation: 1374

You can use the hidden attribute here.

<span 
     class="material-icons item__detalhar-icon-detalhe"
     [hidden]="item.valor === null" // if the item.valor is null, meaning empty, it disappears
>
     open_in_new
</span>

Upvotes: 1

Related Questions