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

Question

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

gavgrif · Accepted Answer · 2020-11-24 22:53:28Z

1

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

edited Nov 24, 2020 at 22:53

answered Nov 24, 2020 at 22:47

gavgrif

15.5k2 gold badges30 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ricardo Figueiredo Over a year ago

[ngClass]="{'selected':item[i] == i}" i think i got this in the wrong way then, can you explain me how does it work exacly?

gavgrif Over a year ago

What you would do normally is either set a property of selected: true / false on the data for each item so on the click the boolean property is set for the line items and set the class as - [ngClass]="{'selected': iitem.selected == true}" . Or you could create a variable - say selectedItemIndex - and set its value on the click of the item (setting it to the index of the selected item) - then you would compare the index of each iteration to the selectedItemIndex and set the 'selected' class as [ngClass]="{'selected': i == selectedItemIndex}"

Ricardo Figueiredo Over a year ago

I ended up doing a variable that has index and i compare the index on button, much easier and simple to read! Thanks !

gavgrif Over a year ago

Glad I could help, Happy coding :)

Kavinda Senarathne · Accepted Answer · 2020-11-24 23:47:59Z

1

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);
  }
}

answered Nov 24, 2020 at 23:47

Kavinda Senarathne

2,01015 silver badges16 bronze badges

1 Comment

Raquel Santos Over a year ago

where this saveTodos() is called?

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related