show and hide element for each clicked button in angular2+

hi,

i have a problem when i click in button i want to show just element related with button but in my script when i click in the button i show the other elements

how can i solve this please ?

and thanks in advance

<div *ngFor="let pa of p.phases">
<div class="col-md-2">
<button class="btn btn-default" (click)="showlivrable=!showlivrable" style="width: 133px;height:133px;" >
<img *ngIf='pa.libelle == "demarrage"' src="./assets/img/icons/icon_demarrage.png"/>
<img *ngIf='pa.libelle == "planification"' src="./assets/img/icons/icon_planif.png"/>
<img *ngIf='pa.libelle == "exécution"' src="./assets/img/icons/icon_execution.png"/>
<img *ngIf='pa.libelle == "Suivi"' src="./assets/img/icons/icon_suivi.png"/>
<img *ngIf='pa.libelle == "Clôture"' src="./assets/img/icons/icon_cloture.png"/>
<img *ngIf='pa.libelle == "Bilan d’efficacité"' src="./assets/img/icons/icon_bilan.png"/>
{{pa.libelle}}
Du: {{pa.du}} Au: {{pa.au}}span>
Du: {{pa.du}} Au: {{pa.au}}span>
Du: {{pa.du}} Au: {{pa.au}}span>
Du: {{pa.du}} Au: {{pa.au}}span>
Du: {{pa.du}} Au: {{pa.au}}span>
Du: {{pa.du}} Au: {{pa.au}}span>
button>
div>
<div *ngIf="showlivrable" style="display:inline-block">
{{ld.title}} {{ld.description}}
span>
p>
{{ld.title}} {{ld.description}}
span>
p>
{{ld.title}} {{ld.description}}
span>
p>
{{ld.title}} {{ld.description}}
span>
p>
{{ld.title}} {{ld.description}}
span>
p>
{{ld.title}} {{ld.description}}
span>
p>
div>
t;/div>

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Manav Pandya8y ago
Hello

You can achieve this functionality like this :

app.component.ts :
export class AppComponent {
  DisplayDiv1: boolean;
  DisplayDiv2: boolean;

  constructor() {
    this.DisplayDiv1 = false;
    this.DisplayDiv2 = false
  }

  ShowHideDiv(val) {
    if (val == "div1")
      this.DisplayDiv1 = !this.DisplayDiv1;
    if (val == "div2")
      this.DisplayDiv2 = !this.DisplayDiv2;
  }
}
app.component.html :
    "ShowHideDiv(div1)" name="DisplayDiv1" id="div1">Click To Show DIV 1
    "DisplayDiv1">This is DIV 1 !!!
"ShowHideDiv(div2)" name="DisplayDiv2" id="div2">Click To Show DIV 2
"DisplayDiv2">This is DIV 2 !!!