in ,

Angular2 @Input Examples

In taking Vasco’s Udemy Course on Angular2 & Firebase, I worked through a tutorial project of pulling in data from a Firebase database.  The lessons were rendered to the view like so:

<table class="table lessons-list card card-strong">
  <tbody>
  <tr *ngFor="let lesson of lessons">
    <td class="lesson-title">{{lesson?.description}}</td>
    <td class="duration">
      <i class="md-icon duration-icon">access_time</i>
      <span>{{lesson?.duration}}</span>
    </td>
  </tr>
  </tbody>
</table>

The Component for this view looks like so:

import { Component, OnInit } from '@angular/core';
import { LessonsService } from "../shared/model/lessons.service";
import { Lesson } from "../shared/model/lesson";

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  lessons: Lesson[];
  constructor(private lessonsService: LessonsService) { }

  ngOnInit() {
    this.lessonsService.findAllLessons()
        .do(console.log)
        .subscribe(
        lessons => this.lessons= lessons
    );
  }

}

This renders out a list from the Firebase db like so:

screen-shot-2016-11-25-at-4-11-58-pm

While functional, it can be refactored a bit.  Vasco goes on to suggest using a new component to manage the list itself.  This brings up a really cool way of developing here….

What we did first was make a prototype and just get this working. Then we refactored the code to roll in the list functionality into a new component (lessons-list component.)

The Refactor

Rather than have the home component’s html rendering the list itself, the list was pulled into a new component that was generated:

ng g component lessons-list

This gives us the Typescript file and the HTML used for the lessons list.

The Table used to display the results is pulled off the home component and added to the lessons-list component.  A reference to the this new component is put where the table used to be…

Example:

Home Component:

<div class="lessons-list-container v-h-center-block-parent">
  <lessons-list [lessons]="lessons"></lessons-list>
</div>

This reference is a bit different from the simple embedded tags.  The square brackets is a reference to an input on the Lessons List Component.  When you see parenthesis (instead of square brackets) that’s an output.  In this case, we’re saying:

  • Grab the “lessons” from the home controller (which makes a call to a service to get a list of objects from the database)
  • Pass that list of objects into [lessons], which is listening for input on the lessons-list component

Lessons List Component:

import {Component, OnInit, Input} from '@angular/core';
import {Lesson} from "../shared/model/lesson";
@Component({
  selector: 'lessons-list',
  templateUrl: './lessons-list.component.html',
  styleUrls: ['./lessons-list.component.css']
})
export class LessonsListComponent implements OnInit {

  @Input()
  lessons: Lesson[];

  constructor() { }

  ngOnInit() {
  }

}

This component is simple – it simply has an annotation for @Input and below that we’ve defined lessons of the Model Lesson, as a list [].  Basically saying that lessons in this component will be expecting a List.

Lesson List HTML

The view for the Lesson List Component is the table that used to be on the Home Component:

<table class="table lessons-list card card-strong">
  <tbody>
  <tr *ngFor="let lesson of lessons">
    <td class="lesson-title">{{lesson?.description}}</td>
    <td class="duration">
      <i class="md-icon duration-icon">access_time</i>
      <span>{{lesson?.duration}}</span>
    </td>
  </tr>
  </tbody>
</table>

That’s it.  Now we have a component dedicated to managing the list of lessons.  Its reference is used on the Home Component, with a flag to pass the list retrieved from the database as an Input to the new list component.

What do you think?

0 points
Upvote Downvote

Total votes: 0

Upvotes: 0

Upvotes percentage: 0.000000%

Downvotes: 0

Downvotes percentage: 0.000000%

Written by Admin

I work for a Telecom company writing and testing software. My passion for writing code is expressed through this blog. It's my hope that it gives hope to any and all who are self-taught.

Comments

Leave a Reply

Loading…

Calling Length on Object Arrays in Angular2

Angular2 – Dynamic Search Boxes