I want to use the ngfor to get 4 stored data and create the 4 buttons with that data and depending on the choice that this redirects to the page that corresponds to it.
<button id="menu-button11" ion-button color="positive" block icon-right style="text-align:left;" >
{{menu.name}} {{menu.menu1}} {{menu.menu2}} {{menu.menu3}} //dependiendo de este valor llamar a la pagina correspondiente
<ion-icon name="arrow-forward"></ion-icon>
</button>
Is there any way to do that?
creates the buttons dynamically with the ngFor, and inside the button element adds the ngIf to manage your condition, within the data of the button you must also add the page where you are going to redirect, here an example:
.HTML:
<div *ngFor="let boton of botones">
<button *ngIf="boton.valor == 1" ion-button (click)="goTo(boton.pagina)">{{boton.etiqueta}}</button>
</div>
.TS:
export class MyPage {
botones: any = [
{etiqueta: "Boton Uno", pagina: "HomePage", valor: 1},
{etiqueta: "Boton Dos", pagina: "UsersPage", valor: 2}
]
goTo(pagina){
this.navCtrl.push(pagina);
}
}
This solution involves using lazy loading to navigate between the pages