Discussion :

[Antholife25]

Bonjour,

Je suis débutant sur ANGULAR.

J’expose mon problème :

J’ai un component affiché à l’écran avec 2 inputs et un bouton submit.

J’ai créé un second component, j’aimerai lorsque l’utilisateur clique sur le bouton, dis avec des mots simples, que toute la page sois vidée pour pouvoir afficher mon second component, comme si je «*supprimais*» le premier component avec les inputs et le bouton. Ou alors comme si le premier component se superposais sur le second, et lors de l’appui sur le bouton, hop il disparaît pour laisser le second en dessous.

J’ai cherché comment faire cela mais en vain. En JS pur il y avait une astuce. Mais ici en TS et avec Angular je ne trouve pas comment faire cela.

Si vous avez des solutions je vous remercie d’avance 🙏

[krakatoa]

rien de plus simple

Code html :

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

1
2
3
4
5
6
7
8
9
<ng-container *ngIf="mode">
mode 1
</ng-container>
 
<ng-container *ngIf="!mode">
mode 2
</ng-container>
 
<button (click)="mode = !mode">clic</button>

Code :

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

mode = false;

va falloir potasser les bases d angular !

[Antholife25]

Oui je débute et le ng-container est dans les parties avancées des cours.

J’englobe mon code HTML avec ces balises ? Pouvez vous m’expliquer un petit peu l’utilité de mode 1 et mode 2 ?

Dernière petite question, comment lancer également mon second component seulement à l’appuie sur le bouton ?

Merci beaucoup !

[dukoid]

Code html :

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

1
2
3
4
5
6
7
8
9
<ng-container *ngIf="mode">
tu met ce que tu veux ici 1
</ng-container>
 
<ng-container *ngIf="!mode">
tu met ce que tu veux ici 2
</ng-container>
 
<button (click)="mode = !mode">clic</button>

au lieu de ng-container tu peux utiliser n'importe quelle balise : div, span, p

Code html :

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

1
2
3
4
5
6
7
8
9
<span *ngIf="mode">
tu met ce que tu veux ici 1
</span>
 
<ng-container *ngIf="!mode">
tu met ce que tu veux ici 2
</ng-container>
 
<button (click)="mode = !mode">clic</button>

Code html :

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

<mon-composant *ngIf="mode = 10"></mon-composant>

[Antholife25]

Parfait merci à vous deux, comme j'avais un formulaire avec un bouton lancant une fonction j'ai initialisé mode dans le constructeur, puis modifié depuis ma fonction, j'aimerai maintenant afficher/lancer seulement le deuxième composant quand j'appuis sur ce bouton, Comment puis-je faire ? Car sinon mon second component ce met en dessous du premier (ce qui est logique), j'aimerai seulement le voir apparaître après l'appuis sur le bouton ? Je suis vraiment désolé, Angular n'est pas simple à apprendre.

Je pourrai très bien passer en store la valeur de mode au second component à l'inverse du premier pour qu'il s'affiche qu'après, mais cela me semble plus compliqué et je ne sais pas si c'est une bonne pratique.

[krakatoa]

Code html :

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

1
2
<mon-composant *ngIf="mode"></mon-composant>
<button (click)="mode =true">clic</button>

Code html :

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

mode = false;

[Antholife25]

Effectivement je pensais à ça, mais je n'étais pas sur la façon de faire, (ah les conventions et les bonnes façon de faire..), je vais continuer mon apprentissage avec angular. Je reviendrai pour d'autre question au besoin.

Merci à vous !

[dukoid]

bonne pratique :

(1)
il faut éviter d'écrire du code dans la vue

Code html :

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

1
2
3
4
<button (click)="mode =true">clic</button>
//
//   ->   mode = true    (à éviter) 
//

par contre on y met une fonction et c'est cette fonction qui sera chargé d'executer le code :

Code html :

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

1
2
<mon-composant *ngIf="mode"></mon-composant>
<button (click)="onMode()">clic</button>

Code :

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

1
2
3
4
5
mode = false;
 
onMode() {
  this.mode = true;
}

(2) variante :

Code html :

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

1
2
<mon-composant *ngIf="mode"></mon-composant>
<button (click)="onMode(true)">clic</button>

Code :

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

1
2
3
4
5
displayInscription = false;
 
onMode(value: boolean) {
  this.displayInscription = value;
}

comme ça on peut utilise la fonction avec : onMode(false) si besoin

(3)
le nommage, t*un bon nommage permet de se retrouver dans le code
mode ne veut rien dire parceque on ne sait pas dans quel but tu affiche ou pas le composant et quel composant :

par exemple si tu voulais afficher ou pas un formulaire d'inscription :

Code html :

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

<button (click)="onDisplayInscription(true)">clic</button>

DisplayInscription() -> on comprend l'utilité de la fonction juste avec le nommage
à savoir dans la vue et uniquement pour un évènement (le click ou autre), c'est une convention, on met toujours "on": onQuelquechose()


comme ça quand tu va dans ton composant.ts et que tu vois ça :

Code :

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

1
2
3
4
onDisplayInscription(value: boolean) {
  ...
  ...
}

tu constate que ça commence par on et tu sais que c'est lié à un évènement de la vue !

[Antholife25]

Oui c'est ce que j'ai fais Je te remercie de me le dire au cas où c'est top !

Code :

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

1
2
<ng-container *ngIf="visible">
  <form class="form-input" [formGroup]="formInput" (ngSubmit)="onSubmit()">

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
onSubmit(): void {
 
    if (this.firstPlayer?.value && this.secondPlayer?.value) {
      // change to the other page
      // console.log(this.firstPlayer?.value + " " + this.secondPlayer?.value)
      this.addUser(1, this.firstPlayer.value);
      this.addUser(2, this.secondPlayer.value);
 
      this.users$.subscribe((data: any) => {
        console.log(data[0].name);
      });
      this.visible = false ;
    }
  }