Component

animal.component.html

<h1>Hello Animals</h1>
<ng-container *ngIf="isFish(pet)">
  <button (click)="pet.swim()">Swim!</button>
</ng-container>
<ng-container *ngIf="isFish(pet)">
  <button (click)="pet.fly()">Fly!</button>
</ng-container>

animal.component.ts

import {Component, OnInit} from '@angular/core';


abstract class Animal {
  eats(): void {
  }
}

class Fish extends Animal {
  swims(): void {
  }
}

class Bird extends Animal {
  flys(): void {
  }
}

@Component({
  selector: 'app-animal',
  templateUrl: './animal.component.html',
  styleUrls: ['./animal.component.css']
})
export class AnimalComponent implements OnInit {
  pet: Animal = new Bird();

  constructor() {
  }

  ngOnInit(): void {
  }

  isFish(animal: Animal): animal is Fish {
    return animal instanceof Fish;
  }
  isBird(animal: Animal): animal is Bird {
    return animal instanceof Bird;
  }
}