How to hide and show two components?

Question

Angular

I have a component that is being reused:

<app-add-object-layer-component *ngIf="showAddForm1()" [props]="null" [title]="'Добавление 1'"[type]="'addToB'">
 <app-add-object-layer-component *ngIf="showAddForm2()" [props]="null" [title]="'Добавление 1'"[type]="'addToL'">

As you can see, the display of components occurs due to ngIf:

showAddForm1()
showAddForm2()

The problem is that you only need to display one active component, hide the other. And I don't want to do something like this:

public onSelectButton(button: Button) {
    if (button instanceof ButtonAddToLayer) {
      this.addRegistryLayerService.add[addToB] = true;
    this.addRegistryLayerService.add[addToL] = false
    }
  }

How can this be done more elegantly - having a list of `app-add-object-layer-component` components?

Answer 1

ngSwitch