Ionic 3: Criando uma Modal e recebendo os seus dados em uma página
Dando continuidade a minha série de artigos sobre Ionic 3, hoje irei demonstrar como criar uma modal e receber os seus dados de retorno.
Caso tenha interesse em ler os primeiros artigos dessa série, segue o link deles abaixo:
Para não criar um projeto do zero, eu irei utilizar o mesmo do artigo anterior. Abaixo você tem uma imagem demonstrando a estrutura desse projeto:
Com ele aberto no seu editor de textos, crie uma nova página dentro da sua solution. Para isso, execute o comando abaixo no seu terminal:
ionic generate page loginAgora atualize os arquivos home.ts, home.html e login.ts e login.html com os trechos de código abaixo:
Em home.ts será necessário adicionar a referencia para ModalController e injetar ela através do controller.
import { NavController, ModalController } from 'ionic-angular';constructor(public navCtrl: NavController, public modalCtrl: ModalController) { }
Agora crie um método chamado logIn e atualize ele com o trecho de código abaixo:
O código acima irá abrir a model nas linhas 2 e 3, em seguida nas linhas 5 à 7 ele irá ficar esperando essa modal fechar para receber os seus dados.
Em home.html eu adicionei um novo botão com evento click chamando a função logIn.
<button ion-button (click)="logIn()">Login</button>Em login.html eu criei um formulário simples com um botão recebendo os dados através das variáveis #mail e #password:
Por fim em login.ts eu adicionei uma referência para ViewController, injetei ele e passei os valores do formulário para função logIn retornar para página HomePage. Abaixo você tem um trecho de código demonstrando esse passo:
Agora execute o comando ionic serve para ver o resultado dos passos anteriores:
Em resumo, no exemplo anterior eu chamei a modal do login, em seguida preenchi os dados de acesso, cliquei em login e enviei eles para página HomePage. Esse foi um fluxo bem simples, mas deu para passar o fluxo de utilização de uma Modal ;)
Espero ter ajudado e até um próximo artigo pessoal ;)
