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 2 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.

Update event.component.html with the following code:

event.component.html

<ng-content></ng-content>

Add some data in between <app-event></app-event> tags in 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>

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`)

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

event.component.ts

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

Define new @Input() variable within EventComponent class:

event.component.ts

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

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

event.component.html

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

Parent component (`App Component`)

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>

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 als use @Input to pass more complex structure.

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

3. Passing complex objects

Add 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"
                    };
                }

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>

Update the Event template:

event.component.html

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