Choose whether to show one component or another with ionic and angular framework


I am developing an app with ionic and angular. In one specific page I added a component into the ion-content, however now I want to choose to display another one when I click a button. I have been looking for an option but it has been imposible for me to find how to do it. This is my actual code:

    <ion-buttons slot="end">
      <ion-button (click)="changeComponent()" color="primary">
        <ion-icon name="copy-outline"></ion-icon>


What I want to do is to add in the ion-content another component called app-dual-blockly that has to be seen only when I click the changeComponent button and hide the actual app-blocky.

Thank you very much.


define your boolean properties to show components or not:

public showComponentA = false;
public showComponentB = false;

When clicking the button, toggle the action

changeComponent() {
    this.showComponentA = !this.showComponentA;

changeComponentB() {...}

In this case, you can easily work with *NgIf

 <app-blockly *ngIf="showComponentA"></app-blockly>
 <another-component *ngIf="showComponentB"></another-component>

If things grow, you can either choose a Angular Router or use a switchStatement.
For only two Components, this should do the trick.

Answered By – jo-chris

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published