Kalletolonen.com - Linux and coding articles

A simple Angular tutorial project

This is a documentation of a learning experience with Angular. It follows along the Hero-tutorial of Angular.io.

Kalle Tolonen
Sept. 4, 2022

Requirements

Basic HTML & JS knowledge.

Local environment setup

First I installed npm and started up my Visual Studio Code to install Angular.

sudo apt-get install npm
sudo npm install -g @angular/cli

Turns out, that I needed to install NodeJS too, so I installed that next.

sudo curl -fsSL https://deb.nodesource.com/setup_18.x |sudo  bash -
sudo apt-get install -y nodejs

After that was done, I started a new app in VSC terminal (very similar to React).

sudo ng new demo1

To test out the template, I moved to the app folder and started it.

cd demo1
ng serve

That did the trick and I had a working template on localhost.

App template testing

The component code is written in Typescript in component.ts and it’s rendered in componen.html, which is styled in component.css (or with inline css). The components can be referred to in a similar manner as HTML-templates in Jinja or Django - with curly bvraces {{ reference goes here }}.

<h1>{{ title }} is a mighty {{ title }}</h1>

I just changed an HTML componet to see how it would affect the rendered result, and it took effect.

App development

Next I created a new component.

ng generate heroes

Angular project structure
The created app manifested itself as a new directory and files

I edited heroes.component.ts, heroes.component.html and app.component.html.

#heroes.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  hero = 'Wanderer';

  constructor() { }

  ngOnInit(): void {
  }

}

#heroes.component.html

<h2>{{ hero }}</h2>

And to make things visible, the app needed a reference too.

#app.components.html

<div class="content" role="main">

  <div class="card highlight-card card-small">

    <h1>{{ title }} is a mighty {{ title }}</h1>
  </div>
  <app-heroes></app-heroes>
</div>

Next I created a new interface, ie. a “hero class” and imported it to heroes.component.ts.

#app/hero.ts

export interface Hero {
    id: number;
    name: string;
}

#heroes/heroes.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})

export class HeroesComponent implements OnInit {
  hero: Hero = {
    id: 1,
    name: 'Wanderer'
  };

  constructor() { }

  ngOnInit(): void {
  }

}

And since the hero is now an object instead of a string, I had to modify the template accordingly to display the name of the hero.

#heroes.components.html

<h2>{{ hero.name }}</h2>

The template reference is identical to Django. You can even use template filters in the same way.

<h2>{{ hero.name | uppercase }}</h2>

Asking for user input

Pretty much every piece of software requires some type of input, so that’s the next thing to get sorted.

#heroes.component.html

<div>
    <label for="name">Hero's name:</label>
    <input id="name" [(ngModel)]="hero.name" placeholder="name">
</div>

<h2>{{ hero.name | uppercase }}</h2>

Added the ngModel and imported that to app/app.module.ts.

#app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; #added this

import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';

