How to use Ionic components inside custom components/directives

I am new to ionic and trying different things while going through your articles and video tutorials which are very helpful. I created a very simple component and used ionic component ion-list inside this component. This component displays list but it does not apply ionic style.

Component JS Code:
import {Component, View, Input} from 'angular2/angular2';

@Component ({

selector: 'todo-renderer'
})

@View ({

templateUrl: 'app/todo/todorenderer.html'
})

export class TodoRenderer {

@Input() todos;
constructor(){
}
}

HTML Code:
<ion-list>
<ion-item *ng-for="#todo of todos" >{{todo.subject}}</ion-item>
</ion-list>

list.png295x643 4.91 KB

<todo-renderer><ion-list>
<script></script><ion-item>JavaScript</ion-item><ion-item>AngularJS</ion-item><ion-item>Ionic</ion-item>
</ion-list></todo-renderer>