Switching components at runtime in Ionic 3

Asked

Viewed 76 times

0

Good afternoon, is my first question here on the forum.

I have a doubt, and I do not know how to research, I am inciante in Ionic 3. I would like to know of has for example:

I have a page, when it loads opens an Alert of type confirm, I would like to click on the SIM to load a form on the same page is possible?

And it has to lock, kind a disabled in the click out of the Alert?

Thanks in advance for the time and the good will!

  • A good place to start is the documentation of components and of the Alert . There indicates which flag you use to not give Ismiss when you click on the backdrop and tbm has example of Handler buttons.

  • Leonardo Lima - managed with this option -> enableBackdropDismiss: false inside Alert in my file .ts.. now missing to be able to load the form into Handle.. Thank you..

1 answer

0

As mentioned by @Leonardolima, you can use the AlertController provided by Ionic itself using the enableBackdropDismiss as false. How much you display the form by clicking on Sim, you can use the Angular directives, in your case, the ngIf.

The code would look something like this:

// HTML

// Esse formulário é exibido se, e apenas se, o valor de "exibirFormulario" for verdadeiro.
// Do contrário, ele é escondido do DOM
<form *ngIf="exibirFormulario">
 // O conteúdo do form
</form>
// No arquivo .ts dessa página

/**
 * Diz se deve exibir o formulário
 */
public exibirFormulario: boolean = false;

/** 
 * Método executado quando o usuário entra na página
 */
public ionViewDidEnter(): void {
  let alert = this.alertCtrl.create({
    title: 'Confirma a ação',
    message: 'Você quer abrir o formulário?',
    buttons: [
      {
        text: 'Não',
        role: 'cancel',
        handler: () => {
          console.log('Formulário não foi aberto.');
        }
      },
      {
        text: 'Sim',
        handler: () => {
          // Ao marcar como verdadeiro, você diz para o Angular exibir 
          // aquele trecho de código dentro do ngIf.
          this.exibirFormulario = true;
        }
      }
    ]
  });
  alert.present();
}

I recommend the documentation of ngIf for you to deepen further on the subject.

A tip, when studying Ionic, in essence you study Angular, then look for videos about Angular that will serve the same purpose as studying Ionic.

  • Thank you very much for your attention Vinicius Lourenço. I will apply this code here. Thanks for the tips, I will follow them!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.