How to write and read property of parent component from child?

Question

Angular

Hello.
I have a parent component in Angular:

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

@Component({
    selector: 'my-app',
    template: `<router-outlet></router-outlet>`
})
export class AppComponent {
    auth: any = false;
}

I also have many child components, among which there is an AuthComponent component that is responsible for user authorization: the user enters a login and password, and the AuthComponent component sends a request to the server to find out if there is a user with such a login and password or not:

AuthComponent

import { Component, ViewChild  } from '@angular/core';
import {Router} from '@angular/router';
import {AuthService} from './auth.service';
import {AppComponent} from '../app.component';

@Component({
    selector: 'authorization',
    templateUrl: './auth.component.html',
    providers: [AuthService],
    styleUrls: ['./auth.component.css']
})
export class AuthComponent {
    user = {
        email: '',
        pass: ''
    };
    auth = {};
    errorMessage = document.getElementsByClassName("error-message");
    constructor(private authService: AuthService, private router: Router){}
    @ViewChild(AppComponent, {static: false})
    private appComponent: AppComponent;
    comeIn(event:any) {
        if (this.user.email !== '' && this.user.pass !== '') {
            this.authService.getUser(this.user).subscribe(
                (data: any) => {
                    this.auth = data;
                    console.log(this.appComponent.auth);
                    console.log(typeof this.appComponent.auth);
                    this.appComponent.auth = data;
                    console.log(this.appComponent.auth);
                    console.log(typeof this.appComponent.auth);
                    if (data)
                        this.router.navigate(['/marketer-cabinet']);
                    else {
                        this.errorMessage[0].classList.add("visible");
                    }
                },
                error => console.log(error)
            );
        }
    }
    hideErrorMes () {
        this.errorMessage[0].classList.remove("visible");
    }
}

I want to do this: when a response comes from the server, then write true or false to the "auth" property of the parent component (there is such a user or not, and this will mean the user is authorized or not) and then check from all other child components whether the user is authorized or not . In the AuthComponent, I tried to do it via @ViewChild, but that doesn't work, since @ViewChild is meant to access properties and methods of the child component, not the parent. There is an option to write this logic on the server in NodeJs (this is, in principle, more reliable for such a check, as I understand it) or write this information to window, but I'm wondering if this can be somehow organized in a purely Angular way (at least for the sake of a deeper understanding of Angular) .
That is, I’m interested: is there a way to write a value from a child component to a property of the parent component, and then read it

Answer 1

Use the service

Answer 2

in the child component, emit an event (EventEmitter)
and listen to this event in the parent