Angular @cheatsheet
Angular is a platform for building mobile and desktop web applications.

Table of Contents

Shell commands

Command Description
ng new <name> Creates a new angular project
ng serve --open builds the app, starts the server, watches the src files at port 4200
ng generate component <name> Generates a new component
ng generate service <name> Creates a new service.
ng generate module <app-routing> --flat --module=app creates a new rout


A module is a collection of services, it's the building block of an application. Each application has at least one root module, and it's by default defined in the app.module.ts

Modules can have multiple components and services


ng generate component

Components are responsible for displaying data on the screen, listening for user input and taking action based on that input. It defines a part of your application.

A component consists of a view and a class where the view defines the look of the component (HTML), and the class defines the behaviour (TypeScript)

  • The component defined in the router are loaded in to a special placeholder:


Every app has at least one component (the root component), generally the app.component. files


Services are a great way to share information among classes that don't know each other.

They objects that are wired together using dependency injection, they allow easy reuse of parts of the application logic across multiple applications.

Normally the components are not supposed to be in charge of fetching the data and saving the data, only for connection the presentation layer.


This marks the class as one that participates int he dependency injection system. It accepts a metadata object for the service, the same way the @Component decorator did.



Different than a constructor, it's a cycle hook called by Angular to indicate that it's done creating the component. It's a good place to put initialization logic.

It gets called on the first data change


Not available by default, we need to import the FormsModule module

imports: [

Two-way data binding syntax, it binds the property to the HTML textbox so that data can flow in both directions: from the property to the checkbox, and from the textbos back to the


*ngFor is a repeater directive, it repeats the host element for each element in a list.


Listens for a click event.


*ngIf hides empty details.


[class.selected] is an angular binding that makes it easy to add a CSS class. Just type [class.some-css-class]="some-condition" to the elemtn you want to style.

@Input() decorator

To bind an external component such as:

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

It's necessary to bind the property to the @Input decorator like so:

@Input() hero: Hero;


An Observable allows to pass zero or more events where the callback is called for each event.

It's basically a Promise with more features

Observable has the advantage over Promise to be cancelable, it provides all the operators a Promise uses, and others like retry() and replay() that are quite handy.

Subscriber function

We define a subscribe function – it's executed when the customer calls the subscriber() method.

const locations = new Observable(observer => {
    // get the next error callbacks.
    const { next, error } = observer;
    let watchId;

    // geolocation API
    if ('geolocation' in navigator)
        watchId = navigator.geolocation.watchPosition(next, error);
        error('Geolocation not available');

    // clean up data when unsubscribe() is called
    return { unsubscribe() { navigator.geolocation.clearWatch(watchId) } };

Call subscribe() and starts listening for updates. It's the equivalent of the then operator.

const locationSubscription = locations.subscribe({
    next(position) { console.log(position); }
    error(msg) { console.log(msg); }

// stop listening for location after 10 seconds

setTimeout(() => locationSubscription.unsubscribe(), 1000);


ng generate module <name> --flat --module=<name>

  1. path: string that matches the URL in the browser address bar.
  2. component: the component that the router should create when navigation to this route.

routerLink="/path/" denotes a router path, .eg:

<a routerLink="/detail/{{}}">{{}}</a>


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

Date: 2021-09-11 sáb 00:00

Author: Bruno Coimbra (b-coimbra)

Created: 2021-10-13 qua 13:35