Best way to send parameter between components-CodePudding

I'm new to Angular, and I have been assigned to a big project, and I'm trying to understand how angular works.

So I have a component that is called a child component:

Parent HTML

<table >
  <tr *ngFor="let item of filteredItems$ | async; index as i">
    <td>
      <app-timeline-time-off-approved></app-timeline-time-off-approved>
    </td>
</table>

I want to send the object item that is in the *ngFor to the child component <app-timeline-time-off-approved>

Parent ts:

@Component({
  selector: 'app-list-time-off-approved',
  templateUrl: './list-time-off-approved.component.html',
  styleUrls: ['./list-time-off-approved.component.css'],

})
export class ListTimeOffApprovedComponent implements OnInit {
  
  constructor(
    private apiService: ApiService
  ) { }

  filteredItems$: Observable<TimeOffApprovedModel[]>;

ngOnInit() {
    this.reloadPage();
  }

Child HTML

<ul  id="timeline">
    <li >
      <div >
        <span>Expire: {{item.awardedExpirationDate}}</span>
        <span>Hours: {{item.awardedHours}}</span>
      </div>
      <div >
        <h5>Awarded Time</h5>
      </div>
    </li>
    <li >
      <div >
        <span>Expire: {{item.advanceExpirationDate}}</span>
        <span>Hours: {{item.advanceHours}} </span>
      </div>
      <div >
        <h5>Advance Time</h5>
      </div>
    </li>
    <li >
      <div >
        <span>Available Time: {{item.availableHours >=0 ? item.availableHours: 0}}</span>
        <span>&nbsp;</span>
      </div>
      <div >
        <h5>Total</h5>
      </div>
    </li>
</ul>

NOTE: This code fails because I do not have the item object that I want to get from his parent

Child ts

 @Component({
  selector: 'app-timeline-time-off-approved',
  templateUrl: './timeline-time-off-approved.component.html',
  styleUrls: ['./timeline-time-off-approved.component.css'],
})

export class TimelineTimeOffApprovedComponent implements OnInit {

  constructor() {}

  ngOnInit(): void {

  }

}

CodePudding user response：

All you have to do is this:

First create an input field in the child

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

@Component({ ... })
export class TimelineTimeOffApprovedComponent implements OnInit {

  @Input()
  item: TimeOffApprovedModel = {};

  constructor() {}

  ngOnInit(): void {}
}

Now in the parent, you are able to pass the item to the children

<table >
  <tr *ngFor="let item of filteredItems$ | async; index as i">
    <td>
      <!-- Right here -->
      <app-timeline-time-off-approved [item]="item"></app-timeline-time-off-approved>
    </td>
</table>

CodePudding user response：

Just refer the official documentation from angular for sharing the data between components.

https://angular.io/guide/inputs-outputs

After referring above URL, you will know how to use the below code.

Parent.html

<app-timeline-time-off-approved [item]="item"></app-timeline-time-off-approved>

Child.ts

@Input('item) item = {};

May the angular be with you!