Getting data from a service

Separation of concerns is crucial for a healthy application, and having a data layer made of services that get data from a source and pass data to components is a practice you definitely want to get used to.

Photo by Todd Quackenbush on Unsplash

So now that we know how to pass data into components, let’s see how to get that data from a service.

Creating and registering PersonsService

Creating

• Create a new file: src/app/persons/persons.service.ts
• Open it in VSCode and start typing a-service: the snippet selection menu should pop up. Choose the basic version: a-service.

import { Injectable } from '@angular/core';
@Injectable()
export class PersonsService {}

Registering

Angular services need to be registered in a module.

So let’s create a new feature module, PersonsModule, and register our new PersonsService into it.

• Create src/persons/persons.module.ts
• Add PersonsService to its providers array:

import { NgModule } from '@angular/core';
// App Services
import { PersonsService } from './persons.service';
@NgModule({
  providers: [PersonsService],
})
export class PersonsModule {}

• Let AppModule know PersonsModule exists:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// App Components
import { AppComponent } from './app.component';
import { GreetingCardComponent } from './greeting-card/greeting-card.component';
// App Modules
import { PersonsModule } from './persons/persons.module';
@NgModule({
  declarations: [AppComponent, GreetingCardComponent],
  imports: [BrowserModule, PersonsModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Getting data from PersonsService

• Update PersonsService to make it expose a method to get data:

import { Injectable } from '@angular/core';
// App Models
import { Person } from './person.model';
@Injectable()
export class PersonsService {
  // In the future, this will fetch data from a REST endpoint
  getPersons(): Person[] {
    const persons: Person[] = [
      new Person({ name: 'William', age: 41 }),
      new Person({ name: 'Mickey', age: 90 }),
      new Person({ name: 'Donald', age: 85 }),
    ];
    return persons;
  }
}

• Update AppComponent to use the new PersonsService

import { Component } from '@angular/core';
// App Models
import { Person } from './persons/person.model';
// App Services
import { PersonsService } from './persons/persons.service';
@Component({
  selector: 'ng4d-root',
  template: `
    <ng4d-greeting-card *ngFor="let person of persons" [person]="person"></ng4d-greeting-card>
  `,
})
export class AppComponent {
  persons: Person[];
  constructor(private personsService: PersonsService) {
    this.persons = this.personsService.getPersons();
  }
}

As you may have noticed, we are using *ngFor to cycle through the persons array and print a ng4d-greeting-card component for each iteration.

Wrapping up

You just learned how to:

• Create and register a service.
• Start organizing the codebase of your Angular applications into features (src/app/persons is a “feature”), each with its own module.
• Inject a service into a component and get data from it.

Things are starting to get more interesting, but the best is yet to come.

In the next story, we will make our acquaintance with RxJS and Observables, and we’ll learn how to easily fetch data from a REST API.

Previous: Angular components: passing data

Next: Feeding data from a REST endpoint to Angular components