How to change a css class in the parent component by clicking a button on the child component?

Question

I am new to developing projects with Angular. I need, please, a great help.

I would like a class css was changed in a <div></div> inserted into the parent component and when a button was clicked on the child component the classes "sucess" and "Danger" alternate (toggle).

Below is an example:

Father.component.html

<app-child></app-child>
<div [ngClass]="status ? 'success' : 'danger'"></div>

Father.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-father',
  templateUrl: './father.component.html',
  styleUrls: ['./father.component.scss'],
})
export class FatherComponent implements OnInit {

  status: boolean = false;

  constructor() { }

  ngOnInit(): void {
  }

}

Child.component.html

<button (click)="clickEvent()">Mudar classe css no componente pai</button>

Child.component.ts

import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {

  status: boolean = false;
    clickEvent(){
    this.status = !this.status;       
  }

  constructor() { }

  ngOnInit(): void {
  }

}

Answer 1

Follow my answer:

Father.component.html

<app-child (myEvent)="receiveEvent($event)"></app-child>
<div [ngClass]="status ? 'success' : 'danger'"></div>

Father.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-father',
  templateUrl: './father.component.html',
  styleUrls: ['./father.component.scss'],
})
export class FatherComponent implements OnInit {

  status: boolean = false;
  
  receiveEvent($event) {
    this.status = $event
  }

  constructor() { }

  ngOnInit(): void {
  }

}

Child.component.html

<button (click)="clickEvent()">Mudar classe css no componente pai</button>

Child.component.ts

import { Component, OnInit, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {

  status: boolean = false;
  
  @Output() myEvent = new EventEmitter();
  
  clickEvent(){
    this.status = !this.status;
    this.myEvent.emit(this.status)
  }

  constructor() { }

  ngOnInit(): void {
  }

}