Discussion :

[Tamzoro]

Bonjour,

J'ai en fait 4 boutons (Element 1, Element 2, Element 3, Element 4) lorsque je clique sur "Element 1" par exemple. J'affiche correctement le contenue qui est masqué.

Par contre, les 3 autres éléments affichent les contenues des autres éléments qui sont masqués, le truc c'es que je n'ai pas demandé cette action.

Je suis obligé de créer une méthode pour chaque bouton, est-ce correcte de faire cela?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<button (click)="showMyContainer = !showMyContainer">Element 1</button>
 
<div *ngIf="showMyContainer">your code</div>
 
<br /><br />
 
<button (click)="showMyContainer = !showMyContainer">Element 2</button>
 
<div *ngIf="showMyContainer">your code</div>
 
<br /><br />
 
<button (click)="showMyContainer = !showMyContainer">Element 3</button>
 
<div *ngIf="showMyContainer">your code</div>
 
<br /><br />
 
<button (click)="showMyContainer = !showMyContainer">Element 4</button>
 
<div *ngIf="showMyContainer">your code</div>

TS

Code typescript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
import { Component } from '@angular/core';
 
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular Toggle Show Hide';
  showMyContainer: boolean = false;
}

[jeffray03]

salut,
soit tu crees une fontion ou bien tu crées 3 variables differentes.

Eric

[Jacques Beauregard]

Bonjour,

Par contre, les 3 autres éléments affichent les contenues des autres éléments qui sont masqués, le truc c'es que je n'ai pas demandé cette action.

Tu utilises la même variable pour tes 4 boutons. donc au click : ta variable va évoluer et tu vas rentrer dans chacun des 4 ngIf si ta variable vaut "true".