CODEWITHSUNDEEP
htmlcssangulartypescriptangular-directive
Ricardo Figueiredo
Ricardo Figueiredo

Reputation: 216

How to use Angular ngIf diretive to display or hide elements?

<div *ngFor = "let item of meusItems, let i=index" [ngClass]="{'selected':item[i] == i}">
    <li> Nome: {{item.item.name}}</li>
    <li> Nome: {{item.item.descricao}}</li>

    <select class="custom-select"> 
        <option *ngFor =" let soldado of meusSoldados"> {{soldado.soldado.name}}</option>
    </select>
    <button ></button>
</div>

I am using a ngFor to display the items of my database. Inside that div i also show a button and a select, but i only want to display them when the item is selected. Imagine item 1 is selected, then the button and select is displayed for that item, but all others have no button or select.

I imagine that we can probably do it with a simple ngIf but im not seeing how? Any help is appreciated.

Upvotes: 0

Views: 3249

Answers (2)

Kavinda Senarathne
Kavinda Senarathne

Reputation: 2004

For example this is a sample code how it appears :

HTML :

<div *ngIf="selected" class="alert alert-success box-msg" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>

TS :

export class AppComponent implements OnInit{

  (...)
  public selected = false;
  (...)
  saveTodos(): void {
   //show box msg
   this.selected= true;
   //wait 3 Seconds and hide
   setTimeout(function() {
       this.selected= false;
       console.log(this.selected);
   }.bind(this), 3000);
  }
}

Upvotes: 1

gavgrif
gavgrif

Reputation: 15509

An li element is not a valid direct child of a div element - only a ul element can be a direct parent of an li. what you really need to do is to nest the content inside the repeating li and have an ng-container with an *ngIf on it to conditionally show the content if the item is selected.

Note that I have followed your logic to determine if the item is selected - but there are better ways of doing that.

Also - spans are inline level elements - so you will need styling to display themn correctly and space them out - I would use flex - with the li having display: flex set on it and perhaps justify-content: space-between to separate out the spans.

<ul class="meus-items-list">
  <li *ngFor = "let item of meusItems, let i=index" [ngClass]="{'selected':item[i] == i}">
     <span> Nome: {{item.item.name}}</span>
     <span> Nome: {{item.item.descricao}}</span>

     <ng-container *ngIf="item[i] == i">
      <select class="custom-select"> 
       <option *ngFor =" let soldado of meusSoldados"> {{soldado.soldado.name}}</option>
      </select>
     <button >Click me</button>
     </ng-container>
  </li>
</ul>

You could also do this with a ul / li nested inside the li

<ul class="meus-items-list">
  <li *ngFor = "let item of meusItems, let i=index" [ngClass]="{'selected':item[i] == i}">
   <ul>
     <li> Nome: {{item.item.name}}</li>
     <li> Nome: {{item.item.descricao}}</li>

     <li *ngIf="item[i] == i">
      <select class="custom-select"> 
       <option *ngFor =" let soldado of meusSoldados"> {{soldado.soldado.name}}</option>
      </select>
     <button >Click me</button>
     </li>
    </ul>
  </li>
</ul>

You could even do this with CSS alone - just by applying display none to the select and button elements in all li's except for the selected one. This will still have these elements in the DOM so is probably not my first thought as to how to do it.

li:not(.selected) select,
li:not(.selected) button {
   display: none;
}

Upvotes: 1

Related Questions