angular - include message when filter by radio input does not show matches

Question

I have an array with a series of elements that correspond to 3 animals. I have "n" radio input to filter these animals. When there are no coincidences, nothing will be shown, then I want to show a message when there are no coincidences. I do not know how to have an optimal solution and a maintainable code. I can have "n" amount of input radios How can I do it?

<input type="radio" name="radio_option" [(ngModel)]="radio_option" value='all'> show all
<input type="radio" name="radio_option" [(ngModel)]="radio_option" value='horse'> Horse
<input type="radio" name="radio_option" [(ngModel)]="radio_option" value='chicken'> Chicken
<input type="radio" name="radio_option" [(ngModel)]="radio_option" value='cat'> Cat
<input type="radio" name="radio_option" [(ngModel)]="radio_option" value='dog'> dog
<input type="radio" name="radio_option" [(ngModel)]="radio_option" value='cow'> cow
<input type="radio" name="radio_option" [(ngModel)]="radio_option" value='bird'> bird
....
<ng-container *ngFor="let item of options">
    <p *ngIf="radio_option==item.animal || radio_option=='all'">
          {{item.animal}}
    </p>
</ng-container>

  options:any=[
    {
      "animal":"horse"
    },
    {
      "animal":"chicken"
    },
    {
      "animal":"cat"
    },
    {
      "animal":"horse"
    },
    {
      "animal":"chicken"
    },
    {
      "animal":"cat"
    }    
  ]
}

https://stackblitz.com/edit/angular-xphzkm?file=src/app/app.component.ts

Answer 1

This is the solution:

<div [ngSwitch]="radio_option">
   <ng-container *ngFor="let item of options"> 
      <p *ngSwitchCase="item.animal">
        {{item.animal}}
      </p>
      <p *ngSwitchCase="'all'">
        {{item.animal}}
      </p>
   </ng-container>
   <p *ngSwitchDefault>
    No items found
   </p>
</div>

Updated Your code with solution: https://stackblitz.com/edit/angular-9ywf9d