I am currently delving into Angular and Ionic Frameworks, honing my skills through practice. I'm encountering an issue with a basic @Input test, where I am trying to iterate through an array of Tab Pages and then display each tab using <ion-tab>. Below is the code snippet:
tabs.html
<ion-tabs>
<ion-tab *ngFor="let page of tabPages" [root]="page.root" [tabTitle]="page.title">
</ion-tab>
</ion-tabs>
tabs.ts
import { Component } from '@angular/core';
// - - - Pages Components - - - //
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import { SettingsPage } from "../settings/settings";
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tabPages : Array<any>;
constructor() {
this.tabPages = [];
this.tabPages.push( { root : HomePage, title : "Home" } );
this.tabPages.push( { root : AboutPage, title : "About" } );
this.tabPages.push( { root : ContactPage, title : "Contact" } );
this.tabPages.push( { root : SettingsPage, title : "Settings" } );
}
}
I am wondering if there is a way to bind a property from an object and use it as input for a component?
Thank you for any assistance provided.