angular.org

Angular @cheatsheet

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

Modules

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

Components

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:

  <router-outlet></router-outlet>
      

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

Services

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.

@Injectable()

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.

Miscs

ngOnInit()

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

[(ngModel)]=”hero.name”

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

imports: [
    FormsModule
],

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

*ngFor

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

(click)=”event(movie)”

Listens for a click event.

*ngIf=”property”

*ngIf hides empty details.

[class.selected]=”condition”

[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;

Observables

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);
    else
        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);

Routing

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/{{hero.id}}">{{hero.name}}</a>

Http

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