1 00:00:04,010 --> 00:00:09,440 Avant de commencer sur les formulaires pilotés par modèle angulaire, 2 00:00:09,440 --> 00:00:15,165 nous devons trouver un moyen de superposer le contenu au-dessus de la vue Web actuelle. 3 00:00:15,165 --> 00:00:21,935 The Bootstrap, nous avons des modèles qui nous permettent de superposer du contenu en haut de la page Web. 4 00:00:21,935 --> 00:00:26,700 Avec l'utilisation du matériau angulaire dans notre application angulaire, 5 00:00:26,700 --> 00:00:29,970 le matériau angulaire fournit un composant appelé 6 00:00:29,970 --> 00:00:35,865 le composant de dialogue angulaire qui vous permet de superposer du contenu au-dessus de la vue actuelle. 7 00:00:35,865 --> 00:00:42,010 Voyons comment nous utilisons le volet Dialogue dans cet exercice. 8 00:00:42,080 --> 00:00:45,470 Pour commencer cet exercice, 9 00:00:45,470 --> 00:00:49,580 allons à notre code et nous devons trouver 10 00:00:49,580 --> 00:00:54,230 un moyen de déclencher l'application pour montrer le dialogue. 11 00:00:54,230 --> 00:00:58,620 Donc, pour ce faire, ajoutons un bouton dans notre barre d'outils ici. 12 00:00:58,620 --> 00:01:01,475 Donc, en allant à la barre d'outils juste en haut ici, 13 00:01:01,475 --> 00:01:10,790 permettez-moi d'ajouter dans un intervalle avec l'espaceur flex de classe que nous 14 00:01:10,790 --> 00:01:18,340 avons introduit dans notre fichier SCSS 15 00:01:18,340 --> 00:01:21,650 pour notre application. 16 00:01:21,650 --> 00:01:29,170 Donc, nous avions introduit l'espaceur flexor dans le fichier styles.scss ici, 17 00:01:29,170 --> 00:01:30,840 juste en bas ici. 18 00:01:30,840 --> 00:01:34,240 Donc, c'est la classe que nous allons utiliser avec une portée ici. 19 00:01:34,240 --> 00:01:37,035 Donc, lorsque vous appliquez l'espaceur flexor à la travée, 20 00:01:37,035 --> 00:01:40,670 ce qu'il fait est qu'il fournit suffisamment d'espace entre 21 00:01:40,670 --> 00:01:45,670 l'élément précédent et l'élément qui suit ici. 22 00:01:45,670 --> 00:01:49,280 Donc, il poussera quel que soit l'élément qui suit la portée jusqu'à 23 00:01:49,280 --> 00:01:53,030 le bord le plus à droite de l'écran, autant que possible. 24 00:01:53,030 --> 00:01:54,985 Donc, ici, après cela, 25 00:01:54,985 --> 00:01:57,500 laissez-moi ajouter un bouton ici. 26 00:01:57,500 --> 00:02:09,635 Donc, ce bouton qui, lorsqu'il est cliqué, déclenchera une fonction appelée OpenLogInforms. 27 00:02:09,635 --> 00:02:11,660 Donc, comme vous le savez, 28 00:02:11,660 --> 00:02:17,865 donc c'est là que nous allons soutenir un formulaire pour notre demande. 29 00:02:17,865 --> 00:02:22,475 Nous allons voir comment le formulaire est développé dans le prochain exercice. 30 00:02:22,475 --> 00:02:25,330 Maintenant, pour cela, permettez-moi d'ajouter dans 31 00:02:25,330 --> 00:02:33,120 les polices correspondantes impressionnantes icônes. 32 00:02:33,120 --> 00:02:38,950 Donc, je vais dire fa fa-sign-in, 33 00:02:42,290 --> 00:02:50,010 et aussi ajouter fa-lg à cela. 34 00:02:50,010 --> 00:02:52,875 Donc, cela va ajouter dans une icône, 35 00:02:52,875 --> 00:02:54,645 l'icône de connexion ici, 36 00:02:54,645 --> 00:02:55,880 et ensuite après cela, 37 00:02:55,880 --> 00:02:58,690 nous allons mettre le mot login là-dedans. 38 00:02:58,690 --> 00:03:05,980 Donc, cela va créer un bouton appelé login dans la barre d'outils 39 00:03:05,980 --> 00:03:14,070 sur le bord droit de l'écran avec l'icône de connexion là-bas, 40 00:03:14,070 --> 00:03:16,960 qui, une fois cliqué, ouvrira un formulaire de connexion. 41 00:03:16,960 --> 00:03:22,670 Ce formulaire de connexion lui-même sera hébergé dans un composant de dialogue matériel. 42 00:03:22,670 --> 00:03:26,204 Maintenant, pour créer un composant de dialogue, évidemment, 43 00:03:26,204 --> 00:03:29,330 nous réalisons que cela va être un composant que 44 00:03:29,330 --> 00:03:32,270 doit être superposé au-dessus de la vue actuelle là-bas. 45 00:03:32,270 --> 00:03:36,770 Donc, nous avons besoin d'un autre composant à ajouter à notre application. 46 00:03:36,770 --> 00:03:44,095 Alors, allons au terminal et ajoutons un composant supplémentaire dans notre application. 47 00:03:44,095 --> 00:03:50,735 En allant au terminal, laissez-moi taper ng g component login. 48 00:03:50,735 --> 00:03:55,725 Donc, nous avons ajouté un nouveau composant appelé comme composant de connexion à notre application. 49 00:03:55,725 --> 00:03:57,725 Une fois le composant login ajouté, 50 00:03:57,725 --> 00:04:04,490 allons configurer le composant login pour qu'il soit un composant de dialogue dans notre application. 51 00:04:04,490 --> 00:04:08,305 Alors, pour ce faire, revenons à notre code. 52 00:04:08,305 --> 00:04:10,215 Pour revenir à notre code, 53 00:04:10,215 --> 00:04:13,715 nous voyons maintenant que le composant login est maintenant ouvert. 54 00:04:13,715 --> 00:04:16,445 Laissez-moi ouvrir le fichier login component.ts. 55 00:04:16,445 --> 00:04:18,935 Donc, configurez ceci comme 56 00:04:18,935 --> 00:04:24,485 un composant de dialogue dans l'application Angular en utilisant le composant de dialogue matériel. 57 00:04:24,485 --> 00:04:30,385 Laissez-moi importer MatDialog. 58 00:04:30,385 --> 00:04:32,540 Donc, c'est le composant qui prend en charge 59 00:04:32,540 --> 00:04:39,480 le composant de dialogue dans le matériau angulaire, puis aussi 60 00:04:39,600 --> 00:04:45,545 permettez-moi d'importer MatDialogRef et ceux-ci sont importés 61 00:04:45,545 --> 00:04:52,420 à partir de matériel angulaire ici. 62 00:04:53,140 --> 00:05:03,750 Cela nous permettra de créer notre composant et de le transformer en un élément de dialogue. 63 00:05:03,750 --> 00:05:10,030 Maintenant, après cela, allons de l'avant et puis configurer notre fichier modèle ici. 64 00:05:10,030 --> 00:05:11,940 Donc, en allant au fichier de modèle ici, 65 00:05:11,940 --> 00:05:16,300 Je vais créer ceci comme disant mat-toolbar. 66 00:05:16,300 --> 00:05:22,330 Donc, dans ce dialogue, je vais aussi afficher une barre d'outils. 67 00:05:25,350 --> 00:05:34,065 Pour cette barre d'outils, je dirai login en haut, après cela, 68 00:05:34,065 --> 00:05:43,920 nous allons introduire la classe d'espacement flex 69 00:05:43,920 --> 00:05:49,350 ici, puis après la classe d'espacement flex, 70 00:05:49,350 --> 00:05:53,169 nous ajouterons un bouton 71 00:05:54,590 --> 00:06:04,385 avec les attributs mat-button mat-dialog-close. 72 00:06:04,385 --> 00:06:09,850 Donc, ce mat-dialog-close est quelque chose que les composants de dialogue supportent pour nous, 73 00:06:09,850 --> 00:06:13,490 cet attribut qui transforme ce bouton en 74 00:06:13,490 --> 00:06:18,255 un bouton qui, une fois cliqué, fermera ce dialogue là. 75 00:06:18,255 --> 00:06:26,740 A l'intérieur de ce bouton, je vais utiliser une fois là-dedans. 76 00:06:26,740 --> 00:06:30,600 Donc, cela va l'afficher comme une croix sur l'écran là-bas. 77 00:06:30,600 --> 00:06:33,110 Donc, c'est le bouton que nous allons ajouter dans le dialogue. 78 00:06:33,110 --> 00:06:38,855 En ce moment, notre dialogue ne contient que cela à son avis. 79 00:06:38,855 --> 00:06:44,870 Maintenant, pour nous permettre d'inclure le composant dialogue et d'en faire usage, 80 00:06:44,870 --> 00:06:47,350 bien sûr, nous devons aller au module app. 81 00:06:47,350 --> 00:06:49,030 Dans le module app, 82 00:06:49,030 --> 00:06:59,190 nous devons importer le module correspondant qui prend en charge le composant de dialogue. 83 00:06:59,190 --> 00:07:02,765 Donc, nous allons importer le MatDialogueModule 84 00:07:02,765 --> 00:07:10,200 de la boîte de dialogue de matériau angulaire. 85 00:07:10,200 --> 00:07:20,300 Donc, cela va ajouter dans le module de dialogue dans notre application et puis comme vous vous y attendez, 86 00:07:20,300 --> 00:07:25,070 ils devront aller ici dans les importations et ensuite importer 87 00:07:25,070 --> 00:07:30,515 ce module de dialogue dans notre application. 88 00:07:30,515 --> 00:07:32,735 Non seulement ceci, maintenant, 89 00:07:32,735 --> 00:07:38,575 afin de transformer un composant Angular en composant de dialogue, 90 00:07:38,575 --> 00:07:44,330 nous devons également déclarer ce composant en tant que composant d'entrée. 91 00:07:44,330 --> 00:07:49,310 Maintenant, rappelez-vous que nous avons ajouté dans le composant login à notre application et donc 92 00:07:49,310 --> 00:07:51,920 ce composant login est déjà ajouté là et 93 00:07:51,920 --> 00:07:54,845 puis également inclus dans les déclarations. 94 00:07:54,845 --> 00:08:02,255 Maintenant, si vous voulez utiliser cela comme une superposition avec le composant de dialogue de matériaux, 95 00:08:02,255 --> 00:08:08,285 nous devons également inclure cela dans une autre propriété appelée comme composants d'entrée 96 00:08:08,285 --> 00:08:17,460 dans notre décorateur de module ng ici. 97 00:08:17,460 --> 00:08:19,715 Donc, à l'intérieur de ces composants d'entrée, 98 00:08:19,715 --> 00:08:23,810 J'ai aussi besoin d'inclure le composant login ici. 99 00:08:23,810 --> 00:08:26,000 Maintenant, cela nous permettra d'utiliser 100 00:08:26,000 --> 00:08:30,235 le composant login comme une superposition au-dessus de l'écran actuel. 101 00:08:30,235 --> 00:08:35,330 Donc, une fois que nous avons mis à jour le composant matériel Angular, 102 00:08:35,330 --> 00:08:39,370 maintenant, nous devons être en mesure de déclencher ce composant de connexion. 103 00:08:39,370 --> 00:08:42,530 Maintenant, nous avons ajouté dans le bouton 104 00:08:42,530 --> 00:08:47,240 le composant d'en-tête et puis ici nous avons cette fonction appelée open login form. 105 00:08:47,240 --> 00:08:51,770 Donc, cela doit déclencher la démonstration du dialogue. 106 00:08:51,770 --> 00:08:56,350 Donc, en allant dans le fichier d'en-tête component.ts, 107 00:08:57,410 --> 00:09:04,350 pour utiliser le composant de dialogue mat dans le composant d'en-tête, 108 00:09:04,350 --> 00:09:12,420 permettez-moi d'importer MatDialog, puis 109 00:09:12,420 --> 00:09:22,605 MatDialogRef à partir d'un matériau angulaire. 110 00:09:22,605 --> 00:09:26,745 A l'intérieur de cette fonction, dans le constructeur, 111 00:09:26,745 --> 00:09:28,575 permettez-moi d'injecter 112 00:09:28,575 --> 00:09:37,365 le dialogue en tant que matDialog. 113 00:09:37,365 --> 00:09:43,680 Donc, c'est un service qui nous permet d'ouvrir le composant en tant que composant de dialogue. 114 00:09:43,680 --> 00:09:45,615 Maintenant, comment cela fonctionne-t-il ? 115 00:09:45,615 --> 00:09:50,039 Donc, ici, nous devons ajouter dans cette fonction appelée OpenLogInform, 116 00:09:52,090 --> 00:09:57,610 qui, lorsqu'elle est appelée, devrait déclencher l'affichage du composant de dialogue. 117 00:09:57,610 --> 00:10:00,894 Donc, pour cela, nous dirons, cette boîte de dialogue, 118 00:10:00,894 --> 00:10:03,860 et cette boîte de dialogue supporte une fonction appelée 119 00:10:03,860 --> 00:10:18,170 open à laquelle nous fournissons le composant qui va servir de vue pour le dialogue qui est superposé au-dessus de la vue web actuelle. 120 00:10:18,170 --> 00:10:22,415 Donc, ici, comme nous le savons, 121 00:10:22,415 --> 00:10:28,475 nous avons déclaré le composant login comme composant de dialogue. 122 00:10:28,475 --> 00:10:33,740 Donc, nous allons appeler le composant de connexion 123 00:10:33,740 --> 00:10:39,670 et ensuite nous allons également spécifier une taille pour la boîte de dialogue. 124 00:10:39,670 --> 00:10:40,910 Si vous le souhaitez, 125 00:10:40,910 --> 00:10:44,089 vous pouvez autoriser l'affichage de la taille par défaut, 126 00:10:44,089 --> 00:10:47,610 mais vous pouvez également configurer explicitement la taille si vous le souhaitez. 127 00:10:47,610 --> 00:10:48,620 Donc, dans ce cas, 128 00:10:48,620 --> 00:10:57,960 permettez-moi de configurer la largeur et la hauteur de cette boîte de dialogue. 129 00:11:02,370 --> 00:11:05,960 Vous n'avez pas nécessairement à le faire, si vous ne le faites pas, 130 00:11:05,960 --> 00:11:11,990 alors le dialogue sera affiché dans la taille par défaut standard ici. 131 00:11:11,990 --> 00:11:16,550 Donc, avec cela, mon composant d'en-tête 132 00:11:16,550 --> 00:11:20,490 est maintenant configuré de telle sorte que lorsque le formulaire de connexion ouvert est invoqué, 133 00:11:20,490 --> 00:11:23,765 alors cela nous permettra d'ouvrir 134 00:11:23,765 --> 00:11:28,835 le composant de connexion en tant que dialogue, puis de le montrer au-dessus de la chaîne courante. 135 00:11:28,835 --> 00:11:35,605 Alors, sauvegardons toutes les modifications et allons ensuite jeter un coup d'oeil à notre application dans le navigateur. 136 00:11:35,605 --> 00:11:40,310 En allant dans le navigateur, vous verrez maintenant que sur le bord droit de l'écran, 137 00:11:40,310 --> 00:11:43,010 nous avons un autre nouveau bouton ici appelé le bouton de connexion, 138 00:11:43,010 --> 00:11:47,085 et voir cette icône de police géniale ajoutée à cela. 139 00:11:47,085 --> 00:11:49,560 Maintenant, lorsque vous cliquez sur le bouton de connexion, 140 00:11:49,560 --> 00:11:53,995 vous verrez immédiatement une fenêtre contextuelle à l'écran. 141 00:11:53,995 --> 00:11:58,610 Encore une fois, vous pouvez ignorer cela en cliquant n'importe où sur l'écran en dehors de 142 00:11:58,610 --> 00:12:03,225 la boîte de dialogue ou vous cliquez dessus, puis le dialogue apparaît à l'écran. 143 00:12:03,225 --> 00:12:06,840 Donc, à partir de Bootstrap, vous avez vu le modal dans Bootstrap. 144 00:12:06,840 --> 00:12:10,485 Donc, c'est exactement comme le modal de Bootstrap. 145 00:12:10,485 --> 00:12:13,645 Donc, ici, nous avons le dialogue qui apparaît à l'écran. 146 00:12:13,645 --> 00:12:17,720 Maintenant, nous avons de l'espace sur la boîte de dialogue où nous pouvons maintenant mettre 147 00:12:17,720 --> 00:12:22,790 dans le contenu que nous devons afficher lorsque cette boîte de dialogue est appelée. 148 00:12:22,790 --> 00:12:26,120 Notez également ce bouton de rejet ici. 149 00:12:26,120 --> 00:12:27,260 Donc, quand vous cliquez dessus, 150 00:12:27,260 --> 00:12:29,030 le dialogue est également rejeté. 151 00:12:29,030 --> 00:12:31,535 Maintenant, lorsque vous cliquez n'importe où dans la boîte de dialogue, 152 00:12:31,535 --> 00:12:36,320 rien ne se passe, mais lorsque vous cliquez sur ce bouton, la boîte de dialogue est rejetée. 153 00:12:36,320 --> 00:12:43,340 Donc, c'est ainsi que fonctionne le composant de dialogue de matériau angulaire dans notre application. 154 00:12:43,340 --> 00:12:50,005 L'étape suivante consiste à ajouter dans le formulaire de connexion à cette boîte de dialogue. 155 00:12:50,005 --> 00:12:53,365 Avec cela, nous terminons cet exercice. 156 00:12:53,365 --> 00:12:58,250 Dans cet exercice, vous avez vu comment nous pouvons utiliser la boîte de dialogue de matériau angulaire pour 157 00:12:58,250 --> 00:13:04,575 ajouter une superposition à notre application, puis la montrer au-dessus de la vue actuelle. 158 00:13:04,575 --> 00:13:07,610 Nous allons ajouter dans le formulaire à cela. 159 00:13:07,610 --> 00:13:13,770 C'est le bon moment pour vous de faire un commit Git avec les boîtes de dialogue de message.