Допустим, у меня есть интерфейс (или фактический компонент)ListItemRenderer и компонентMyRendererComponent который реализует этот интерфейс (или расширяет базовый компонент)

@Component({
    selector: 'my-renderer',
    template: '<div>My renderer</div>'
})
export class MyRendererComponent implements ListItemRenderer {
    ...
}

Я хотел бы передать эту конкретную реализацию другому компоненту, например,

@Component({
    selector: 'my-list',
    template: `
        <ul [renderer]="renderer" [items]="items">
            <li *ngFor="let item of items">
                <!-- what goes here? -->
            </li>
        </ul>
    `
})
export class MyList {
    @Input() renderer: ListItemRenderer;
    @Input() items: any[];
    ...
}

Очевидно, родительский компонент будет иметь публичное свойствоrendererтипаListItemRenderer, Вопрос в том, как мне использовать этот компонент в моем<li> (увидеть "что здесь происходит?" выше)?