Angular Essentials

Module 1: Essentials

Introduction

What you should know before?

Why Angular?

Basics of TypeScript

Decorator

@Component()

Decorator

Indicator

Decorator

Name

Decorator

Argument

Strong types

id: number;
title: string;
list: [];

Implements

class AClass {
    aMethod() {}
}

class BClass implements AClass {    
    aMethod() {...}

    bMethod() {...}
}

Architecture

Component, Bootstrap and DOM

Component

Bootstrap

Component, Bootstrap and DOM

<h1>{{ title }}</h1>
<div>
    <input #item>
    <button (click)="onSave(item.value)">Save</button>
</div>
<list [items]="items"></list>

Directives

Component
Structural Directive: ngIf, ngFor and ngSwitch
Attribute Directive

Pipes |

<p>{{ 'gomel' | uppercase}}</p>

GOMEL

Data binding

[ ]

( )

[()]

bind-

on-

bindon-

Dependency Injection

import { FakeService } from './fake.service.ts';

class AComponent {

    constructor(private service: FakeService) {
        this.service.login();
    }
}

Service

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

@Injectable()
class FakeService {

    constructor() {}

    login() {...}
}

Routing

Router config

Router links

Router outlets

Router events

Naming

app.module.ts

app.component.ts
app.component.css
app.component.html

app.directive.ts

app.service.ts

app.routing.ts

app.pipe.ts

Training overview

NgModule

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

@NgModule({
    declarations: [...],
    imports: [...],
    exports: [...],
    providers: [...],
    bootstrap: [...]
})
export class AppModule {}

Root Component

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

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello!</h1>
  `
})
export class AppComponent {}

app.component.ts

Root Module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule ],
    bootstrap: [ AppComponent ]
})
export class AppModule {}

app.module.ts

Bootstrapping the module for the browser

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule)

main.ts

Component metadata

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

@Component({
    selector: 'my-app',
    providers: [],
    template: `<h1>Hello World!</h1>`,
    styles: [],
    viewProviders: [],
    moduleId: module.id
})
export class AppComponent {}

The component selector

# Element
selector: 'my-app' // <my-app></my-app>

# Attribute
selector: '[highlight]' // <div highlight></div>

# Class
selector: '.cool' // <div class="cool"></div>

# Not
selector: '.cool:not(div)' //<section class="cool"></section>

The component template

# Template

template: '<h1>Hi!</h1>'

# With Backstick

template: `
    <div>
        <input value="Name" type="text">
    </div>
`

# TemplateUrl

templateUrl: './app.component.html'

Styling component

# Styles

styles: ['.primary-color{ color: red }']

# With Backstick

styles: [`
    .primary-color {
        color: red;
    }    
`]

# StyleUrls

styleUrls: ['./app.component.css', ...]

Using other components in a component

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

@Component({
  selector: 'my-footer',
  template: `
    <div>
      <h2>Bye!</h2>
    </div>
  `
})
export class FooterComponent {
}

Angular template syntax

Interpolation
Binding
Expressions
Conditional templating
Template reference variables
Template expression operators |, ?

Interpolation {{ }}

<p>{{ 10 + 5 }}</p> // 15

Nonsupported in {{ }}

Assignments
Newing up variable
Chaining expressions
Incrementing/Decrementing

Property Binding [ ]

<p>{{ name }}</p> // Angular! v4.0.1

<p [textContent]="name"></p> // Angular! v4.0.1

<img [src]="image">

Event Binding ( )

<button (click)="onClick()">Click</button>

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

@Component({
  selector: 'my-item',
  template: `
    <button (click)="onDelete()">Delete</button>
  `
})
export class MyItemComponent {

  constructor() {}

  onDelete() {
    console.log('Deleted');
  }
}

Getting data to the component with Input

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

@Component({
  selector: 'my-item',
  template: `
    <div>{{ item }}</div>
  `
})
export class MyItemComponent {
  @Input item;

  constructor() {}
}

<my-item [item]="..."></my-item>

Subscribing to component events with Output

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'my-item',
  template: `
    <div>{{ item }}</div>
    <button (click)="onDelete()">Delete</button>
  `
})
export class MyItemComponent {
  @Input() item;
  @Output() delete = new EventEmitter();

  constructor() {}

  onDelete() {
    this.delete.emit(this.item);
  }
}

<my-item
    [item]="appItem"
    (delete)="onDeleteCatch($event)">
</my-item>