Best way to send parameter between components

December 28, 2022

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 class="table table-striped">
  <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 class="timeline" id="timeline">
    <li class="li complete">
      <div class="timestamp">
        <span>Expire: {{item.awardedExpirationDate}}</span>
        <span>Hours: {{item.awardedHours}}</span>
      </div>
      <div class="point">
        <h5>Awarded Time</h5>
      </div>
    </li>
    <li class="li complete">
      <div class="timestamp">
        <span>Expire: {{item.advanceExpirationDate}}</span>
        <span>Hours: {{item.advanceHours}} </span>
      </div>
      <div class="point">
        <h5>Advance Time</h5>
      </div>
    </li>
    <li class="li complete">
      <div class="timestamp">
        <span>Available Time: {{item.availableHours >=0 ? item.availableHours: 0}}</span>
        <span>&nbsp;</span>
      </div>
      <div class="point">
        <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 {

  }

}

>Solution :

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 class="table table-striped">
  <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>