List of custom components in Angular 2

How can i create a list of custom Components in angular 2?

Using the components below, nothing shows up in the list. I would expect the component that i put in the list to be rendered on the screen with the template and values of the component that was added to the list.

OAuthButtonComponent.ts
import {Component} from 'angular2/angular2'
import "./oauth-button-component.scss";

@Component({
    templateUrl: "app/authentication/components/buttons/oauth-button-component.html",
    selector: "oauth-button-component"
})
export class OAuthButtonComponent {
    private _type: string;
    private _image: string;

    set image(value: string) {
        this._image = value;
    }
    set type(value: string) {
        this._type = value;
    }
}

oauth-button-component.html
<div>
    <button type="button" id="button">
        <img src="{{_image}}">
        SIGN IN WITH {{_type}}
    </button>
</div>

OAuthComponent.ts
import {Page} from 'ionic/ionic';
import {Component} from 'angular2/angular2'
import "./oauth-component.scss";
import {OAuthButtonComponent} from "./buttons/OAuthButtonComponent";
import {FacebookButtonComponentBuilder} from "./buttons/FacebookButtonComponentBuilder";

@Component({
    selector: "oauth-component",
    templateUrl: "app/authentication/components/oauth-component.html",
    directives: [OAuthButtonComponent]
})
export class OAuthComponent {

    private items: any[];

    constructor() {
        this.items = [];

        this.items.push(new FacebookButtonComponentBuilder()
            .setImage("../../../../img/branding/facebook/FB-f-Logo__blue_144.png")
            .setType("GOOGLE")
            .build());
    }

}

oauth-component.html
<div>
    <ion-list>
        <ion-item *ng-for="#item of items"></ion-item>
    </ion-list>
</div>