@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  imports: [
    BrowserModule,
    FormsModule #Added this
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

That made my component able to react to user input via the input form.

Lists

Next we need some lists, so let’s make a pseudo-list in a separate file that makes use of the Hero-object.

/app/mock-heroes.ts

import { Hero } from './hero';

export const HEROES: Hero[] = [
  { id: 12, name: 'Dr. Nice' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr. IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

Next, let’s update heroes.components.ts.

#heroes.components.ts.

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})

export class HeroesComponent implements OnInit {
  hero: Hero = {
    id: 1,
    name: 'Wanderer'
  };

  heroes = HEROES;

  constructor() { }

  ngOnInit(): void {
  }

}

Iteration is way simpler compared to React.

heroes.components.html

<h2>My Heroes</h2>
<ul class="heroes">
    <li *ngFor="let hero of heroes">
        <button type="button">
            <span class="badge">{{hero.id}}</span>
            <span class="name">{{hero.name}}</span>
        </button>
    </li>
</ul>

*ngFor is a built in for-iterator.

Component level CSS

When a component is created, a style sheet is also created, so styling can be easily found for the said component.

#heroes.component.css

/* HeroesComponent's private CSS styles */
.heroes {
    margin: 0 0 2em 0;
    list-style-type: none;
    padding: 0;
    width: 15em;
}

.heroes li {
    display: flex;
}

.heroes button {
    flex: 1;
    cursor: pointer;
    position: relative;
    left: 0;
    background-color: #EEE;
    margin: .5em;
    padding: 0;
    border-radius: 4px;
    display: flex;
    align-items: stretch;
    height: 1.8em;
}

.heroes button:hover {
    color: #2c3a41;
    background-color: #e6e6e6;
    left: .1em;
}

.heroes button:active {
    background-color: #525252;
    color: #fafafa;
}

.heroes button.selected {
    background-color: black;
    color: white;
}

.heroes button.selected:hover {
    background-color: #505050;
    color: white;
}

.heroes button.selected:active {
    background-color: black;
    color: white;
}

.heroes .badge {
    display: inline-block;
    font-size: small;
    color: white;
    padding: 0.8em 0.7em 0 0.7em;
    background-color: #405061;
    line-height: 1em;
    margin-right: .8em;
    border-radius: 4px 0 0 4px;
}

.heroes .name {
    align-self: center;
}

Event listener

Listing to events, ie. when an object is clicked on, is super useful.

#heroes.component.html

<h2>My Heroes</h2>
<ul class="heroes">
    <li *ngFor="let hero of heroes">
        <button type="button" (click)="onSelect(hero)">
            <span class="badge">{{hero.id}}</span>
            <span class="name">{{hero.name}}</span>
        </button>
    </li>
</ul>

The (click) tells Angular to listen for a button click by the user, and the latter part tells what should happen (ie. in this case, a function call is made).

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})

export class HeroesComponent implements OnInit {
  hero: Hero = {
    id: 1,
    name: 'Wanderer'
  };

  heroes = HEROES;

  selectedHero?: Hero;
  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

  constructor() { }

  ngOnInit(): void {
  }

}

The new method renames (or creates a new Hero instance(?)) Hero to selectedHero. Then onSelect-function creates a new instance of Hero as it gets the hero in question as a parameter from the user.

<h2>My Heroes</h2>
<ul class="heroes">
    <li *ngFor="let hero of heroes">
        <button type="button" (click)="onSelect(hero)">
            <span class="badge">{{hero.id}}</span>
            <span class="name">{{hero.name}}</span>
        </button>
    </li>
</ul>

<div *ngIf="selectedHero">
    <h2> {{ selectedHero.name | uppercase }} Details</h2>
    <div>id: {{ selectedHero.id }}</div>
    <div>
        <label for="hero-name">Hero name: </label>
        <input id="hero-name" [(ngModel)]="selectedHero.name" placeholder="name">
    </div>
</div>

So, Angular’s built in If is called *ngIf and thus the code is executed, if a hero is selected. ngModel allows for editing the objects properties.

<h2>My Heroes</h2>
<ul class="heroes">
    <li *ngFor="let hero of heroes">
        <button [class.selected]="hero === selectedHero" type="button" (click)="onSelect(hero)">
            <span class="badge">{{hero.id}}</span>
            <span class="name">{{hero.name}}</span>
        </button>
    </li>
</ul>

<div *ngIf="selectedHero">
    <h2> {{ selectedHero.name | uppercase }} Details</h2>
    <div>id: {{ selectedHero.id }}</div>
    <div>
        <label for="hero-name">Hero name: </label>
        <input id="hero-name" [(ngModel)]="selectedHero.name" placeholder="name">
    </div>
</div>

It’s possible to bind the element to CSS with [class.cssmyclass]=“condition”. In this case a button is styled with the heroes.components.css button.selected manner if the hero equals the selected hero.

Breaking the program up to smaller components

Let’s create a separate component for “detailview” and keep the old one for “listview”.

ng generate component hero-detail

This creates a template that you can use to quickly develop your application. The command also automatically declares the component to app.module.ts, so that you don’t have to do that manually.

#hero-detail.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {

  @Input() hero?: Hero;

  constructor() { }

  ngOnInit(): void {
  }

}

The detailview component requires the hero class imported, to know what it is supposed to show.

#hero-detail.component.html

<div *ngIf="hero">

    <h2>{{hero.name | uppercase}} Details</h2>
    <div><span>id: </span>{{hero.id}}</div>
    <div>
        <label for="hero-name">Hero name: </label>
        <input id="hero-name" [(ngModel)]="hero.name" placeholder="name">
    </div>

