Angular 5 — Creating New Component

An angular component to fetch (using HttpClient) and display a list of data

Photo by Daniel von Appen

TK This article is a part of the series — make a crud web app with angular 5.

• Angular 5 — bootstrapping
• Angular 5 — inside components
• Angular 5 — creating new component ( you are here)
• Angular 5 — routing

Changes to angular-cli.json

Before we continue, let’s make a few changes in angular-cli.json.

1. Change apps.styles to refer to styles.scss. Also rename the file styles.css in src directory to styles.scss. We want to use the Sass preprocessor for styles.
2. Change defaults.styleExt to "scss".
3. Remove the prefix property.

Components

The first component we’re going to create is the pokemon-list component.

This component just gets the data from a remote URL (super-crud-api in this case) and displays in a list.

1. Use ng generate to create a new component.

ng generate component pokemon-list

2. Let’s look into our component class PokemonListComponent.

This is how it looks now:

Other than the basic component features that we discussed in the last article, this class also implements the OnInit interface from theCore library.

Each component has a lifecycle of create, update and destroy.

Angular exposes hooks to the interface when these events occur in a component’s lifetime. These hooks can be implemented using the corresponding lifecycle hook interface from Angular’s core library.

ngOnInit is one such hook, which is declared in theOnInit interface (shown below) and is called once initially.

export interface OnInit {
  ngOnInit(): void;
}

This is equivalent to this.$onInit from angular1.x components.

We will make an API call to get Pokemon data during OnInit.

When we created the component using ng generate, the Angular CLI also imported our new component and added it in the declarations array of our AppModule.

3. Our component now needs to make an API call to fetch data from a remote server, but a component should never do that.

That’s what services are for; so the component can focus on displaying the data and passing the data to other components that need it.

Let’s create a pokemon service that will get the data for our pokemon-list component.

4. Create a new pokemon service:

ng generate service pokemon --module=app

This will generate a new PokemonService class,

and adds the above service class to the app module providers.

As we need to inject this service later into our component, the service needs to be provided in the dependency injection system. One way to do this, is to add it to our module’s providers array.

Services are decorated with an @Injectable decorator. We will look into this later.

5. Angular uses the HttpClient class to communicate with a remote server.

To use HttpClient in our service (and anywhere else in the application), we need to import HttpClientModule into AppModule.

6. Now we can inject HttpClient into the pokemon service constructor.

7. Let’s define the getPokemon method in this service, that makes an HTTP call to the super-crud api to get Pokemon data and returns a generic Observable.

• Unlike the angular 1.x $http service, which returned a promise, HttpClient returns an Observable from rxjs.
• You can subscribe to the observable to get the HTTP response data, which can be thought of as the then equivalent to promises. Of course, the way these two work is different.

8. Inject PokemonService into the PokemonListComponent constructor and call getPokemons on injected instance during OnInit.

We’ve subscribed to the returned observable and assigned returned data to a privately declared pokemonData variable. This is available for binding in the component template.

9. Update the component template pokemon-list.component.html to iterate over the returned list of Pokemons and display Pokemon names in a list.

We’re using two directives, *ngIf and *ngFor, in the template above.

• *ngIf checks for the value in the passed variable and, if found true, creates the DOM from the template. Equivalent to ng-if in Angular 1.x.
• *ngFor is a repeater directive which iterates over a list of items and provides each item with the inner block of HTML to display in the DOM. Equivalent to the ng-repeat directive in Angular 1.x.

10. Let’s update our root shell component to display the pokemon-list component.

11. Run ng serve in your terminal and open http://localhost:4200/. You should see a list of Pokemon names displayed in the view.

We have created our first component! What we want to do next, is click on each Pokemon name and see the details for that Pokemon.

let’s go ahead and create a pokemon-details component.

<prev | next>