Ion-Alert

 

    Senhoras e senhores continuamos nossa aventura para conhecer os componentes visuais do Framework Ionic, lembrando que para os exemplos utilizamos o modelo blank, pelo simples fato de ser o modelo em branco, sem nada, se você não entendeu sugiro a leitura deste artigo, muito bem vamos ao que interessa!

ion-alert

    O ion-alert é a clássica "telinha" central que nos informa alguma coisa, por exemplo: "Deseja realmente excluir?"; "Informação salva com sucesso!". De forma básica é isto, mas há variações em que é possível obter informações através desta tela. Entendendo qual a dinâmica de funcionamento deste componente podemos ver como implementá-lo.

    A implementação dele é muito parecida com o ion-actionsheet, vamos trabalhar com os arquivo HTML e TS (Typescript), bom, claro que você já deu o famoso "ionic serve", e com o projeto aberto vamos remover tudo o que está dentro do ion-content, como na imagem abaixo:

    E vamos criar um botão simples, que será nosso gatilho de chamada do ion-alert, siga a imagem abaixo:

    Agora vamos para a parte do Typescript, abra o arquivo home.page.ts para implementarmos o método que constrói a tela, primeiro necessitamos inserir o import como na imagem abaixo:

 

    Vamos colocar o controlador no construtor para podermos usar o componente que foi incorporado na importação:

 

    Desta forma já podemos fazer o método em si que faz a magia acontecer:

 

    Com isso precisamos agora fazer o nosso botão capturar o evento do clique e chamar o método (como na imagem abaixo) finalizando a implementação:

    O produto final, o botão:

    A janela de alerta clicada:

     Se você chegou até aqui é porque deu tudo certo e você já está capacitado para implementar o ion-alert, sei que você está se perguntando: "E se eu quiser personalizar?", acalme seu precioso coração veremos em artigos posteriores!!! Espero que tenham gostado, qualquer dúvida deixe nos comentários terei o prazer em ajudá-los, grande abraço e fiquem com Deus!!!