</div>

This is just a copy of the earlier code. The component will be referenced in the list template. The modified part is the reference to hero, which used to be selectedHero and now it’s just hero. This means that the hero-detail.component.ts just displays the hero it receives from other components, ie. the onSelect-function/method in heroes.component.ts.

Adding services

In the real world, you’ll always need some other services that your code connects to, so this is the logical next step for this project.

The service isn’t generated with the “new” syntax, so that it will be injected to HeroesComponent.

ng generate service hero

This generates a template in /app/hero.service.ts.

#hero.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class HeroService {

  constructor() { }
}

Notice how the ts-document is generated with a @Injectable-decorator. This tells us that the class will take part in the injection system.

#hero.service.ts

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';

@Injectable({
  providedIn: 'root'
})

export class HeroService {

  getHeroes(): Hero[] {
    return HEROES;
  }

  constructor() { }
}

The service get’s it’s heroes from the mock-up list and also need the Hero-object class as an import. As the service is generated with the ng cli-command, it registers the service at the root level - ie. any class that asks for it will be using the same instance.

#heroes.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';


@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})

export class HeroesComponent implements OnInit {
  hero: Hero = {
    id: 1,
    name: 'Wanderer'
  };

  constructor(private heroService: HeroService) { }

  heroes: Hero[] = [] //Heroes is declared as an empty list of Hero[]-objects

  getHeroes(): void {
    this.heroes = this.heroService.getHeroes(); //As getHeroes() is called, it will get the hero list useing the heroService (hero.services.ts)
  }

  selectedHero?: Hero; //Defines that the variable must be of Hero-type?
  onSelect(hero: Hero): void {
    this.selectedHero = hero; //will replace the current hero with the one that the user clicks on
  }


  ngOnInit(): void {
    this.getHeroes(); //nGonInit is called once
  }

}

This approach uses synchronous data fetching, which isn’t feasible in real world applications as servers do not reply instantly. To do that we need to modify the service.

#hero.service.ts

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class HeroService {

  getHeroes(): Observable<Hero[]> { // Get the heroes list asynchronuosly
    const heroes = of(HEROES);
    return heroes;
  }

  constructor() { }
}

On top of this, you’ll have to modify the heroes.components.ts.

#heroes.componenents.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';


@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})

export class HeroesComponent implements OnInit {
  hero: Hero = {
    id: 1,
    name: 'Wanderer'
  };

  constructor(private heroService: HeroService) { } //A private heroservice is created by the constructor

  heroes: Hero[] = [] //Heroes is declared as an empty list of Hero[]-objects

  getHeroes(): void {
    this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes) //As getHeroes() is called, it will get the hero list useing the heroService (hero.services.ts)
    //It uses the asynchronous method of GETting stuff from the server
  }

  selectedHero?: Hero; //Defines that the variable must be of Hero-type? If not then nothing happens?
  onSelect(hero: Hero): void {
    this.selectedHero = hero; //will replace the current hero with the one that the user clicks on
  }


  ngOnInit(): void {
    this.getHeroes(); //nGonInit is called once
  }

}

Adding more components

Next up - creating a message-component to show data on the bottom of the screen.

ng generate component messages

This generates a template in /app/messages and declares the component in app.module.ts.

#app.component.html

  <app-heroes></app-heroes>
  <app-messages></app-messages>

Now that we hade a working component that renders in the browser, let’s create a service for it.

ng generate service message

#messages.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class MessageService {
  messages: string[] = [];  //initializes a list of strings as messsages

  add(message: string) {  //add-method to add a given props string to the messages list
    this.messages.push(message)
  }

  clear() {
    this.messages = []; //replaces the messages wqith an empty list
  }

}

Next, we’ll use the newly created service on our older service.

#hero.service.ts

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { Observable, of } from 'rxjs';
import { MessageService } from './message.service';

@Injectable({
  providedIn: 'root'
})

export class HeroService {

  getHeroes(): Observable<Hero[]> { // Get the heroes list asynchronuosly
    const heroes = of(HEROES);
    return heroes;
  }

  constructor(private messageService: MessageService) { } //create a new messageservice instance
}

Then we’ll show the messages with the help of message.component.ts.

#message.component.ts

import { Component, OnInit } from '@angular/core';
import { MessageService } from '../message.service';

