Passing data to components

Author: Dawid Adach

-

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.

  1. Update event.component.html with the following code:
  2. 
    <ng-content></ng-content>
    	  
  3. Add some data in between <app-event></app-event> tags in app.component.html file:
  4. 
    <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>
    	  
  5. Save the file and run the app
  6. ng-content

    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)
  2. 
    import {Component, Input} from '@angular/core';
    	  
  3. Define new @Input() variable within EventComponent class:
  4. 
    export class EventComponent {
      @Input() value: any;
    }	  
  5. Update the component template (event.component.html) to display our value variable:
  6. 
    <p>{{ value }}</p>
      

Parent component (App Component)

  1. Update the App template (app.component.html):
  2. 
    <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>
      
  3. Save the files and run the project
  4. Preview

    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.

    
          [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

  1. Add initial event object to the app.component.ts
  2. 
    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"
        };
    }
    
      
  3. Update the App template:
  4. 
    <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>
      
  5. Update the Event template:
  6. 
    <h1> {{value.time}} : {{value.location}} </h1> 
    <p> Location: {{value.location}} </p>
    <p> Description: {{value.description}} </p>
      
  7. Save the files and rune the project:
  8. Passing complex objects

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


Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...