Как записать и прочитать свойство родительского компонента из дочернего?

В Angular есть несколько способов записать и прочитать свойство родительского компонента из дочернего. Рассмотрим каждый из них.

1. Использование директивы @Input:
Директива @Input позволяет передавать значения из родительского компонента в дочерний компонент. Для этого в дочернем компоненте необходимо добавить свойство с декоратором @Input и задать ему имя, которое будет использоваться для передачи значения из родительского компонента.
Пример:
Родительский компонент:

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

   @Component({
     selector: 'app-parent',
     template: ` <app-child [parentProperty]="parentValue"></app-child>`
   })
   export class ParentComponent {
     parentValue: number = 10;
   }

Дочерний компонент:

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

   @Component({
     selector: 'app-child',
     template: ` <p>{{ childProperty }}</p>`
   })
   export class ChildComponent {
     @Input() parentProperty: number;
     childProperty: number = 0;

     ngOnInit() {
       this.childProperty = this.parentProperty * 2;
     }
   }

2. Использование сервисов:
В Angular есть возможность передавать данные между компонентами с помощью сервисов. Создайте сервис, который будет содержать свойство с нужными данными и методы для его записи и чтения. Затем инъектируйте сервис в родительский и дочерний компоненты и используйте его методы для передачи и получения значений.
Пример:
Сервис:

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

   @Injectable()
   export class DataService {
     parentValue: number = 10;
   }

Родительский компонент:

   import { Component } from '@angular/core';
   import { DataService } from './data.service';

   @Component({
     selector: 'app-parent',
     template: ` <app-child></app-child>`
   })
   export class ParentComponent {
     constructor(private dataService: DataService) {}

     setParentValue(value: number) {
       this.dataService.parentValue = value;
     }
   }

Дочерний компонент:

   import { Component } from '@angular/core';
   import { DataService } from './data.service';

   @Component({
     selector: 'app-child',
     template: ` <p>{{ childProperty }}</p>`
   })
   export class ChildComponent {
     childProperty: number = 0;

     constructor(private dataService: DataService) {}

     ngOnInit() {
       this.childProperty = this.dataService.parentValue * 2;
     }
   }

3. Использование родительского компонента как сервиса:
Если родительский компонент является родительским для дочернего в иерархии компонентов, то его можно использовать как сервис. В таком случае, свойство родительского компонента может быть доступно в дочернем компоненте без необходимости внедрения сервиса или использования директивы @Input.
Пример:

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

   @Component({
     selector: 'app-parent',
     template: ` <app-child></app-child>`,
     providers: [{ provide: ParentComponent, useExisting: forwardRef(() => ParentComponent) }]
   })
   export class ParentComponent {
     parentValue: number = 10;
   }

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

   @Component({
     selector: 'app-child',
     template: ` <p>{{ childProperty }}</p>`
   })
   export class ChildComponent {
     childProperty: number = 0;

     constructor(private parent: ParentComponent) {}

     ngOnInit() {
       this.childProperty = this.parent.parentValue * 2;
     }
   }

В итоге, в Angular есть несколько способов записать и прочитать свойство родительского компонента из дочернего. Выбор подходящего способа зависит от контекста и требований приложения.