Passing data to components

web
mobile

Author: Dawid Adach

-

Streaming now live

HTML, CSS - free educational webinar for your quarantaine.

WATCH NOW

Free live lesson

Learn HTML, CSS & JavaScript fundamentals. Join now, and don't miss the livestream.

JOIN NOW

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:
  2. 
    <ng-content></ng-content>
    	  
  3. Add some data in between the <app-event></app-event> tags in the 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 the 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 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
  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 run the project:
  8. Passing complex objects

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


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