Vider une page

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 🙏

rien de plus simple

Code:

---

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:

---

mode = false;

---

va falloir potasser les bases d angular ! ;)

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 !

Code:

---

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:

---

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:

---

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

---

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.

Code:

---

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

---

Code:

---

mode = false;

---

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 !

bonne pratique :

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

Code:

---

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:

---

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

---

Code:

---

1 2 3 4 5

mode = false;   onMode() { this.mode = true; }

---

(2) variante :

Code:

---

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

---

Code:

---

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:

---

<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:

---

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 !

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

Code:

---

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

---

Code:

---

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 ; } }

---