Another way is using a service. You have to use the service as a "store" of your data values:

1. Create a service:

ng g s MyServiceName --skip-Tests

Once it is created, check that has been decorated as providedIn root:

@Injectable({
  providedIn: 'root',
})
export class MyServiceNameService {
....

2. In your service, declare all data you want the components share (have in commun), and create methods setters/getters for this data. e.g:

private _myVariable: string;

get myVariable(){
   return _myVariable;
}

set myVariable(newValue: string){
   this._myVariable = newValue;
}

constructor(){
   _myVariable = "exampletest";
}

3. Inject the service in the constructor of your components (in parent and in child):

...
import { MyServiceNameService } from '../../services/my-service-name.service';
...
constructor(
   private myServiceNameService : MyServiceNameService ) {
  }
...

4. Used directly the variables in the service through methods in the service to modify the varaibles values or get its values.

e.g: in components:

let myVariable:string;

....
getNewValue(){
   myVariable = this.myServiceNameService.myVariable;
}
setNewValue ( newValue: string) {
   this.myServiceNameService.myVariable(newValue);
}

There could be multiple ways here:

1. You can create angular service (use @Injectable() annotation to create service). Angular service follows singleton design pattern and can be shared among multiple pages of your application. Wherever you need, just inject that service and you can access all properties/methods.
   Link how to create angular service -

   https://angular.io/guide/architecture-services

2. You can use redux concept and create a store having data & then that data could be accessible across all pages. NgRx is the best library with Angular to create store and access data wherever needed. NgRx link -

   https://ngrx.io/guide/store

3. You can use RxJs library to share data between peer components.
   RxJs link -

   https://rxjs.dev/guide/overview

Use a shared service and create an observable inside the service, then inject this service to the components need to access this shared data and create a subscription on each component. When ever the data in the observable changes the subscribed components will get notified.