Add component with values from dropdown multiple times

I have 3 dropdowns on the top of the page and a button next to them. Every click on the button next to the dropdowns, should take the values from the dropdowns and create a Building component and pass the values to it. After every click, the values of dropdowns should be set to default.

I first tried to create an array of components and after every click push new component to the array. The problem was, that while using Input() to pass data to a component, binded data was set to null after setting the dropdowns to null. Then I tried to pass the data without input, but with a function, but this way I wasn't able to see it on the screen, even using ChangeDetectorRef.

The code with last solution based on the function to pass the data is below.

Hou would you solve this issue?

<mat-form-field appearance="outline" class="dropdown">
            <mat-label translate="add-desks.building"></mat-label>
            <mat-select [(value)]="selectedBuilding" (selectionChange)="findFloors(selectedBuilding)" >
                <mat-option *ngFor="let building of buildingsAndFloors" [value]="building.name">{{building.name}}</mat-option>                
            </mat-select>
          </mat-form-field>          
          <mat-form-field appearance="outline" class="dropdown">
            <mat-label translate="add-desks.floor"></mat-label>
            <mat-select [(value)]="selectedFloor" (selectionChange)="findRooms(selectedBuilding, selectedFloor)" [disabled]="!selectedBuilding">
              <mat-option *ngFor="let floor of floors" [value]="floor">{{floor}}</mat-option>   
            </mat-select>
          </mat-form-field>
          <mat-form-field appearance="outline" class="dropdown">
            <mat-label translate="add-desks.room"></mat-label>
            <mat-select multiple [(value)]="selectedRoom" [disabled]="!(selectedBuilding&&selectedFloor)" >
              <mat-option *ngFor="let roomObj of rooms" [value]="roomObj.room">{{roomObj.room}}</mat-option>   
            </mat-select>
        </mat-form-field>
        <button class="add-localization" mat-stroked-button color="primary" (click)="addLocalization()" [disabled]="!(selectedBuilding&&selectedFloor&&selectedRoom)">
        <mat-icon class="plus-sign" matPrefix>add_circle</mat-icon>
            <span translate="add-desks.add-localization"></span>
        </button> 
    </div>
      <app-building *ngFor="let localization of localizations" [allLocalizations]="allLocalizations" (idsCheckedEvent)="receiveIds($event)" (idDeletedEvent)="deletedId($event)"></app-building>

localizations: BuildingComponent[] = [];
selectedBuilding: string;
selectedFloor: string;
selectedRoom: string;  
buildingsAndFloors = [];
floors = [];
allLocalizations = [];
rooms = [];
idsArray: string[];
project: ProjectRequest = {
  description: '',
  name: '',
  peopleUnitId: '310100',
  placesIDs: [],
  shortcut: ''
};

constructor(private router: Router, private location: Location, private route: ActivatedRoute, private service: ProjectsService, public cd: ChangeDetectorRef) {
  this.project.name = this.route.snapshot.queryParamMap.get('name');
  this.project.description = this.route.snapshot.queryParamMap.get('description');
  this.project.shortcut = this.route.snapshot.queryParamMap.get('shortcut');
}

ngOnInit(): void {
  this.getBuildingsAndFloors();
  this.getAllLocalizations();
}   

cancelConfirm(): void {
  if (confirm("Are you sure?")) {
    this.router.navigate(['/projects']);
  }
}

backClicked(): void {
  this.location.back();
}

receiveIds(idsArray: string[]) {
  this.project.placesIDs = this.project.placesIDs.concat(idsArray);
  this.project.placesIDs = Array.from(new Set(this.project.placesIDs));
}

deletedId(id: string): void {
  this.project.placesIDs = this.project.placesIDs.filter(element => element!== id);
}

addProjectWithDesks(): void {
  this.service.addProject(this.project)
    .subscribe(() => 
      this.router.navigate(['/projects']));
}

findFloors(selectedBuilding) {
  const found =  this.buildingsAndFloors.find(element => element.name === selectedBuilding);
  this.floors = found.floors;
}

findRooms(selectedBuilding, selectedFloor) {
  const foundBuilding =  this.allLocalizations.find(element => element.building === selectedBuilding);
  const foundFloor = foundBuilding.projectFloors.find(element => element.floor === selectedFloor);
  this.rooms = foundFloor.projectRooms;
}

getBuildingsAndFloors() {
  this.service.fetchBuildingsAndFloors().subscribe((buildingsAndFloors: BuildingsAndFloors[]) => {
    this.buildingsAndFloors = buildingsAndFloors;
  })
 
}

getAllLocalizations() {
  this.service.fetchAllLocalizations().subscribe((allLocalizations: Localization[]) => this.allLocalizations = allLocalizations);    
}

addLocalization() {
  let component = new BuildingComponent(this.cd);
  component.updateInputs(this.selectedBuilding, this.selectedFloor, this.selectedRoom, this.rooms);
  this.localizations.push(component);
  this.selectedBuilding = null;
  this.selectedFloor = null;
  this.selectedRoom = null;  
}
}```