Ionic 3: Criando uma Modal e recebendo os seus dados em uma página


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:

Estrutura básica projeto anterior

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 login

Agora 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:

Login com modal Ionic 3

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 😉

Compartilhe:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Table of Contents

Postagens Relacionadas

iphone12

Apple iPhone 12 Pro Max

Apple iPhone 12 Pro Max  CPU Apple A14 Bionic  RAM 6 GB  Armazenamento 512 GB  Display 6.7 XDR OLED  Câmera 12 Mp + 12 Mp
RockBottomRiser

Rock Bottom Riser

Rock Bottom Riser 01/03/2021(US) – Documentário – 1h 10min –   Nota: 0/10   Sinopse     Elenco Nainoa Thompson Como – master navigator Moses
SaferatHome

Safer at Home

Safer at Home 26/02/2021(US) – Filmes – 0h 0min –   Nota: 0/10   Sinopse     Elenco Mais informações Título Original Safer at Home
SouLunaOUltimoShow

Sou Luna: O Último Show

O elenco de “Sou Luna” se apresenta ao vivo pela última vez no mítico estádio Luna Park em Buenos Aires. Vamos acompanhá-los na intimidade dos bastidores e r…