Why angular event emitter doesn't work when component is nested inside other component?

Question

In card component html I have ng-content and I put card-item component inside the card component. Why in this case I can`t emit value ?.

Example 1.

card.component.html

  <div>
      <ng-content>
  </div>

---

    <card>
       <card-item (closeEmitter)="onClose($event)">
       </card-item>
    </card>

If I move car-item component outside of card component the event emitter works fine.

Example 2.

card-item.component.html

<div>
  <div class="card-header"> header </div>
  <div class="card-body"> content </div>
  <div class="card-footer"> footer</div>  
</div>      
 

---

<card></card>
<card-item (closeEmitter)="onClose($event)"></card-item>

Is there any way to emit value as in the first example?

Answer 1

you should call the event emitter on an html element or ng-container.

<ng-container (closeEmitter)="onClose($event)">
<card-item></card-item>
</ng-container>. or on an html element 
<div (closeEmitter)="onClose($event)">
<card-item></card-item>
</div>