In my application, there are two childs and one parent

child A pass object to child b

<app-temp-add [map]="selectedMap"></app-temp-add>

child B use *ngif to check the object is defined or not then after click the button, passing the object

.html

<div *ngIf="map">
  <div>
    <label for="hero-name">name: </label>
    <input id="map-name" value="{{ map.name }}" />
    <div>
      <label for="hero-name">{{ map.address }}</label>
    </div>
  </div>

  <div>
    <button class="add-button" (click)="add(map)">Add to list</button>
  </div>
</div>

.ts

  @Input() map: any;
  @Output() newItemEvent = new EventEmitter<any>();

  add(map: any) {
    this.newItemEvent.emit(map);
  }

parent should get the object but it failed

.HTML

<app-temp-add (newItemEvent)="addItem($event)"></app-temp-add>

.ts

  addItem(newItem: any | undefined) {
    console.log("outout");
  }

after testing, *ngIf is the reason why this happened

but why? and how to solve this problem?

Here is the stackblitz