Чтобы получить данные от родительского компонента в Angular, вы можете использовать следующие методы:

1. Декоратор ввода. Вы можете использовать декоратор ввода, чтобы определить свойство ввода в дочернем компоненте. Родительский компонент затем может привязать значение к этому свойству при использовании дочернего компонента в своем шаблоне.

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

   import { Component, Input } from '@angular/core';
   @Component({
    selector: 'app-child',
    template: '<p>{{ data }}</p>'
   })
   export class ChildComponent {
    @Input() data: any;
   }

   Шаблон родительского компонента:

   <app-child [data]="parentData"></app-child>

2. ViewChild: вы можете использовать декоратор ViewChild, чтобы получить ссылку на дочерний компонент в родительском компоненте. Получив ссылку, вы сможете напрямую обращаться к ее свойствам и методам.

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

   import { Component } from '@angular/core';
   @Component({
    selector: 'app-child',
    template: '<p>Child Component</p>'
   })
   export class ChildComponent {
    public childData: any = 'Child Data';
   }

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

   import { Component, ViewChild } from '@angular/core';
   import { ChildComponent } from './child.component';
   @Component({
    selector: 'app-parent',
    template: `
      <app-child></app-child>
      <button (click)="getChildData()">Get Child Data</button>
    `
   })
   export class ParentComponent {
    @ViewChild(ChildComponent) childComponent: ChildComponent;
    getChildData() {
      console.log(this.childComponent.childData);
    }
   }

3. Службы. Вы можете создать службу для хранения и обмена данными между компонентами. Родительский компонент может устанавливать данные в сервисе, а дочерний компонент может их получать.

   Обслуживание:

   import { Injectable } from '@angular/core';
   @Injectable({
    providedIn: 'root'
   })
   export class DataService {
    public sharedData: any;
   }

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

   import { Component } from '@angular/core';
   import { DataService } from './data.service';
   @Component({
    selector: 'app-parent',
    template: `
      <button (click)="setData()">Set Data</button>
    `
   })
   export class ParentComponent {
    constructor(private dataService: DataService) {}
    setData() {
      this.dataService.sharedData = 'Shared Data';
    }
   }

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

   import { Component } from '@angular/core';
   import { DataService } from './data.service';
   @Component({
    selector: 'app-child',
    template: '<p>{{ dataService.sharedData }}</p>'
   })
   export class ChildComponent {
    constructor(public dataService: DataService) {}
   }