Условный шаблон в Angular с интерфейсами

Question

Я хочу отобразить на одной странице несколько bloc s, которые могут быть нескольких типов, например, событие , местоположение , книга , et c ..

Я определил интерфейс для этого, который я назвал Bloc. И несколько расширений этого интерфейса.

export interface Bloc {
}

export interface BlocBook extends Bloc {
  name: string;
  image: string;
}

export interface BlocLocation extends Bloc {
  name: string;
  image: string;
}

export interface BlocEvent extends Bloc {
  name: string;
  location: Location;
  image: string;
}

Представление должно иметь дело с Bloc[] и обрабатывать их с * ngFor .

Я заполняю массив следующим образом :

for (let event of resp['events']){
   var b = <BlocEvent>{
      name: event.name,
      image: event.location.image,
    };
}

Но дело в том, что макет зависит от типа бл c. Если это событие Я должен отобразить некоторую информацию, если это книга Я должен отобразить другую информацию.

Например, routerLink до go на странице сведений не будет таким же. Или цвет фона карты bootstrap .

. На данный момент у меня есть только переменная @Input.

import { Component, OnInit, Input } from '@angular/core';
import { Bloc } from '../../../models/bloc';

@Component({
  selector: 'app-bloc',
  templateUrl: './bloc.component.html',
  styleUrls: ['./bloc.component.css']
})
export class BlocComponent implements OnInit {
  @Input() bloc: Bloc;

  constructor() { }

  ngOnInit() {
  }

}

Как мне это сделать? пожалуйста ? Должен ли я играть с несколькими * ngIf или есть лучший способ сделать это?