Hide parent component when close button is clicked in angular

Question

As stated I would like to hide the parent component when a button is clicked in the child. Comments with all capital letters show where I am trying to implement this functionality. Any help would be greatly appreciated.

child component.ts

export class CardComponent implements OnInit {

  //Event variable to display this cards details
  @Input()
    singleevent!:myevent;
  
  //SENDING BOOLEAN EVENT TO PARENT COMPONENT
  @Output()
  onRemoveClick!:EventEmitter<boolean>;

  constructor() { }
  ngOnInit(): void {
    //Initialize event to get from service layer
  }

  //FUNCTION FOR EVENT EMITTER TO EMIT BOOLEAN VALUE
  removeClick(){
    this.onRemoveClick.emit(true);   
  }

 
}

child component.html

<div class="card text-center" style="width: 18rem;">
  <div class="card-header card-title">


    <!-- HERE IS THE BUTTON WITH THE REMOVE CLICK FUNCTION ATTATCHED -->
    <button type="button" class="btn-close" aria-label="Close" (click)="removeClick()"></button>
    <h3>{{singleevent.name}}</h3></div>
    <div class="card-body">
      <h5 class="card-text">Date: {{singleevent.date | date : 'shortDate' }}</h5>
      <h5 class="card-time"> Start time: {{singleevent.startTime}}</h5>
      <h5 *ngIf="singleevent.endTime !== null">{{singleevent.endTime}}</h5>
    </div>

parent.ts

export class CardlistComponent implements OnInit {
  
  //events variable will be set to event service get request
  events:myevent[] = EVENTS;
  eventlist!:myevent[]

  constructor() { }

  ngOnInit(): void {
  }

  //FUNCITON I MAY NEED TO CALL IN PARENT HTML
  remove(value:boolean){
    if(value)
      return true;
    return false;
  }

}

parent.html this is where I am confused how can I call the [hidden] attribute or use my output to hide the Child component I am rendering.

<app-button (click) = "toggleEvent()" text="Add New Event" color="dodgerBlue"></app-button>
<div class="container" [hidden]="!toggleNewEvent">
    <app-newcard></app-newcard>
</div>
<div class = "container">
    <div class = "row" >       
        <div class = "col-sm" *ngFor="let thisevent of events">
            

            //THIS IS THE EVENT I WANT TO HIDE WHEN THE BUTTON IN THIS CHILD IS CLICKED
            <app-card [singleevent]="thisevent"></app-card>
        </div>
    </div> 
</div>

Answer 1

You are not catching your output in the parent html. So first catch the onRemoveClick then when the emitter is triggered, its going to call remove with the value emitted.

<app-card [singleevent]="thisevent" (onRemoveClick)="remove($event)"></app-card>

Now remove is triggered but the value isnt passed anywhere in the parent component. Instead of randomly returning a boolean, you need to assign that value to a variable that is going to be used in the html to hide. SO lets say you have a new variable hideParent

hideParent: boolean = false;

  remove(value:boolean){
    this.hideParent = value;
  }

Now you have whether or not the prent have to hide in a variable easily accessible from the html. The next step is to use that variable.

I dont know exactly what your are trying to hide but you just have to bind the [hidden]="hideParent"