Conditional template in Angular with interfaces

Question

I want to render in the same page multiple blocs that can be of multiple type, for example an event, a location, a book, etc..

I defined an interface for this, that I called a Bloc. And multiple extensions of this interface.

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;
}

The view must deal with Bloc[] and process them with a *ngFor.

I populate the array as follow :

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

But the thing is that the layout depends on the type of the bloc. If it is an event I must display some information, if it is a book I must display other information.

For exemple, the routerLink to go to the detail page will not be the same. Or the background color of the bootstrap card.

All I have as of now is the @Input variable.

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() {
  }

}

How can I acheive this please ? Should I play with multiple *ngIf or is there a better way to do this ?