@Component({
  selector: 'app-messages',
  templateUrl: './messages.component.html',
  styleUrls: ['./messages.component.css']
})
export class MessagesComponent implements OnInit {

  constructor(public messageService: MessageService) { }

  ngOnInit(): void {
  }

}

It has to use a public property because Angular only binds to public component properties.

Routing is important - it tells Angular what components should be loaded by links. To create a dedicated router you have to create a routing module.

ng generate module app-routing --flat --module=app

The flat-flag puts the file in src/app and the module-flag imports the module to AppModule (app.module.ts).

#app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';

const routes: Routes = [
  { path: 'heroes', component: HeroesComponent }
]; //When a request with the path 'heroes' is called, HeroesComponent is rendered

@NgModule({
  imports: [RouterModule.forRoot(routes)], //configures the routermodule for the path that's listed earlier in the array
  exports: [RouterModule] //Exports the routermodule to the whole application
})
export class AppRoutingModule { }

Next, we’ll render our navigation to the user.

#app.component.html


<div class="content" role="main">

  <div class="card highlight-card card-small">

    <h1>{{ title }} is a mighty {{ title }}</h1>
  </div>
  <router-outlet></router-outlet>
  <app-messages></app-messages>
</div>

Router-outlet is a stock router directive, because AppModu (app.module.ts) imports AppRoutingModule (app-routing.module.ts) and that exported RouterModule, which has the directive (= Method/Function(?)).

To add some more links, we need to modify the rendered html a bit.

#app.component.html


<div class="content" role="main">

  <div class="card highlight-card card-small">
    <h1>{{ title }} is a mighty {{ title }}</h1>
  </div>
  <nav>
    <a routerLink="/heroes">Heroes</a>
  </nav>
  <router-outlet></router-outlet>
  <app-messages></app-messages>
</div>

Notice how the syntax isn’t regular HTML but uses Angular directives as in “routerLink”. The routerLink is the selector in RouterLink directive, that tells the framework that a user has clicked on a link.

Adding more views

Let’s generate a new component for our app, ie. an another view.

ng generate component dashboard

This generates a new component for us and registers it to AppModule.

#dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})

export class DashboardComponent implements OnInit {
  heroes: Hero[] = []; //create a list of heroes in a variable (array)

  constructor(private heroService: HeroService) { } //Create a new heroservice as the component is called

  ngOnInit(): void {
    this.getHeroes(); //Call the function getHeroes.
  }

  getHeroes(): void { //Get the heroes asynchronuosly and slice the list
    this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes.slice(1, 5));
  }
}

And let’s iterate throught our smaller, curated list of heroes.

<h2>Top Heroes</h2>
<div class="heroes-menu">
    <a *ngFor="let hero of heroes">
        {{hero.name}}
    </a>
</div>

The thing to do to actually navigate to this new view, is to add a new route to app-routing.module.ts.

#app-reouting.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
  { path: 'heroes', component: HeroesComponent },
  { path: 'dashboard', component: DashboardComponent },

]; //When a request with the path 'heroes' is called, HeroesComponent is rendered

@NgModule({
  imports: [RouterModule.forRoot(routes)], //configures the routermodule for the path that's listed earlier in the array
  exports: [RouterModule] //Exports the routermodule to the whole application
})
export class AppRoutingModule { }

And finally render the link for the user.

#app.component.html

<div class="content" role="main">

  <div class="card highlight-card card-small">
    <h1>{{ title }}</h1>
  </div>
  <nav>
    <a routerLink="/heroes">Heroes</a>
    <a routerLink="/dashboard">Dashboard</a>
  </nav>
  <router-outlet></router-outlet>
  <app-messages></app-messages>
</div>

We can also make a decision to navigate the user to a certain page as they arrive on the site.

#app-routing.module.ts

{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },

Adding a detailview

#app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';

const routes: Routes = [
  { path: 'heroes', component: HeroesComponent },
  { path: 'dashboard', component: DashboardComponent },
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'hero/:id', component: HeroDetailComponent },

]; //When a request with the path 'heroes' is called, HeroesComponent is rendered

@NgModule({
  imports: [RouterModule.forRoot(routes)], //configures the routermodule for the path that's listed earlier in the array
  exports: [RouterModule] //Exports the routermodule to the whole application
})
export class AppRoutingModule { }

