Avant de commencer sur les formulaires pilotés par modèle angulaire,
nous devons trouver un moyen de superposer le contenu au-dessus de la vue Web actuelle.
The Bootstrap, nous avons des modèles qui nous permettent de superposer du contenu en haut de la page Web.
Avec l'utilisation du matériau angulaire dans notre application angulaire,
le matériau angulaire fournit un composant appelé
le composant de dialogue angulaire qui vous permet de superposer du contenu au-dessus de la vue actuelle.
Voyons comment nous utilisons le volet Dialogue dans cet exercice.
Pour commencer cet exercice,
allons à notre code et nous devons trouver
un moyen de déclencher l'application pour montrer le dialogue.
Donc, pour ce faire, ajoutons un bouton dans notre barre d'outils ici.
Donc, en allant à la barre d'outils juste en haut ici,
permettez-moi d'ajouter dans un intervalle avec l'espaceur flex de classe que nous
avons introduit dans notre fichier SCSS
pour notre application.
Donc, nous avions introduit l'espaceur flexor dans le fichier styles.scss ici,
juste en bas ici.
Donc, c'est la classe que nous allons utiliser avec une portée ici.
Donc, lorsque vous appliquez l'espaceur flexor à la travée,
ce qu'il fait est qu'il fournit suffisamment d'espace entre
l'élément précédent et l'élément qui suit ici.
Donc, il poussera quel que soit l'élément qui suit la portée jusqu'à
le bord le plus à droite de l'écran, autant que possible.
Donc, ici, après cela,
laissez-moi ajouter un bouton ici.
Donc, ce bouton qui, lorsqu'il est cliqué, déclenchera une fonction appelée OpenLogInforms.
Donc, comme vous le savez,
donc c'est là que nous allons soutenir un formulaire pour notre demande.
Nous allons voir comment le formulaire est développé dans le prochain exercice.
Maintenant, pour cela, permettez-moi d'ajouter dans
les polices correspondantes impressionnantes icônes.
Donc, je vais dire fa fa-sign-in,
et aussi ajouter fa-lg à cela.
Donc, cela va ajouter dans une icône,
l'icône de connexion ici,
et ensuite après cela,
nous allons mettre le mot login là-dedans.
Donc, cela va créer un bouton appelé login dans la barre d'outils
sur le bord droit de l'écran avec l'icône de connexion là-bas,
qui, une fois cliqué, ouvrira un formulaire de connexion.
Ce formulaire de connexion lui-même sera hébergé dans un composant de dialogue matériel.
Maintenant, pour créer un composant de dialogue, évidemment,
nous réalisons que cela va être un composant que
doit être superposé au-dessus de la vue actuelle là-bas.
Donc, nous avons besoin d'un autre composant à ajouter à notre application.
Alors, allons au terminal et ajoutons un composant supplémentaire dans notre application.
En allant au terminal, laissez-moi taper ng g component login.
Donc, nous avons ajouté un nouveau composant appelé comme composant de connexion à notre application.
Une fois le composant login ajouté,
allons configurer le composant login pour qu'il soit un composant de dialogue dans notre application.
Alors, pour ce faire, revenons à notre code.
Pour revenir à notre code,
nous voyons maintenant que le composant login est maintenant ouvert.
Laissez-moi ouvrir le fichier login component.ts.
Donc, configurez ceci comme
un composant de dialogue dans l'application Angular en utilisant le composant de dialogue matériel.
Laissez-moi importer MatDialog.
Donc, c'est le composant qui prend en charge
le composant de dialogue dans le matériau angulaire, puis aussi
permettez-moi d'importer MatDialogRef et ceux-ci sont importés
à partir de matériel angulaire ici.
Cela nous permettra de créer notre composant et de le transformer en un élément de dialogue.
Maintenant, après cela, allons de l'avant et puis configurer notre fichier modèle ici.
Donc, en allant au fichier de modèle ici,
Je vais créer ceci comme disant mat-toolbar.
Donc, dans ce dialogue, je vais aussi afficher une barre d'outils.
Pour cette barre d'outils, je dirai login en haut, après cela,
nous allons introduire la classe d'espacement flex
ici, puis après la classe d'espacement flex,
nous ajouterons un bouton
avec les attributs mat-button mat-dialog-close.
Donc, ce mat-dialog-close est quelque chose que les composants de dialogue supportent pour nous,
cet attribut qui transforme ce bouton en
un bouton qui, une fois cliqué, fermera ce dialogue là.
A l'intérieur de ce bouton, je vais utiliser une fois là-dedans.
Donc, cela va l'afficher comme une croix sur l'écran là-bas.
Donc, c'est le bouton que nous allons ajouter dans le dialogue.
En ce moment, notre dialogue ne contient que cela à son avis.
Maintenant, pour nous permettre d'inclure le composant dialogue et d'en faire usage,
bien sûr, nous devons aller au module app.
Dans le module app,
nous devons importer le module correspondant qui prend en charge le composant de dialogue.
Donc, nous allons importer le MatDialogueModule
de la boîte de dialogue de matériau angulaire.
Donc, cela va ajouter dans le module de dialogue dans notre application et puis comme vous vous y attendez,
ils devront aller ici dans les importations et ensuite importer
ce module de dialogue dans notre application.
Non seulement ceci, maintenant,
afin de transformer un composant Angular en composant de dialogue,
nous devons également déclarer ce composant en tant que composant d'entrée.
Maintenant, rappelez-vous que nous avons ajouté dans le composant login à notre application et donc
ce composant login est déjà ajouté là et
puis également inclus dans les déclarations.
Maintenant, si vous voulez utiliser cela comme une superposition avec le composant de dialogue de matériaux,
nous devons également inclure cela dans une autre propriété appelée comme composants d'entrée
dans notre décorateur de module ng ici.
Donc, à l'intérieur de ces composants d'entrée,
J'ai aussi besoin d'inclure le composant login ici.
Maintenant, cela nous permettra d'utiliser
le composant login comme une superposition au-dessus de l'écran actuel.
Donc, une fois que nous avons mis à jour le composant matériel Angular,
maintenant, nous devons être en mesure de déclencher ce composant de connexion.
Maintenant, nous avons ajouté dans le bouton
le composant d'en-tête et puis ici nous avons cette fonction appelée open login form.
Donc, cela doit déclencher la démonstration du dialogue.
Donc, en allant dans le fichier d'en-tête component.ts,
pour utiliser le composant de dialogue mat dans le composant d'en-tête,
permettez-moi d'importer MatDialog, puis
MatDialogRef à partir d'un matériau angulaire.
A l'intérieur de cette fonction, dans le constructeur,
permettez-moi d'injecter
le dialogue en tant que matDialog.
Donc, c'est un service qui nous permet d'ouvrir le composant en tant que composant de dialogue.
Maintenant, comment cela fonctionne-t-il ?
Donc, ici, nous devons ajouter dans cette fonction appelée OpenLogInform,
qui, lorsqu'elle est appelée, devrait déclencher l'affichage du composant de dialogue.
Donc, pour cela, nous dirons, cette boîte de dialogue,
et cette boîte de dialogue supporte une fonction appelée
open à laquelle nous fournissons le composant qui va servir de vue pour le dialogue qui est superposé au-dessus de la vue web actuelle.
Donc, ici, comme nous le savons,
nous avons déclaré le composant login comme composant de dialogue.
Donc, nous allons appeler le composant de connexion
et ensuite nous allons également spécifier une taille pour la boîte de dialogue.
Si vous le souhaitez,
vous pouvez autoriser l'affichage de la taille par défaut,
mais vous pouvez également configurer explicitement la taille si vous le souhaitez.
Donc, dans ce cas,
permettez-moi de configurer la largeur et la hauteur de cette boîte de dialogue.
Vous n'avez pas nécessairement à le faire, si vous ne le faites pas,
alors le dialogue sera affiché dans la taille par défaut standard ici.
Donc, avec cela, mon composant d'en-tête
est maintenant configuré de telle sorte que lorsque le formulaire de connexion ouvert est invoqué,
alors cela nous permettra d'ouvrir
le composant de connexion en tant que dialogue, puis de le montrer au-dessus de la chaîne courante.
Alors, sauvegardons toutes les modifications et allons ensuite jeter un coup d'oeil à notre application dans le navigateur.
En allant dans le navigateur, vous verrez maintenant que sur le bord droit de l'écran,
nous avons un autre nouveau bouton ici appelé le bouton de connexion,
et voir cette icône de police géniale ajoutée à cela.
Maintenant, lorsque vous cliquez sur le bouton de connexion,
vous verrez immédiatement une fenêtre contextuelle à l'écran.
Encore une fois, vous pouvez ignorer cela en cliquant n'importe où sur l'écran en dehors de
la boîte de dialogue ou vous cliquez dessus, puis le dialogue apparaît à l'écran.
Donc, à partir de Bootstrap, vous avez vu le modal dans Bootstrap.
Donc, c'est exactement comme le modal de Bootstrap.
Donc, ici, nous avons le dialogue qui apparaît à l'écran.
Maintenant, nous avons de l'espace sur la boîte de dialogue où nous pouvons maintenant mettre
dans le contenu que nous devons afficher lorsque cette boîte de dialogue est appelée.
Notez également ce bouton de rejet ici.
Donc, quand vous cliquez dessus,
le dialogue est également rejeté.
Maintenant, lorsque vous cliquez n'importe où dans la boîte de dialogue,
rien ne se passe, mais lorsque vous cliquez sur ce bouton, la boîte de dialogue est rejetée.
Donc, c'est ainsi que fonctionne le composant de dialogue de matériau angulaire dans notre application.
L'étape suivante consiste à ajouter dans le formulaire de connexion à cette boîte de dialogue.
Avec cela, nous terminons cet exercice.
Dans cet exercice, vous avez vu comment nous pouvons utiliser la boîte de dialogue de matériau angulaire pour
ajouter une superposition à notre application, puis la montrer au-dessus de la vue actuelle.
Nous allons ajouter dans le formulaire à cela.
C'est le bon moment pour vous de faire un commit Git avec les boîtes de dialogue de message.