Передача данных дочернему компоненту Angular 9

Question

У меня есть дочерний компонент внутри kendo ui angular Panelbar, которому мне нужно передать идентификатор, но он не определен в URL-адресе api. Вот код:

 <kendo-panelbar [expandMode]="kendoPanelBarExpandMode">
 <kendo-panelbar-item *ngFor="let event of events" [title]="event.title">    
 <ng-template kendoPanelBarContent>
  <br>      
  {{event.id}}
  <app-volunteering-emp-list eventID="{{event.id}}"></app-volunteering- 
 emp-list>
 </ng-template>
 </kendo-panelbar-item>
 </kendo-panelbar>

Answer 1

parent.component.ts

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child [childMessage]="parentMessage"></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent{
  parentMessage = "message from parent"
  constructor() { }
}

child.component.ts

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

@Component({
  selector: 'app-child',
  template: `
      Say {{ message }}
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  @Input() childMessage: string;

  constructor() { }

}

Answer 2

Думаю, что проблема в этом

поменять строчку

<app-volunteering-emp-list eventID="{{event.id}}"></app-volunteering-emp-list>

на эту

    <app-volunteering-emp-list [eventID]="event.id"></app-volunteering-emp-list>