Angular 5 — creating new component

Photo by Daniel von Appen

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


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 sass preprocessor for styles.
  2. change defaults.styleExt to "scss". details here.
  3. get rid of prefix property. see details here.

ok, let’s component.

the first component that we are going to create is 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

here is how it looks now —

other than the basic component features that we discussed in last article, this class is also implementing OnInit interface from Core library.

each component has a lifecycle of create, update and destroy. angular exposes hooks to interfare when these events occur in a component’s lifetime. these hooks can be implemented using corresponding lifecycle hook interface from angular core library.

ngOnInit is one such hook, which is declared in OnInit 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, angular cli also imported our new component and added it in declarations array of our AppModule.

...
import { PokemonListComponent } from './pokemon-list/pokemon-list.component';
...
@NgModule({
  declarations: [
    ...
    PokemonListComponent

...
  ]
})

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 just 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 new pokemon service —

ng generate service pokemon --module=app

this will generate a new PokemonService class,

and add above service class to app module providers.

since 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 this to our module’s providers array.

services are decorated with @Injectable decorator. we will look more into this later.

5. angular uses 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 in AppModule.

6. now, we can inject HttpClient in pokemon service constructor

7. let’s define getPokemon method in this service that makes an http call to super-crud api to get pokemon data and returns a generic Observable.

  • unlike 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 then equivalent from promises. of course the way these two work are different.

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

we have 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 component template pokemon-list.component.html to iterate over the returned list of pokemons and display pokemon names in a list.

we are using two directives *ngIf and *ngFor in above template.

  • *ngIf checks for the value in 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 that iterates over a list of items and provides each item to the inner block of html to display in dom. equivalent to ng-repeat directive in angular 1.x

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

11. run ng serve in terminal and open http://localhost:4200/. you should see a list of pokemon names displayed in the view.

yey, we have created our first component. what we want next is to click on each pokemon name and see details for that pokemon.

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

<prev | next>