Angular component in Ionic2

Ionic Framework ionic-v3
1

I am just starting ionic 2. I started from tutorial, and tried to make a component from the list on the list page.
So the template of the component looks like this

  <ion-list>
  	<button ion-item  class="item" *ngFor="#item of items" (click)="itemTapped($event, item)">
        <ion-icon name="{{item.icon}}" item-left></ion-icon>
      {{item.category}}
      <div class="item-note" item-right>
        {{item.description}}
      </div>
    </button>
    </ion-list>

And the page which includes this is

<ion-navbar *navbar>
    <button menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>My First List</ion-title>
</ion-navbar>

<ion-content>
   <items [items] = "items"></items>
</ion-content>

Everything works, except the css is in the page. css attributes are not added properly to the nodes , for example button doesn’t have a class=“item” as it should have, or the icon is not loaded at all. What is it I am missing?

2

Of course I have to

import {IONIC_DIRECTIVES} from 'ionic-framework/config/directives';
1 Like
3

Well it worked, but just partially.
In the same example if I do a

  <ion-list>
    <button ion-item *ngFor="#item of items" (click)="itemTapped($event, item)">
        <my-shiny-component [item="item"></my-shiny-component>
    </button>
</ion-list>

I loose the formatting of the rows. I think the problem is ionic doesn’t wrap my component inside an item-inner div, as it does with the inline code. Any thoughts?