Expansible list on ionic 2 component


#1

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