I created a custom component and it works on main page but not inside a tabPage. What is wrong on this code? Thanks guys.
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { SuperTabsModule } from 'ionic2-super-tabs';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { NewsItemComponent } from '../components/news-item/news-item';
@NgModule({
declarations: [
MyApp,
HomePage,
NewsItemComponent
],
imports: [
BrowserModule,
SuperTabsModule.forRoot(),
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
home.html:
<ion-header no-border>
<ion-navbar color="primary">
<button ion-button menuToggle icon-only>
<ion-icon name='menu'></ion-icon>
</button>
<ion-searchbar (ionInput)="getItems($event)" ></ion-searchbar>
<ion-buttons end>
<button ion-button icon-only (click)="openFavoritesPage()">
<ion-icon name="heart-outline"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ion-tabs [ngClass]="{'visible': !showSearchList}" toolbarColor="light" toolbarBackground="primary" indicatorColor="danger" badgeColor="light">
<ion-tab [root]="page1" [rootParams]="{'type': 'all'}" title="All"></ion-tab>
<ion-tab [root]="page2" [rootParams]="{'type': 'news'}" title="News"></ion-tab>
<ion-tab [root]="page3" [rootParams]="{'type': 'reviews'}" title="Reviews"></ion-tab>
<ion-tab [root]="page4" [rootParams]="{'type': 'videos'}" title="Videos"></ion-tab>
<ion-tab [root]="page5" [rootParams]="{'type': 'photos'}" title="Photos"></ion-tab>
</ion-tabs>
<ion-list class="searchitens" [ngClass]="{'visible': showSearchList}">
<ion-item *ngFor="let item of items">
{{ item }}
</ion-item>
</ion-list>
</ion-content>
home.ts:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
page1: any = 'NewsPage';
page2: any = 'NewsPage';
page3: any = 'NewsPage';
page4: any = 'NewsPage';
page5: any = 'NewsPage';
showSearchList: boolean = false;
items: string[];
constructor(public navCtrl: NavController) {
this.initializeItems();
}
getItems(ev: any) {
// Reset items back to all of the items
this.initializeItems();
// set val to the value of the searchbar
let val = ev.target.value;
// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
this.showSearchList = true;
this.items = this.items.filter((item) => {
return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}else{
this.showSearchList = false;
}
}
initializeItems() {
this.items = [
'Mercedes Benz',
'Chrysler',
'Dodge',
'Jeep',
'Ford',
'Lincoln',
'Tesla Motors',
'GMC',
'Chevrolet',
'Cadillac'
];
}
openFavoritesPage(){
this.navCtrl.push("FavoritesPage");
}
}
news.html:
<ion-content padding>
<news-item ></news-item>
</ion-content>
news.ts:
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-news',
templateUrl: 'news.html',
})
export class NewsPage {
items: any = [1,2,3,4,5,6,7,8,9,10,11,12];
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log(this.navParams.data.type);
}
}
news-item.html(component):
<div>
{{text}}
</div>
news-item.ts(component):
import { Component } from '@angular/core';
@Component({
selector: 'news-item',
templateUrl: 'news-item.html'
})
export class NewsItemComponent {
text: string;
constructor() {
console.log('Hello NewsItemComponent Component');
this.text = 'Hello World';
}
}