This is really similar to Django. And to make the links available to the user you ofcourse need to modify the html-template.

#dashboard.component.html

<h2>Top Heroes</h2>
<div class="heroes-menu">
    <a *ngFor="let hero of heroes" routerLink="/hero/{{ hero.id }}">
        {{ hero.name }}
    </a>
</div>

Notice again how the a href syntax is a bit off, since it uses the Angular directive instead of straight HTML.

#heroes.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';
import { MessageService } from '../message.service';


@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})

export class HeroesComponent implements OnInit {

  constructor(private heroService: HeroService, private messageService: MessageService) { } //A private heroservice is created by the constructor

  heroes: Hero[] = [] //Heroes is declared as an empty list of Hero[]-objects

  getHeroes(): void {
    this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes) //As getHeroes() is called, it will get the hero list useing the heroService (hero.services.ts)
    //It uses the asynchronous method of GETting stuff from the server
  }

  ngOnInit(): void {
    this.getHeroes(); //nGonInit is called once
  }

}

This got tidied up a bit since the old methods arent used anymore. To make a hero actually visible, we need to modify a couple of things.

#hero-detail.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {

  constructor(
    private route: ActivatedRoute, //hold the info about the route for this instance (ie. the id)
    private heroService: HeroService, //Creaates a private service for getting a hero-object
    private location: Location //This let's you navigate back to a previous page
  ) { }

  ngOnInit(): void {
    this.getHero();
  }

  getHero(): void {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.heroService.getHero(id)
      .subscribe(hero => this.hero = hero);
  }

}

This produces an error message, since our heroservice doesn’t have a method for getting individual heroes.

#hero.service.ts

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { Observable, of } from 'rxjs';
import { MessageService } from './message.service';

@Injectable({
  providedIn: 'root'
})

export class HeroService {

  getHeroes(): Observable<Hero[]> { // Get the heroes list asynchronuosly
    const heroes = of(HEROES);
    this.messageService.add('Yess! Fetched the heroes!')
    return heroes;
  }

  getHero(id: number): Observable<Hero> {
    const hero = HEROES.find(h => h.id === id)!; //Find the matching hero-object and if
    this.messageService.add(`HeroService: fetched hero id=${id}`); //add a message to messageservice
    return of(hero);
  }


  constructor(private messageService: MessageService) { } //create a new messageservice instance
}

Next, let’s add a back button.

#hero-detail.component.html

<button type="button" (click)="goBack()">go back</button>

#hero-detail.component.ts

  goBack(): void {
    this.location.back();
  }

Take note that Angular’s compiler doen’t actually let you render the html without the function/method and it doen’t give a meaningful error message. So the correct order to do this would be to first create an empty method and the call it from the template to keep development in as small of a iterations as possible.

Getting data from a server

Angular has an inhuild tool for communicating with a server, and it’s called HttpClient.

#app.module.ts

import { HttpClientModule } from '@angular/common/http';

imports: [
    HttpClientModule
  ],

Next we’ll fake a server with In-Memory web API.

sudo npm install angular-in-memory-web-api --save

#app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { MessagesComponent } from './messages/messages.component';
import { AppRoutingModule } from './app-routing.module';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HttpClientModule } from '@angular/common/http';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';

@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent,
    HeroDetailComponent,
    MessagesComponent,
    DashboardComponent,

  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule,

    // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
    // and returns simulated server responses.
    // Remove it when a real server is ready to receive requests.
    HttpClientInMemoryWebApiModule.forRoot(
      InMemoryDataService, { dataEncapsulation: false }
    )
  ],
  providers: [],
  bootstrap: [AppComponent]


})
export class AppModule { }

ng generate service InMemoryData

Notice how the new service is named: in-memory-data.services.ts.

#in-memory-data.service.ts

import { TestBed } from '@angular/core/testing';

import { InMemoryDataService } from './in-memory-data.service';

describe('InMemoryDataService', () => {
  let service: InMemoryDataService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(InMemoryDataService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });
});

Let’s import & implement our new service to our earlier component.

