Angular components: passing data

In the last story you learned how to create and use a new component. Now it’s time to learn how to pass data into components and re-use them multiple times with different data.

Photo by Esteban Lopez on Unsplash

How to pass data into components

So fire up the application, open src/app/app.component.ts, and update its template to host not 1 but 3 ng4d-greeting-card component selectors.

template: `
  <ng4d-greeting-card></ng4d-greeting-card>
  <ng4d-greeting-card></ng4d-greeting-card>
  <ng4d-greeting-card></ng4d-greeting-card>
`

Now, something a bit more interesting: pass two input properties to each component:

template: `
  <ng4d-greeting-card name="William" age="41"></ng4d-greeting-card>
  <ng4d-greeting-card name="Mickey" age="90"></ng4d-greeting-card>
  <ng4d-greeting-card name="Donald" age="85"></ng4d-greeting-card>
`

Just like HTML, easy as that.
Well, we need to actually define and use those two properties in the receiving component before it all starts to work again!

Defining Inputs

name and age are two of what Angular calls Input, and you need to define them: open src/app/greeting-card/greeting-card.component.ts and update it like this:

Woo hoo reusing components!

Tidying up

Let’s apply a little bit of best practices here — this will also come in handy in the next story where we’ll be getting our data from a service instead of having some strings hardwired inside the parent component.

• Create a new folder: src/persons
• Create a new file: src/persons/person.model.ts
• This new model is nothing more than a simple TypeScript class:

export class Person {
  name: string;
  age: number;
  // Not strictly necessary, but nice to have in most use cases
  constructor(model: Person) {
    this.name = model && model.name;
    this.age = model && model.age;
  }
}

• Use the new Person model in src/app/app.component.ts

import { Component } from '@angular/core';
// App Models
import { Person } from './persons/person.model';
@Component({
  selector: 'ng4d-root',
  template: `
    <ng4d-greeting-card [person]="person1"></ng4d-greeting-card
    <ng4d-greeting-card [person]="person2"></ng4d-greeting-card
    <ng4d-greeting-card [person]="person3"></ng4d-greeting-card>
  `,
  styles: [],
})
export class AppComponent {
  person1 = new Person({ name: 'William', age: 41 });
  person2 = new Person({ name: 'Mickey', age: 90 });
  person3 = new Person({ name: 'Donald', age: 85 });
}

• Finally, update src/app/greeting-card/greeting-card.component.ts for the new single person input:

// Other stuff
// App Models
import { Person } from '../persons/person.model';
@Component({
  // Other stuff
  template: `
    <article>
      <h1>Hello, I'm {{ person.name }}!</h1>
      <p>And I'm a {{ person.age }} years old dad.</p>
    </article>
  `,
  // Other stuff
})
export class GreetingCardComponent {
  @Input() person: Person;
}

Same as before

Wrapping up

So this is how you:

• Pass data into components
• Use the supplied data inside components
• Model the first simple bits of the data layer of your application

Next time, I’ll show you how to:

• Cycle through an array of persons and re-use the same portion of template to display our greeting cards.
• Get data from a service

Previous: Angular components: an intro

Next: Getting data from a service