I’ve create a custom component named toggle within iconic 2 but is not working correctly
I’ve split my code up into components, where
this is toggle.ts
import { Component } from '@angular/core';
@Component({
selector: 'data',
templateUrl: 'toggle.html'
})
export class Data {
constructor(public title: string, public details: string, public icon: string, public showDetails: boolean) {}
}
@Component({
selector: 'toggle',
inputs: ['data'],
templateUrl: 'toggle.html'
})
export class Toggle {
public data: Data[];
constructor() {}
toggleDetails(data: Data) {
if (data.showDetails) {
data.showDetails = false;
data.icon = 'ios-add-circle-outline';
} else {
data.showDetails = true;
data.icon = 'ios-remove-circle-outline';
}
}
}
My module.ts is this:
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { Data, Toggle } from '../components/toggle/toggle';
@NgModule({
declarations: [
MyApp,
HomePage,
Data,
Toggle
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
Data,
Toggle
],
providers: []
})
export class AppModule {}
Then in my home page I have this
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Data, Toggle} from '../../components/toggle/toggle';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public data: Data[];
constructor(public navCtrl: NavController) {
this.data = [
new Data('title 1', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ','ios-remove-circle-outline', true),
new Data('title 2', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ','ios-add-circle-outline', false),
new Data('title 3', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ','ios-add-circle-outline', false)
];
}
}
and my html
<toggle [data]="dataList"></toggle>
I am getting the error with data, cuz it says that it can not find Data, then I solve it by this way:
data: Array<{title: string, details: string, showDetails: boolean, icon: string}>;
but i don’t understand why it don’t get Data.
Also my list show works, but when one of them is showing the details and I choose another option the first one does not hide the details, how can I fix this? thanks