Любой способ изменить переменную из одного компонента в другой в Angular7?

Question

Привет, я новичок в Angular, и я проверял, могу ли я изменить значение переменной из другого компонента, в данном случае это значение заголовка, которое идет с исходным кодом.

Есть ли какой-нибудь простой способ сделать это?

Я видел несколько примеров в Интернете, но ничего не получалось, не знаю, так ли это, потому что это не то, что я ищуили если это для другой версии.

Прямо сейчас без каких-либо изменений мой код выглядит так:

Компонент с переменной заголовка:

html:    
<div>{{ title }}</div>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'Welcome to Learning!';
}

Компонент, который я хочу изменить переменную:

html:    
<span class="navbar-brand" (click)="title = 'ok';">Learning</span>

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

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

  constructor() { }

  ngOnInit() {
  }
}