Tutorial - Tour of Heroes

Created: Introduction to Angular Basics

Updated: 03 September 2023

Setup

Angular CLI

Before you can start developing angular applications you need to install the Angular CLI:

Terminal window
1
yarn global add @angular/cli

To view the CLI functionality you can use:

Terminal window
1
ng help

App Initialization

Create a new app with:

Terminal window
1
ng new my-app-name

And then start the app with:

Terminal window
1
cd my-app-name
2
yarn start

You can then open the application on localhost:4200

The App

Starter Files

The Angular applcation that’s generated will be found in the src directory with end-to-end tests in the e2e directory

Angular applications are made of different components, the app directory contains the app component which is the main shell of the angular application and consists of the following:

  1. app.component.ts - class
  2. app.component.html - template
  3. app.component.css - styles

The class file contains a property in the class for the title property:

app.component.ts

1
title = 'Tour of Heroes'

Which we can then rendered in the template by replacing its contents with:

1
<h1>{{title}}</h1>

The above makes use of the {{title}} notation to render the value of the class’ title property

Additionally, the styles.css file contains global styles which will apply to every component

Components

To generate a new component you can use the ng generate component command:

Terminal window
1
ng generate component

Which will then ask you for a component name. Once the generation is complete it will generate the class, template, and style files for the component as well as add it to the app.module.ts file

The command will also generate a selector property to refer to the component in CSS for the @Component decorator function, this also matches the name to be used for the component’s html template from other components

The ngOnInit lifecycle hook is also added, this is what’s used to run any initialization logic and is run after the component is created by Angular

The generated class looks like this:

heroes.component.ts

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


3
@Component({
4
  selector: 'app-heroes',
5
  templateUrl: './heroes.component.html',
6
  styleUrls: ['./heroes.component.css'],
7
})
8
export class HeroesComponent implements OnInit {
9
  constructor() {}
10


11
  ngOnInit(): void {}
12
}

We can then use this from the app component like so:

app.component.html

1
<h1>{{title}}</h1>
2
<app-heroes></app-heroes>

Interfaces

You can generate an interface with:

Terminal window
1
ng generate interface

And then inputting the interface name will generate the interface. Thereafter you can just add properties to the interface as you normally would:

app/hero.ts

1
export interface Hero {
2
  id: number
3
  name: string
4
}

You can then refer to it in the class like so:

1
hero: Hero = {
2
  id: 1,
3
  name: 'Jeff',
4
}

And in a template like so:

1
<div><span>id: </span>{{hero.id}}</div>
2
<div><span>name: </span>{{hero.name}}</div>

Modules

The Modules are how Angular understands how an application fits together and this allows us to provide some metadata about how an Angular app fits together and what dependencies it has. The top-level AppModule is decorated with NgModule

Furthermode, we can opt-in to other modules from the module file. For example, we can use the FormsModule as follows:

app.module.ts

1
import { FormsModule } from '@angular/forms';
2


3
// ...
4


5
imports: [
6
  BrowserModule,
7
  FormsModule,
8
],

We can the use the FormModule for two-way data binding using an input in the heroes.component.html file:

heroes.component.html

1
<div>
2
  <label
3
    >name:
4
    <input [(ngModel)]="hero.name" placeholder="name" />
5
  </label>
6
</div>

Which binds the hero.name property between the template and class so that changes on one will reflect on the other. So updating the data in the input will update our class state as well as any other template references

Bindings

Loops

To render a list of elements you can use *ngFor. So to render a list of heroes you can do the following:

heroes.component.html

1
<li *ngFor="let hero of heroes">
2
  <span class="badge">{{hero.id}}</span> {{hero.name}}
3
</li>

Events

You can bind to click events using the click binding with an expression to evaluate on click

heroes.component.html

1
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
2
  <span class="badge">{{hero.id}}</span> {{hero.name}}
3
</li>

And then implementing a handler in the template:

heroes.component.ts

1
  onSelect(hero: Hero) {
2
    this.selectedHerp = hero
3
  }

Conditionals

You can make use of conditionals with the *ngIf to selectively render a part of the template