Discussion :

[olivier252]

Bonjour,

J'ai dans un composant parent 2 boutons btn1 et btn2 qui appellent un même composant enfant qui contient respectivement dans son html :

Code html :

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

1
2
3
-<app-composantA></app-composantA>
-<app-composantB></app-composantB>
-<app-composantC></app-composantC>

Losrque je clique surbtn1, j'aimerais afficher :

Code html :

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

1
2
-<app-composantA></app-composantA>
-<app-composantB></app-composantB>

quand je clique sur btn2, je souhaiterais afficher seulement

Code html :

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

-<app-composantC></app-composantC>

J'ai pensais faire ça avec la directive ngIf et un boolean (test ds l'exemple) passé en Input()

Code html :

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

1
2
3
4
5
6
<app-composantA *ngIf="!test"></appcomposantA>
<app-composantB *ngIf="!test"></<app-composantB>
<app-composantC *ngIf="test"></app-composantC>
 
<button label="btn1" (click)="test= false">btn1</button>
<button label="btn2"  (click)="test= true">btn2</button>

est ce que ça vous parait correct ? vaudrait-il mieux utiliser hidden ? merci

[dukoid]

Faut partir de ce principe: Quand on fait de l'angular, on exploite sa technologie.
ngIf est fait exprès pour répondre à ce besoin


** pour info: Comment fonctionne Angular ?
Angular travaille sur le DOM (à travers un DOM virtuel)
Il insère des bouts de DOM, il en supprime.

si je prends cet exemple:

Code html :

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

<app-composantC *ngIf="test"></app-composantC>

si test == true alors Angular insère le DOM qui représente le composant dans le DOM général de la page. le composant apparait !
si faux alors Angular ne fait rien! donc à l'écran tu n'as rien !


** pour info, qu'est ce que le DOM ?
1ere couche: tu as les balises html
c'est une représentation simple, le navigateur en réalité ne le comprends pas.

Le navigateur va convertir les balises html en classes objets. Ainsi une balise HTML <....> devient un élément HTML sous la forme d'un objet avec ses propriétés et ses fonctions.
D'ailleurs la plupart des instructions des balises HTML ressemblent pas mal à son équivalent DOM. par exemple, "value" d'une balise <input , on le retrouve dans le DOM comme propriété avec le même nom: value de l'élément input en objet
C'est ça le DOM et c'est ce qu'exécute le navigateur !

** d'ailleurs, si tu vas plus loin dans Angular
sache qu'on peux manipuler directement le DOM. En modifiant ses éléments en objet, modifier des propriétés de ce que l'on veut.. le css (color, background...) et accéder à ses fonctions.. les évènements de click, ou mousenter etc....

[olivier252]

ok merci pour ta réponse complète, du coup je pars sur du ngIf alors