#hero.service.ts

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { Observable, of } from 'rxjs';
import { MessageService } from './message.service';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class HeroService {

  /** GET heroes from the server */
  getHeroes(): Observable<Hero[]> {
    return this.http.get<Hero[]>(this.heroesUrl)
  }

  getHero(id: number): Observable<Hero> {
    const hero = HEROES.find(h => h.id === id)!; //Find the matching hero-object and if
    this.messageService.add(`HeroService: fetched hero id=${id}`); //add a message to messageservice
    return of(hero);
  }

  private heroesUrl = 'api/heroes';  // URL to web api
  private log(message: string) {
    this.messageService.add(`HeroService: ${message}`);
  }

  constructor(
    private messageService: MessageService, //create a new messageservice instance
    private http: HttpClient) { }
}

Handling errors

To make our code a bit more robust, we modify just about everything.

#hero.service.ts

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { Observable, of } from 'rxjs';
import { MessageService } from './message.service';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})

export class HeroService {

  /** GET heroes from the server */
  /** GET heroes from the server */
  getHeroes(): Observable<Hero[]> {
    return this.http.get<Hero[]>(this.heroesUrl)
      .pipe(
        tap(_ => this.log('fetched heroes')),
        catchError(this.handleError<Hero[]>('getHeroes', []))
      );
  }

  /** GET hero by id. Will 404 if id not found */
  getHero(id: number): Observable<Hero> {
    const url = `${this.heroesUrl}/${id}`;
    return this.http.get<Hero>(url).pipe(
      tap(_ => this.log(`fetched hero id=${id}`)),
      catchError(this.handleError<Hero>(`getHero id=${id}`))
    );
  }

  private heroesUrl = 'api/heroes';  // URL to web api
  private log(message: string) {
    this.messageService.add(`HeroService: ${message}`);
  }

  /**
 * Handle Http operation that failed.
 * Let the app continue.
 *
 * @param operation - name of the operation that failed
 * @param result - optional value to return as the observable result
 */
  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // TODO: better job of transforming error for user consumption
      this.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }

  constructor(
    private messageService: MessageService, //create a new messageservice instance
    private http: HttpClient) { }
}

Updating stuff on the server

First we need a button to call a method.

#hero-detail.component.html

<button type="button" (click)="save()">Save</button>

And then, we deal with the not-as-good-as-Django error msg’s, as the framework is unable to determine that the error is not in the template, but in the Typescript code that doesn’t have the method the template is asking for.

Error occurs in the template of component HeroDetailComponent.
✖ Failed to compile.

#hero-detail.component.ts

save(): void {
  if (this.hero) {
    this.heroService.updateHero(this.hero)
      .subscribe(() => this.goBack());
  }
}

Error: src/app/hero-detail/hero-detail.component.ts:38:24 - error TS2339: Property 'updateHero' does not exist on type 'HeroService'.

38       this.heroService.updateHero(this.hero)

This is actually highly useful, since it’s tells us that we don’t have the method operational that we’re calling to.

#hero.service.ts

httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

/** PUT: update the hero on the server */
updateHero(hero: Hero): Observable<any> {
  return this.http.put(this.heroesUrl, hero, this.httpOptions).pipe(
    tap(_ => this.log(`updated hero id=${hero.id}`)),
    catchError(this.handleError<any>('updateHero'))
  );
}

That was updateview in Django terms done.

Createview

heroes.component.html

<div>
  <label for="new-hero">Hero name: </label>
  <input id="new-hero" #heroName />

  <!-- (click) passes input value to add() and then clears the input -->
  <button type="button" class="add-button" (click)="add(heroName.value); heroName.value=''">
    Add hero
  </button>
</div>

The error message guides us along:


Error: src/app/heroes/heroes.component.html:14:55 - error TS2339: Property 'add' does not exist on type 'HeroesComponent'.

14     <button type="button" class="add-button" (click)="add(heroName.value); heroName.value=''">
                                                         ~~~

  src/app/heroes/heroes.component.ts:9:16
    9   templateUrl: './heroes.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeroesComponent.




✖ Failed to compile.

It tells us that there isn’t a method the template is trying to call.

#heroes.component.ts

add(name: string): void {
  name = name.trim();
  if (!name) { return; }
  this.heroService.addHero({ name } as Hero)
    .subscribe(hero => {
      this.heroes.push(hero);
    });
}

Again, the error message tells us that there is no such component in heroService as addHero.

