Advanced way of presenting alternative content in angular based on ModelView type

The ModelView that powers the angular component should have a specific type or should implement a specific interface. The more strict we are the better for us as developers. Sometimes however there is just one component and it is fed with data that is of one of two possible types (types union).

Like, let's say there is either a developer or a driver. They both have name, and years of experience but there are things that differ. For instance, a driver can have lapTime and the developer can have a programming language.

The typed structure based on common part & specific

And in code it will look following:

interface Human {
	name: string;
    years: number;
}

export interface Driver extends Human {
	lapTime: number;
}

export interface Developer extends Human {
	language: string;
}

export type Person = Driver | Developer;

So now the angular template will look like the following:

<div>
	<ng-container
          [ngTemplateOutlet]="isDriver(person) ? Driver : Developer"
          [ngTemplateOutletContext]="{ person: person }"
	>
</div>

<ng-template #Driver>
    <div *ngIf="isDriver(person) as driver">
      <span>{{driver.lapTime}}</span>
	</div>
</ng-template>
<ng-template #Developer>
   <div *ngIf="isDeveloper(person) as developer">
   		<span>{{developer.lapTime}}</span>
   </div>   
</ng-template>

export class PersonComponent {


	@Input() person!: Person;

	isDeveloper(object: Person): Developer | undefined {
    	return 'language' in object ? object : undefined ;
  	}
    
    isDriver(object: Person): Driver | undefined {
    	return 'latTime' in object ? object : undefined ;
  	}
    

}

Complete and working example will than look like: