Antes de começar em formulários orientados por modelo angular,
precisamos encontrar uma maneira de sobrepor conteúdo em cima da visualização da web atual.
The Bootstrap, temos modelos que nos permitem sobrepor conteúdo na parte superior da página Web.
Com o uso de material Angular em nossa aplicação Angular,
o material Angular fornece um componente chamado
o Componente Diálogo Angular que permite que você
sobreponha conteúdo sobre a visão atual.
Vejamos como fazemos uso do Componente Diálogo neste exercício.
Para começar este exercício,
vamos ao nosso código e precisamos encontrar
uma maneira de acionar o aplicativo para mostrar o diálogo.
Então, para fazer isso, vamos adicionar um botão em nossa barra de ferramentas aqui.
Então, indo para a barra de ferramentas direita no topo aqui,
deixe-me adicionar em uma extensão com o espaçador flex classe que nós
introduzimos em nosso arquivo SCSS
para nossa aplicação.
Então, nós introduzimos o espaçador flexor no arquivo styles.scss aqui,
abaixo aqui.
Então, essa é a classe que vamos usar com uma extensão aqui.
Então, quando você aplica o espaçador flexor ao span,
o que ele faz é que ele fornece espaço suficiente entre
o elemento anterior e o elemento que se segue aqui.
Então, ele vai empurrar qualquer elemento que segue a extensão para
a borda mais direita da tela, tanto quanto possível.
Então, aqui, depois disso,
deixe-me adicionar um botão aqui.
Então, este botão que quando clicado irá
invocar uma função chamada OpenLogInforms.
Então, como você percebe,
então é aqui que vamos estar apoiando um formulário para a nossa aplicação.
Vamos ver como o formulário é desenvolvido no próximo exercício.
Agora, para isso, deixe-me adicionar em
os ícones impressionantes da fonte correspondente.
Então, Eu vou dizer fa fa-sign-in,
e também adicionar em fa-lg a isso.
Então, que irá adicionar em um ícone,
o ícone de login aqui,
e depois disso,
vamos colocar a palavra login lá.
Então, isso criará um botão chamado login na barra de ferramentas
para a borda direita da tela juntamente com o ícone de login lá,
que quando clicado, abrirá um formulário de login.
Este formulário de login em si será hospedado dentro de um componente de diálogo material.
Agora, para criar um componente de diálogo, obviamente,
nós percebemos que isso vai ser um componente que
precisa ser sobreposto em cima da visão atual lá.
Então, precisamos de outro componente para ser adicionado à nossa aplicação.
Então, vamos para o terminal e, em seguida, adicionar mais um componente em nossa aplicação.
Indo para o terminal, deixe-me digitar ng g login do componente.
Então, adicionamos um novo componente chamado como o componente de login para nosso aplicativo.
Uma vez adicionado o componente de login,
vamos configurar o componente de login para ser um componente de diálogo em nosso aplicativo.
Então, para fazer isso, vamos voltar ao nosso código.
Voltando ao nosso código,
agora vemos que o componente de login está aberto.
Deixe-me abrir o arquivo component.ts de login.
Então, configure isso como
um componente de diálogo no aplicativo Angular usando o componente de diálogo material.
Deixe-me importar MatDialog.
Então, este é o componente que suporta
o componente de diálogo em material angular e, em seguida, também
deixe-me importar MatDialogref e estes são importados
de material angular aqui.
Isso nos permitirá criar nosso componente e transformar isso em um componente de diálogo.
Agora, depois disso, vamos em frente e, em seguida, configurar nosso arquivo template aqui.
Então, indo para o arquivo de modelo aqui,
Eu vou criar isso como dizendo mat-toolbar.
Então, dentro deste diálogo também vou exibir uma barra de ferramentas.
Para esta barra de ferramentas, vou dizer login direito no topo, depois disso,
vamos introduzir a classe espaçador flex
aqui e depois da classe espaçador flex,
vamos adicionar em um botão
com os atributos mat-button mat-dialog-close.
Então, este mat-dialog-close é algo que os componentes de diálogo suportam para nós,
este atributo que transforma este botão em
um botão que quando clicado irá fechar este diálogo lá.
Dentro deste botão, eu vou usar um tempo lá dentro.
Então, isso vai exibi-lo como uma cruz na tela lá.
Então, esse é o botão que vamos adicionar ao diálogo.
Neste momento, nosso diálogo contém apenas isso em sua visão.
Agora, para nos permitir incluir o componente de diálogo e fazer uso dele,
é claro, precisamos ir para o módulo do aplicativo.
No módulo do aplicativo,
precisamos importar o módulo correspondente que suporta componente de diálogo.
Então, vamos importar o MatDialogueModule
da caixa de diálogo de material angular.
Então, isso irá adicionar no módulo de diálogo em nossa aplicação e, em seguida, como você espera,
eles terão que ir aqui para as importações e, em seguida, importar
esse módulo de diálogo para nossa aplicação.
Não só isso, agora,
para transformar um componente Angular em um componente de diálogo,
também precisamos declarar esse componente como um componente de entrada.
Agora, lembre-se que nós adicionamos no componente de login para o nosso aplicativo e assim
este componente de login já está adicionado lá e
então também incluído nas declarações.
Agora, se você quiser usar isso como uma sobreposição com o componente de diálogo de material,
nós também precisamos incluir isso em outra propriedade chamada como
componentes de entrada em nosso decorador de módulo ng aqui.
Então, dentro deste componente de entrada,
Eu também preciso incluir o componente de login aqui.
Agora, isso nos permitirá usar
o componente de login como uma sobreposição no topo da tela atual.
Então, uma vez que tenhamos atualizado o componente de material Angular,
agora, precisamos ser capazes de acionar esse componente de login.
Agora, nós adicionamos no botão em
o componente de cabeçalho e, em seguida, aqui temos esta função chamada formulário de login aberto.
Então, isso precisa acionar a exibição do diálogo.
Então, indo para o arquivo component.ts cabeçalho,
para fazer uso do componente de diálogo mat no componente de cabeçalho,
deixe-me importar MatDialog e, em seguida,
MatDialogref de material angular.
Dentro desta função, no construtor,
deixe-me injetar
o diálogo como MatDialog.
Então, este é um serviço que nos permite abrir o componente como um componente de diálogo.
Agora, como isso funciona?
Então, aqui, precisamos adicionar nesta função chamada OpenLogInform,
que quando invocado deve acionar a exibição do componente de diálogo.
Então, para isso, diremos, esta caixa de diálogo,
e esta caixa de diálogo suporta uma função chamada
open para a qual fornecemos o componente que está indo para
agir como a vista para o diálogo que está sobreposta no topo da visualização web atual.
Então, aqui, como percebemos,
declaramos o componente de login como o componente de diálogo.
Então, vamos invocar o componente de login
e, em seguida, também vamos especificar um tamanho para a caixa de diálogo.
Se você quiser,
você pode permitir que o tamanho padrão seja mostrado,
mas você também pode configurar o tamanho explicitamente se quiser.
Então, neste caso,
deixe-me configurar a largura e a altura desta caixa de diálogo.
Você não precisa necessariamente fazer isso, se você não fizer isso,
então a caixa de diálogo será mostrada no tamanho padrão aqui.
Então, com isso, meu componente de cabeçalho
agora está configurado de tal forma que quando o formulário de login aberto é invocado,
então isso nos permitirá abrir
o componente de login como um diálogo e depois mostrá-lo no topo da string atual.
Então, vamos salvar todas as alterações e, em seguida, ir e dar
uma olhada em nosso aplicativo no navegador.
Indo para o navegador, agora você verá que na borda direita da tela,
temos outro novo botão aqui chamado o botão de login,
e ver que o sinal na fonte incrível ícone adicionado a isso.
Agora, quando você clicar no botão de login,
você verá imediatamente um pop-up de diálogo na tela.
Novamente, você pode descartar isso clicando em qualquer lugar na tela fora
a caixa de diálogo ou você clicar nela e, em seguida, a caixa de diálogo aparece na tela.
Então, do Bootstrap, você viu o modal no Bootstrap.
Então, isso é exatamente como o modal do Bootstrap.
Então, aqui, temos a caixa de diálogo que aparece na tela.
Agora, temos espaço na caixa de diálogo onde podemos agora colocar
no conteúdo que precisamos exibir quando esta caixa de diálogo é invocada.
Observe também este botão de dispensar aqui.
Então, quando você clica nisso,
o diálogo também é descartado.
Agora, quando você clica em qualquer lugar da caixa de diálogo,
nada acontece, mas quando você clica neste botão, a caixa de diálogo é descartada.
Então, é assim que o componente de diálogo do material Angular funciona em nossa aplicação.
O próximo passo é adicionar o formulário de login a esta caixa de diálogo.
Com isso, completamos este exercício.
Neste exercício, você viu como podemos fazer uso da caixa de diálogo de material Angular para
adicionar uma sobreposição à nossa aplicação e, em seguida, mostrá-la no topo da visão atual.
Vamos adicionar no formulário a isso.
Este é um bom momento para você fazer um commit do Git com as caixas de diálogo de mensagem.