Error: src/app/heroes/heroes.component.ts:28:22 - error TS2339: Property 'addHero' does not exist on type 'HeroService'.

28     this.heroService.addHero({ name } as Hero)
                        ~~~~~~~


Error: src/app/heroes/heroes.component.ts:29:18 - error TS7006: Parameter 'hero' implicitly has an 'any' type.

29       .subscribe(hero => {
                    ~~~~




** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✖ Failed to compile.

Let’s add the method to our HeroService.

#hero.service.ts

/** POST: add a new hero to the server */
addHero(hero: Hero): Observable<Hero> {
  return this.http.post<Hero>(this.heroesUrl, hero, this.httpOptions).pipe(
    tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),
    catchError(this.handleError<Hero>('addHero'))
  );
}

This uses a POST-method instead of put.

Deleteview

As a final part of the CRUD (Create Read Update Delete) saga, we’ll create the method for deletion.


<button type="button" class="delete" title="delete hero"
  (click)="delete(hero)">x</button>

After this we do the method in our typescript class.

#heroes.component.ts

delete(hero: Hero): void {
  this.heroes = this.heroes.filter(h => h !== hero);
  this.heroService.deleteHero(hero.id).subscribe();
}

And finish it off with modifications to our DAO (Database Access Object) or service.ts.

#hero.service.ts

/** DELETE: delete the hero from the server */
deleteHero(id: number): Observable<Hero> {
  const url = `${this.heroesUrl}/${id}`;

  return this.http.delete<Hero>(url, this.httpOptions).pipe(
    tap(_ => this.log(`deleted hero id=${id}`)),
    catchError(this.handleError<Hero>('deleteHero'))
  );
}

Search functionality

Let’s implement search next. That uses the GET-method of HTTP.

#hero.service.ts

/* GET heroes whose name contains search term */
searchHeroes(term: string): Observable<Hero[]> {
  if (!term.trim()) {
    // if not search term, return empty hero array.
    return of([]);
  }
  return this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`).pipe(
    tap(x => x.length ?
       this.log(`found heroes matching "${term}"`) :
       this.log(`no heroes matching "${term}"`)),
    catchError(this.handleError<Hero[]>('searchHeroes', []))
  );
}

#dashboard.component.html

<app-hero-search></app-hero-search>

That produces an error message, so we need to add the component for it.

Error: src/app/dashboard/dashboard.component.html:8:1 - error NG8001: 'app-hero-search' is not a known element:
1. If 'app-hero-search' is an Angular component, then verify that it is part of this module.
2. If 'app-hero-search' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

8 <app-hero-search></app-hero-search>
  ~~~~~~~~~~~~~~~~~

  src/app/dashboard/dashboard.component.ts:7:16
    7   templateUrl: './dashboard.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component DashboardComponent.

This generates the template for our search and thus solves the error message. Let’s modify the template a bit.

#hero-search.component.ts

<div id="search-component">
  <label for="search-box">Hero Search</label>
  <input #searchBox id="search-box" (input)="search(searchBox.value)" />

  <ul class="search-result">
    <li *ngFor="let hero of heroes$ | async" >
      <a routerLink="/detail/{{hero.id}}">
        {{hero.name}}
      </a>
    </li>
  </ul>
</div>

Notice how the syntax differs from straight html - the input form has a hashtag. This will once again produce an error message, since we don’t yet have the search-method done in hero-search.component.ts. The $-sign indicates that heroes is of Observable-type, not an array. *ngFor can’t handle Obervable-objects, so async is called in a pipe command to handle it.

Error: src/app/hero-search/hero-search.component.html:3:48 - error TS2339: Property 'search' does not exist on type 'HeroSearchComponent'.

3     <input #searchBox id="search-box" (input)="search(searchBox.value)" />
                                                 ~~~~~~

  src/app/hero-search/hero-search.component.ts:5:16
    5   templateUrl: './hero-search.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeroSearchComponent.


Error: src/app/hero-search/hero-search.component.html:6:33 - error TS2339: Property 'heroes$' does not exist on type 'HeroSearchComponent'.

6         <li *ngFor="let hero of heroes$ | async">
                                  ~~~~~~~

  src/app/hero-search/hero-search.component.ts:5:16
    5   templateUrl: './hero-search.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HeroSearchComponent.