Hide/show individual items inside ngFor

Question

I need to show / hide part of component. Here is Angular2 example.

Answer 1

Add HTML ngFor by passing the values to the function.

  

    

      

        {{ent.values}}
      
      

        
        {{ent.name}}
      
    
  

declare variable.

 hideme = {};
 entities = [
    { id: 1, values: "Animal", name: "Tiger" },
    { id: 2, values: "Bird", name: "Sparrow" },
    { id: 3, values: "River", name: "Nile" }
  ];

initiate it in the constructor and onInit.

  constructor() {
    this.hideme = {};
  }

  ngOnInit(): void {
    this.entities.forEach(e => {
      this.hideme[e.id] = false;
    });
  }

set all values to false.

then onclick .

 showEntity(item) {
   Object.keys(this.hideme).forEach(h => {
     this.hideme[h] = false;
   });
   this.hideme[item.id] = true;
 }

change flag of that perticular id to true and rest of them will be false

Check stackblitz here!