Passing data to components

Earlier, we learned how to create the Event component. The problem is, that this component won’t be useful unless you can pass data to it, such as the time, title, location and description of the specific event we want to display. That's where inputs come into the picture.

In this lesson we will learn two different ways on how we can pass data to our component.

1. Passing Data using <ng-content>

The first way you pass data to our object is to use <ng-content> which allows us to render content between the tags. This can be achieved as follows:

1. Update event.component.html with the following code:
• event.component.html

<ng-content></ng-content>
	  

2. Add some data in between the <app-event></app-event> tags in the app.component.html file:
• app.component.html

<div class="container">
  <div class="row">
    <div class="col-md-9">
      <app-event>Event 1</app-event>
      <app-event>Event 2</app-event>
    </div>
    <div class="col-md-3">
    </div>
  </div>
</div>
	  

3. Save the file and run the app


Great! But what if we want to pass more varied data? Let's learn how to pass multiple data to our component.

1. Passing Data using @Input

Child component (Event Component)

1. Import Input in event.component.ts (before we were importing only Component)
• event.component.ts

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

2. Define new @Input() variable within the EventComponent class:
• event.component.ts

export class EventComponent {
  @Input() value: any;
}	  

3. Update the component template (event.component.html) to display our value variable:
• event.component.html

<p>{{ value }}</p>
  

Parent component (App Component)

1. Update the App template (app.component.html):
• app.component.html

<div class="container">
  <div class="row">
    <div class="col-md-9">
      <app-event  [value]="5" ></app-event>
      <app-event [value]="'string'"></app-event>
    </div>
    <div class="col-md-3">
    </div>
  </div>
</div>
  

2. Save the files and run the project


Using this method we can pass as many parameters as we need.

Note that the way we pass data from parent to the child component also matters.

• app.component.html

      [value]="5" // Value will be number 
      [value]="'string'" // Value will be string 
      [value="'5'"] // This also will be string (note '' )
  

We can also use @Input to pass more complex structure.

Important:
Keep in mind that using @Input allows us to pass data only in one direction - from the Parent to the Child component.

3. Passing complex objects

1. Add an initial event object to the app.component.ts
• app.component.ts

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  event: any =
    {
      time: "08:00",
      subject: "Breakfast with Simon",
      location: "Lounge Caffe",
      description: "Discuss Q3 targets"
    };
}

  

2. Update the App template:
• app.component.html

<div class="container">
  <div class="row">
    <div class="col-md-9">
      <app-event [value]="event"></app-event>
    </div>
    <div class="col-md-3"></div>
  </div>
</div>
  

3. Update the Event template:
• event.component.html

<h1> {{value.time}} : {{value.location}} </h1> 
<p> Location: {{value.location}} </p>
<p> Description: {{value.description}} </p>
  

4. Save the files and run the project:


As you can see, it's very easy to pass even a complex objects using above method.