title: Conditional template in Angular with interfaces
body: <p>I want to render in the same page multiple <code>bloc</code>s that can be of multiple type, for example an <strong>event</strong>, a <strong>location</strong>, a <strong>book</strong>, etc..</p>
  
  <p>I defined an interface for this, that I called a <code>Bloc</code>. And multiple extensions of this interface.</p>
  
  <pre class="lang-js prettyprint-override"><code>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;
  }
  </code></pre>
  
  <p>The view must deal with <code>Bloc[]</code> and process them with a <strong>*ngFor</strong>.</p>
  
  <p>I populate the array as follow :</p>
  
  <pre class="lang-js prettyprint-override"><code>for (let event of resp['events']){
     var b = &lt;BlocEvent&gt;{
        name: event.name,
        image: event.location.image,
      };
  }
  </code></pre>
  
  <p>But the thing is that the layout depends on the type of the bloc. If it is an  <strong>event</strong> I must display some information, if it is a <strong>book</strong> I must display other information.</p>
  
  <p>For exemple, the <strong>routerLink</strong> to go to the detail page will not be the same. Or the <strong>background color of the bootstrap card</strong>.</p>
  
  <p>All I have as of now is the <code>@Input</code> variable.</p>
  
  <pre class="lang-js prettyprint-override"><code>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() {
    }
  
  }
  </code></pre>
  
  <p>How can I acheive this please ? Should I play with multiple <strong>*ngIf</strong> or is there a better way to do this ?</p>