Angular component in Ionic2

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

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

And the page which includes this is

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

   <items [items] = "items"></items>

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?

Of course I have to

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

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

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

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?