1 00:00:04,010 --> 00:00:09,440 Antes de começar em formulários orientados por modelo angular, 2 00:00:09,440 --> 00:00:15,165 precisamos encontrar uma maneira de sobrepor conteúdo em cima da visualização da web atual. 3 00:00:15,165 --> 00:00:21,935 The Bootstrap, temos modelos que nos permitem sobrepor conteúdo na parte superior da página Web. 4 00:00:21,935 --> 00:00:26,700 Com o uso de material Angular em nossa aplicação Angular, 5 00:00:26,700 --> 00:00:29,970 o material Angular fornece um componente chamado 6 00:00:29,970 --> 00:00:32,820 o Componente Diálogo Angular que permite que você 7 00:00:32,820 --> 00:00:35,865 sobreponha conteúdo sobre a visão atual. 8 00:00:35,865 --> 00:00:42,010 Vejamos como fazemos uso do Componente Diálogo neste exercício. 9 00:00:42,080 --> 00:00:45,470 Para começar este exercício, 10 00:00:45,470 --> 00:00:49,580 vamos ao nosso código e precisamos encontrar 11 00:00:49,580 --> 00:00:54,230 uma maneira de acionar o aplicativo para mostrar o diálogo. 12 00:00:54,230 --> 00:00:58,620 Então, para fazer isso, vamos adicionar um botão em nossa barra de ferramentas aqui. 13 00:00:58,620 --> 00:01:01,475 Então, indo para a barra de ferramentas direita no topo aqui, 14 00:01:01,475 --> 00:01:10,790 deixe-me adicionar em uma extensão com o espaçador flex classe que nós 15 00:01:10,790 --> 00:01:18,340 introduzimos em nosso arquivo SCSS 16 00:01:18,340 --> 00:01:21,650 para nossa aplicação. 17 00:01:21,650 --> 00:01:29,170 Então, nós introduzimos o espaçador flexor no arquivo styles.scss aqui, 18 00:01:29,170 --> 00:01:30,840 abaixo aqui. 19 00:01:30,840 --> 00:01:34,240 Então, essa é a classe que vamos usar com uma extensão aqui. 20 00:01:34,240 --> 00:01:37,035 Então, quando você aplica o espaçador flexor ao span, 21 00:01:37,035 --> 00:01:40,670 o que ele faz é que ele fornece espaço suficiente entre 22 00:01:40,670 --> 00:01:45,670 o elemento anterior e o elemento que se segue aqui. 23 00:01:45,670 --> 00:01:49,280 Então, ele vai empurrar qualquer elemento que segue a extensão para 24 00:01:49,280 --> 00:01:53,030 a borda mais direita da tela, tanto quanto possível. 25 00:01:53,030 --> 00:01:54,985 Então, aqui, depois disso, 26 00:01:54,985 --> 00:01:57,500 deixe-me adicionar um botão aqui. 27 00:01:57,500 --> 00:02:02,755 Então, este botão que quando clicado irá 28 00:02:02,755 --> 00:02:09,635 invocar uma função chamada OpenLogInforms. 29 00:02:09,635 --> 00:02:11,660 Então, como você percebe, 30 00:02:11,660 --> 00:02:17,865 então é aqui que vamos estar apoiando um formulário para a nossa aplicação. 31 00:02:17,865 --> 00:02:22,475 Vamos ver como o formulário é desenvolvido no próximo exercício. 32 00:02:22,475 --> 00:02:25,330 Agora, para isso, deixe-me adicionar em 33 00:02:25,330 --> 00:02:33,120 os ícones impressionantes da fonte correspondente. 34 00:02:33,120 --> 00:02:38,950 Então, Eu vou dizer fa fa-sign-in, 35 00:02:42,290 --> 00:02:50,010 e também adicionar em fa-lg a isso. 36 00:02:50,010 --> 00:02:52,875 Então, que irá adicionar em um ícone, 37 00:02:52,875 --> 00:02:54,645 o ícone de login aqui, 38 00:02:54,645 --> 00:02:55,880 e depois disso, 39 00:02:55,880 --> 00:02:58,690 vamos colocar a palavra login lá. 40 00:02:58,690 --> 00:03:05,980 Então, isso criará um botão chamado login na barra de ferramentas 41 00:03:05,980 --> 00:03:14,070 para a borda direita da tela juntamente com o ícone de login lá, 42 00:03:14,070 --> 00:03:16,960 que quando clicado, abrirá um formulário de login. 43 00:03:16,960 --> 00:03:22,670 Este formulário de login em si será hospedado dentro de um componente de diálogo material. 44 00:03:22,670 --> 00:03:26,204 Agora, para criar um componente de diálogo, obviamente, 45 00:03:26,204 --> 00:03:29,330 nós percebemos que isso vai ser um componente que 46 00:03:29,330 --> 00:03:32,270 precisa ser sobreposto em cima da visão atual lá. 47 00:03:32,270 --> 00:03:36,770 Então, precisamos de outro componente para ser adicionado à nossa aplicação. 48 00:03:36,770 --> 00:03:44,095 Então, vamos para o terminal e, em seguida, adicionar mais um componente em nossa aplicação. 49 00:03:44,095 --> 00:03:50,735 Indo para o terminal, deixe-me digitar ng g login do componente. 50 00:03:50,735 --> 00:03:55,725 Então, adicionamos um novo componente chamado como o componente de login para nosso aplicativo. 51 00:03:55,725 --> 00:03:57,725 Uma vez adicionado o componente de login, 52 00:03:57,725 --> 00:04:04,490 vamos configurar o componente de login para ser um componente de diálogo em nosso aplicativo. 53 00:04:04,490 --> 00:04:08,305 Então, para fazer isso, vamos voltar ao nosso código. 54 00:04:08,305 --> 00:04:10,215 Voltando ao nosso código, 55 00:04:10,215 --> 00:04:13,715 agora vemos que o componente de login está aberto. 56 00:04:13,715 --> 00:04:16,445 Deixe-me abrir o arquivo component.ts de login. 57 00:04:16,445 --> 00:04:18,935 Então, configure isso como 58 00:04:18,935 --> 00:04:24,485 um componente de diálogo no aplicativo Angular usando o componente de diálogo material. 59 00:04:24,485 --> 00:04:30,385 Deixe-me importar MatDialog. 60 00:04:30,385 --> 00:04:32,540 Então, este é o componente que suporta 61 00:04:32,540 --> 00:04:39,480 o componente de diálogo em material angular e, em seguida, também 62 00:04:39,600 --> 00:04:45,545 deixe-me importar MatDialogref e estes são importados 63 00:04:45,545 --> 00:04:52,420 de material angular aqui. 64 00:04:53,140 --> 00:05:03,750 Isso nos permitirá criar nosso componente e transformar isso em um componente de diálogo. 65 00:05:03,750 --> 00:05:10,030 Agora, depois disso, vamos em frente e, em seguida, configurar nosso arquivo template aqui. 66 00:05:10,030 --> 00:05:11,940 Então, indo para o arquivo de modelo aqui, 67 00:05:11,940 --> 00:05:16,300 Eu vou criar isso como dizendo mat-toolbar. 68 00:05:16,300 --> 00:05:22,330 Então, dentro deste diálogo também vou exibir uma barra de ferramentas. 69 00:05:25,350 --> 00:05:34,065 Para esta barra de ferramentas, vou dizer login direito no topo, depois disso, 70 00:05:34,065 --> 00:05:43,920 vamos introduzir a classe espaçador flex 71 00:05:43,920 --> 00:05:49,350 aqui e depois da classe espaçador flex, 72 00:05:49,350 --> 00:05:53,169 vamos adicionar em um botão 73 00:05:54,590 --> 00:06:04,385 com os atributos mat-button mat-dialog-close. 74 00:06:04,385 --> 00:06:09,850 Então, este mat-dialog-close é algo que os componentes de diálogo suportam para nós, 75 00:06:09,850 --> 00:06:13,490 este atributo que transforma este botão em 76 00:06:13,490 --> 00:06:18,255 um botão que quando clicado irá fechar este diálogo lá. 77 00:06:18,255 --> 00:06:26,740 Dentro deste botão, eu vou usar um tempo lá dentro. 78 00:06:26,740 --> 00:06:30,600 Então, isso vai exibi-lo como uma cruz na tela lá. 79 00:06:30,600 --> 00:06:33,110 Então, esse é o botão que vamos adicionar ao diálogo. 80 00:06:33,110 --> 00:06:38,855 Neste momento, nosso diálogo contém apenas isso em sua visão. 81 00:06:38,855 --> 00:06:44,870 Agora, para nos permitir incluir o componente de diálogo e fazer uso dele, 82 00:06:44,870 --> 00:06:47,350 é claro, precisamos ir para o módulo do aplicativo. 83 00:06:47,350 --> 00:06:49,030 No módulo do aplicativo, 84 00:06:49,030 --> 00:06:59,190 precisamos importar o módulo correspondente que suporta componente de diálogo. 85 00:06:59,190 --> 00:07:02,765 Então, vamos importar o MatDialogueModule 86 00:07:02,765 --> 00:07:10,200 da caixa de diálogo de material angular. 87 00:07:10,200 --> 00:07:20,300 Então, isso irá adicionar no módulo de diálogo em nossa aplicação e, em seguida, como você espera, 88 00:07:20,300 --> 00:07:25,070 eles terão que ir aqui para as importações e, em seguida, importar 89 00:07:25,070 --> 00:07:30,515 esse módulo de diálogo para nossa aplicação. 90 00:07:30,515 --> 00:07:32,735 Não só isso, agora, 91 00:07:32,735 --> 00:07:38,575 para transformar um componente Angular em um componente de diálogo, 92 00:07:38,575 --> 00:07:44,330 também precisamos declarar esse componente como um componente de entrada. 93 00:07:44,330 --> 00:07:49,310 Agora, lembre-se que nós adicionamos no componente de login para o nosso aplicativo e assim 94 00:07:49,310 --> 00:07:51,920 este componente de login já está adicionado lá e 95 00:07:51,920 --> 00:07:54,845 então também incluído nas declarações. 96 00:07:54,845 --> 00:08:02,255 Agora, se você quiser usar isso como uma sobreposição com o componente de diálogo de material, 97 00:08:02,255 --> 00:08:08,285 nós também precisamos incluir isso em outra propriedade chamada como 98 00:08:08,285 --> 00:08:17,460 componentes de entrada em nosso decorador de módulo ng aqui. 99 00:08:17,460 --> 00:08:19,715 Então, dentro deste componente de entrada, 100 00:08:19,715 --> 00:08:23,810 Eu também preciso incluir o componente de login aqui. 101 00:08:23,810 --> 00:08:26,000 Agora, isso nos permitirá usar 102 00:08:26,000 --> 00:08:30,235 o componente de login como uma sobreposição no topo da tela atual. 103 00:08:30,235 --> 00:08:35,330 Então, uma vez que tenhamos atualizado o componente de material Angular, 104 00:08:35,330 --> 00:08:39,370 agora, precisamos ser capazes de acionar esse componente de login. 105 00:08:39,370 --> 00:08:42,530 Agora, nós adicionamos no botão em 106 00:08:42,530 --> 00:08:47,240 o componente de cabeçalho e, em seguida, aqui temos esta função chamada formulário de login aberto. 107 00:08:47,240 --> 00:08:51,770 Então, isso precisa acionar a exibição do diálogo. 108 00:08:51,770 --> 00:08:56,350 Então, indo para o arquivo component.ts cabeçalho, 109 00:08:57,410 --> 00:09:04,350 para fazer uso do componente de diálogo mat no componente de cabeçalho, 110 00:09:04,350 --> 00:09:12,420 deixe-me importar MatDialog e, em seguida, 111 00:09:12,420 --> 00:09:22,605 MatDialogref de material angular. 112 00:09:22,605 --> 00:09:26,745 Dentro desta função, no construtor, 113 00:09:26,745 --> 00:09:28,575 deixe-me injetar 114 00:09:28,575 --> 00:09:37,365 o diálogo como MatDialog. 115 00:09:37,365 --> 00:09:43,680 Então, este é um serviço que nos permite abrir o componente como um componente de diálogo. 116 00:09:43,680 --> 00:09:45,615 Agora, como isso funciona? 117 00:09:45,615 --> 00:09:50,039 Então, aqui, precisamos adicionar nesta função chamada OpenLogInform, 118 00:09:52,090 --> 00:09:57,610 que quando invocado deve acionar a exibição do componente de diálogo. 119 00:09:57,610 --> 00:10:00,894 Então, para isso, diremos, esta caixa de diálogo, 120 00:10:00,894 --> 00:10:03,860 e esta caixa de diálogo suporta uma função chamada 121 00:10:03,860 --> 00:10:09,395 open para a qual fornecemos o componente que está indo para 122 00:10:09,395 --> 00:10:18,170 agir como a vista para o diálogo que está sobreposta no topo da visualização web atual. 123 00:10:18,170 --> 00:10:22,415 Então, aqui, como percebemos, 124 00:10:22,415 --> 00:10:28,475 declaramos o componente de login como o componente de diálogo. 125 00:10:28,475 --> 00:10:33,740 Então, vamos invocar o componente de login 126 00:10:33,740 --> 00:10:39,670 e, em seguida, também vamos especificar um tamanho para a caixa de diálogo. 127 00:10:39,670 --> 00:10:40,910 Se você quiser, 128 00:10:40,910 --> 00:10:44,089 você pode permitir que o tamanho padrão seja mostrado, 129 00:10:44,089 --> 00:10:47,610 mas você também pode configurar o tamanho explicitamente se quiser. 130 00:10:47,610 --> 00:10:48,620 Então, neste caso, 131 00:10:48,620 --> 00:10:57,960 deixe-me configurar a largura e a altura desta caixa de diálogo. 132 00:11:02,370 --> 00:11:05,960 Você não precisa necessariamente fazer isso, se você não fizer isso, 133 00:11:05,960 --> 00:11:11,990 então a caixa de diálogo será mostrada no tamanho padrão aqui. 134 00:11:11,990 --> 00:11:16,550 Então, com isso, meu componente de cabeçalho 135 00:11:16,550 --> 00:11:20,490 agora está configurado de tal forma que quando o formulário de login aberto é invocado, 136 00:11:20,490 --> 00:11:23,765 então isso nos permitirá abrir 137 00:11:23,765 --> 00:11:28,835 o componente de login como um diálogo e depois mostrá-lo no topo da string atual. 138 00:11:28,835 --> 00:11:32,090 Então, vamos salvar todas as alterações e, em seguida, ir e dar 139 00:11:32,090 --> 00:11:35,605 uma olhada em nosso aplicativo no navegador. 140 00:11:35,605 --> 00:11:40,310 Indo para o navegador, agora você verá que na borda direita da tela, 141 00:11:40,310 --> 00:11:43,010 temos outro novo botão aqui chamado o botão de login, 142 00:11:43,010 --> 00:11:47,085 e ver que o sinal na fonte incrível ícone adicionado a isso. 143 00:11:47,085 --> 00:11:49,560 Agora, quando você clicar no botão de login, 144 00:11:49,560 --> 00:11:53,995 você verá imediatamente um pop-up de diálogo na tela. 145 00:11:53,995 --> 00:11:58,610 Novamente, você pode descartar isso clicando em qualquer lugar na tela fora 146 00:11:58,610 --> 00:12:03,225 a caixa de diálogo ou você clicar nela e, em seguida, a caixa de diálogo aparece na tela. 147 00:12:03,225 --> 00:12:06,840 Então, do Bootstrap, você viu o modal no Bootstrap. 148 00:12:06,840 --> 00:12:10,485 Então, isso é exatamente como o modal do Bootstrap. 149 00:12:10,485 --> 00:12:13,645 Então, aqui, temos a caixa de diálogo que aparece na tela. 150 00:12:13,645 --> 00:12:17,720 Agora, temos espaço na caixa de diálogo onde podemos agora colocar 151 00:12:17,720 --> 00:12:22,790 no conteúdo que precisamos exibir quando esta caixa de diálogo é invocada. 152 00:12:22,790 --> 00:12:26,120 Observe também este botão de dispensar aqui. 153 00:12:26,120 --> 00:12:27,260 Então, quando você clica nisso, 154 00:12:27,260 --> 00:12:29,030 o diálogo também é descartado. 155 00:12:29,030 --> 00:12:31,535 Agora, quando você clica em qualquer lugar da caixa de diálogo, 156 00:12:31,535 --> 00:12:36,320 nada acontece, mas quando você clica neste botão, a caixa de diálogo é descartada. 157 00:12:36,320 --> 00:12:43,340 Então, é assim que o componente de diálogo do material Angular funciona em nossa aplicação. 158 00:12:43,340 --> 00:12:50,005 O próximo passo é adicionar o formulário de login a esta caixa de diálogo. 159 00:12:50,005 --> 00:12:53,365 Com isso, completamos este exercício. 160 00:12:53,365 --> 00:12:58,250 Neste exercício, você viu como podemos fazer uso da caixa de diálogo de material Angular para 161 00:12:58,250 --> 00:13:04,575 adicionar uma sobreposição à nossa aplicação e, em seguida, mostrá-la no topo da visão atual. 162 00:13:04,575 --> 00:13:07,610 Vamos adicionar no formulário a isso. 163 00:13:07,610 --> 00:13:13,770 Este é um bom momento para você fazer um commit do Git com as caixas de diálogo de mensagem.