<!-- Interpolation -->
<h1>{{introduction.firstname}}</h1>

<!-- One way binding -->
<h1 [innerText]="introduction.firstname"></h1>
<span [style.backgroundColor]="introduction.favouriteColor"></span>

<!-- Two way binding -->
<input [(ngModel)]="introduction.firstname"/>

<!-- Event binding -->
<button (click)="sendForm()">Send</button>

<input type="text" value="foo"> <!-- attributs value et type -->

Le navigateur interprète cette balise et crée un objet node en mémoire :

input:
  ...
  value: "foo" // <-- propriétés value et type
  type: "text"
  ...

<div [style.width.px]="size"></div>

<td [attr.colspan]="5*5">cell</td>

<div [class.isSpecial]="isSpecial">Special class</div>

<div [style.color]="isSpecial ? 'red' : 'green'">Special class</div>

import {Directive, ElementRef, Input, OnInit, Renderer2} from '@angular/core';

@Directive({
  selector: '[custumDirective]'
})
export class custumDirective implements OnInit {

  constructor(private el: ElementRef,  private renderer: Renderer2) {
  }

  ngOnInit() {
    this.renderer.addClass(this.el.nativeElement, 'wild');
  }

}

<app-component>
  Hello world...
</app-component>

import {ModuleWithProviders} from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {IntroductionComponent} from "./introduction/introduction.component";
import {SkillsComponent} from "./skills/skills.component";
import {AboutComponent} from "./about/about.component";

const routes: Routes = [
  {path: '', redirectTo: 'introduction', pathMatch: 'full'},
  {path : 'introduction', component: IntroductionComponent},
  {path : 'skills', component: SkillsComponent },
  {path : 'about',  component : AboutComponent},
  {path : '**', component: IntroductionComponent}
];

export const AppRouting: ModuleWithProviders = RouterModule.forRoot(routes, {useHash: true});

<!-- app.component.html -->
<router-outlet></router-outlet>

<button mat-raised-button color="primary" [routerLink]="['/page1']">Page1</button>
<button mat-raised-button color="primary" [routerLink]="['/page2']">Page2</button>
<button mat-raised-button color="primary" [routerLink]="['/page3']">Page3</button>

import {ModuleWithProviders} from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {IntroductionComponent} from "./introduction/introduction.component";
import {SkillsComponent} from "./skills/skills.component";
import {SkillsResolve} from "./skills/skills.resolve";
import {AboutComponent} from "./about/about.component";

const routes: Routes = [
  {path: '', redirectTo: 'introduction', pathMatch: 'full'},
  {path : 'introduction', component: IntroductionComponent},
  {path : 'skills', component: SkillsComponent, resolve: {skills: SkillsResolve} },
  {path : 'about',  component : AboutComponent},
  {path : '**', component: IntroductionComponent}
];

export const AppRouting: ModuleWithProviders = RouterModule.forRoot(routes, {useHash: true});

import {Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from '@angular/router';

@Injectable()
export class SkillsResolver implements Resolve<any> {

constructor() {}

resolve(activatedRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
 const elem: number = activatedRoute.params['param'];
}

}

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

  infos: any;

  constructor(private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.route.data.subscribe(data => {
      this.infos= data['skills'];
    });
  }

export const appRoutes: Routes = [
  {path: 'info/:id', component: InfoComponent, resolve: { info: InfoResolverService}},
  {path: 'about', component: AboutComponent, canActivate: [MyGuard]},
  {path: '**', component: NotFoundComponent},
  {path: '404', component: NotFoundComponent}
];

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class ConnectedGuardGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return true;
  }
}

import { Engine, Tires, Doors } from './shared';
 
 class Car {
   
   constructor(
       private _engine: Engine,
       private _tires: Tires,
       private _doors: Doors
   ) {
   }
}

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

@Injectable()
export class MyService {

name: string;

constructor() {
 this.name = "Angular";
}

getName(): string {
   return this.name;
}

}

import { Component, OnInit } from '@angular/core';
import {MyService} from './my.service';

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss'],
  providers: [MyService] //Ou  {provide: MyService, {useClass: MyService}}
})
export class MyComponent implements OnInit {


  constructor(private myService: MyService) {
  }

  ngOnInit() {}
}

import { NgModule } from '@angular/core';
import {SharedModule} from '../shared/shared.module';
import {MyResolverService} from './my-resolver.service';
import {MyService} from './my.service';

@NgModule({
  imports: [
    SharedModule
  ],
  declarations: [],
  exports: [],
  providers: [MyResolverService, MyService] //Ou  {provide: MyService, {useClass: MyService}}
})
export class MyModule { }

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

@NgModule({
   imports: [HttpClientModule],
   ...
});

import { Injectable } from '@angular/core';
import {HttpBackend, HttpClient} from '@angular/common/http';

@Injectable()
export class MyService {

  constructor(private http: HttpClient) { }

  getSkills(id: number): Observable<Skill>{
    const headers = { 'Authorization': 'secret' };
    const params = { 'page': '1' };
    return this.http.get<Skill>('/api/skills', { headers, params });
  }
}

var observer = rx.Observer.create(
  function onNext(result){ 
    console.log(result); 
  },
  function onError(err){ 
    console.log(err); 
  },
  function onCompleted(){ 
    console.log('Completed'); 
  }
);
observable.subscribe(observer);

import { ajax } from "rxjs/observable/dom/ajax";
import { of } from "rxjs/observable/of";
import { catchError, map } from "rxjs/operators";

const name = ajax
  .getJSON<{ name: string }>("/api/employees/alice")
  .pipe(
    map(employee => employee.name),
    catchError(error => of(null))
);

import { Injectable } from '@angular/core';
import {HttpBackend, HttpClient} from '@angular/common/http';

@Injectable()
export class MyService {

  constructor(private http: HttpClient) { }

  getSkills(id: number): Observable<string>{
    const headers = { 'Authorization': 'secret' };
    const params = { 'page': '1' };
    return this.http
           .get<Skill>('/api/skills', { headers, params })
           .pipe(
             map(skill => skill.name),
             catchError(err => of(null))
            );
  }
}

//helloWorld.ts
function helloWorld() {
  return 'Hello world!';
}


//helloWorld.spec.ts
describe('Hello world', () => { (1)
  it('says hello', () => { (2)
    expect(helloWorld()) (3)
        .toEqual('Hello world!'); (4)
  });
});

describe('Hello world', () => { (1)
  it('says hello', () => { (2)
    expect(helloWorld()) (3)
        .toEqual('Hello world!'); (4)
  });
});

/**
 * Introductions
 */
app.get('/api/intros', api.getIntros);
app.get('/api/intros/:id', api.getIntro);
app.put('/api/intros/:id', api.updateIntro);


/**
 *  Skills
 */
app.get('/api/skills', api.getSkills);
app.put('/api/skills/:id', api.updateSkill);
app.post('/api/skills', api.addSkill);
app.delete('/api/skills/:id', api.deleteSkill);

# cd _server
# npm start

✔Express server listening on http://localhost:9000/

#npm install

#npm start

import {Component, OnInit, Output, Input, EventEmitter} from '@angular/core';
import {FormGroup, FormControl} from "@angular/forms";

@Component({
  selector: 'app-intro-form',
  templateUrl: 'form.component.html',
  styleUrls: ['form.component.scss']
})
export class IntroFormComponent implements OnInit {

  @Input() model:any = {};

  @Output() submit;

  constructor() {
    this.submit = new EventEmitter();
  }

  ngOnInit() {
    console.log(model);
  }

  submit(model){
    this.submit.emit(model);
  }

// parent.component.html

<app-intro-form [model]="model" (submit)="save($event)" > </app-intro-form>

const username = new FormControl('', {
validators: Validators.required,
updateOn: blur}); // Update only when remove focus
console.log(username.dirty);
console.log(username.hasError('required')); //true

 const form = new FormGroup({
      username: new FormControl(),
      password: new FormControl()
    });
    console.log(form.dirty);
    console.log(form.value);
    console.log(form.get('username'));

@Component({
   selector: 'app-react-form',
   templateUrl: './react-form.component.html'
   })
export class ReactFormComponent {
    loginForm: FormGroup;
          
    constructor(formBuilder: FormBuilder) {
      this.loginForm = formBuilder.group({username: '', password: ''});
    }
          
    register() {
      console.log(this.loginForm.value);
    }
}

<form (ngSubmit)="register(loginForm.value)" [formGroup]="loginForm">
 <div class="form-group">
   <label for="username">Nom d'utilisateur</label>
  <input type="text" class="form-control" 
                        id="username" formControlName="username" 
                        placeholder="Nom d'utilisateur">
 </div>
  <div class="form-group">
    <label for="password">Password</label>
   <input type="password" class="form-control" 
                        id="password" formControlName="password" 
                        placeholder="Mot de passe">
   </div>
  <button type="submit" class="btn btn-success">Se connecter</button>
</form>

@Component({
   selector: 'app-react-form',
   templateUrl: './react-form.component.html'
   })
export class ReactFormComponent {
    loginForm: FormGroup;
          
    constructor(formBuilder: FormBuilder) {
      this.loginForm = formBuilder.group({username: '', password: ''});
      this.loginForm.valueChanges.subscribe(form => console.log(form));
      this.loginForm.get('username').valueChanges
      .subscribe(username => console.log(username));
    }
          
    register() {
      console.log(this.loginForm.value);
    }
}

@Component({
   selector: 'app-react-form',
   templateUrl: './react-form.component.html'
   })
export class ReactFormComponent {
    loginForm: FormGroup;
          
constructor(formBuilder: FormBuilder) {
  this.loginForm = formBuilder.group({
   username: formBuilder.control('', [Validators.required,Validators.minLength(8)]), 
   password: formBuilder.control('', [Validators.required,Validators.pattern("[^ @]*@[^ @]*")])
      });
    }
}

<form (ngSubmit)="register(loginForm.value)" [formGroup]="loginForm">
 <div class="form-group">
   <label for="username">Nom d'utilisateur</label>
<mat-input-container 
     [ngClass]="{required: loginForm.get('username').hasError('required')}">
  <input type="text" class="form-control" 
                        id="username" formControlName="username" 
                        placeholder="Nom d'utilisateur">
  <mat-hint align="start" *ngIf="loginForm.get('username').hasError('required')">
          La saisie du nom d'utilisateur est obligatoire
  </mat-hint>
</mat-input-container>
 </div>
  <button type="submit" class="btn btn-success">Se connecter</button>
</form>

export class ValidFormComponent {
    
 loginForm: FormGroup;
    
constructor(formBuilder: FormBuilder) {
 const isKnowUser= (control: FormControl) => 
 ['jmadih', 'rinfrayco']
 .filter(v => v === control.value).length ? null : {unknownUser: true};
 this.loginForm = formBuilder.group({
     username: formBuilder.control('', [Validators.required, 
                                        Validators.minLength(3), isKnowUser]),
     password: formBuilder.control('', Validators.required)
     });
     }
}

    <p>{{ 'Formation Angular' | uppercase}}</p>
    
Affichera 'FORMATION ANGULAR'

    <p>{{ 'Formation Angular' | lowercase}}</p>
    
Affichera 'formation angular'

        <p>{{users | slice:0:2 | json}}</p>
Affichera les 2 premiers éléments du tableau

        <p>{{ 'Formation Angular' | slice:0:9}}</p> <!-- Formation -->

Affichera 'Formation'

        <p>{{ 'Formation Angular' | slice:-7}}</p> <!-- Angular -->

Affichera 'Angular'

 <p>{{ 0.8 | percent }}</p> <!-- 80% -->
 <p>{{ 0.8 | percent:'.3' }}</p> <!-- 80.000% -->

        <p>{{ 12345 | number }}</p> <!-- 12,345 -->
        <p>{{ 12345 | number:'9.' }}</p> <!-- 000,012,345 -->
        <p>{{ 12345 | number:'.2' }}</p> <!-- 12,345.00 -->
        <p>{{ 12345.14 | number:'.1-1' }}</p> <!-- 12,345.1 -->
        <p>{{ 12345.16 | number:'.1-1' }}</p> <!-- 12,345.2 -->

    <p>{{ users }}</p>

affichera [object Object].

Pour afficher la représentation JSON de l'objet :

    <p>{{ users | json }}</p>

Équivalent de JSON.stringify

<p>{{ today | date:'dd/MM/yyyy'}}</p> <!-- 05/02/2017 -->
<p>{{ today | date:'longDate'}}</p> <!-- February 5, 2017 -->
<p>{{ today | date:'HH:mm:ss'}}</p> <!-- 13:48:43 -->
<p>{{ today | date:'shortTime'}}</p> <!-- 1:48 PM -->

<p>{{ 20.8 | currency:'EUR' }}</p> <!-- EUR20.80 -->
<p>{{ 20.8 | currency:'USD':true }}</p> <!-- $20.80 -->
<p>{{ 20.8 | currency:'USD':true:'.3' }}</p> <!-- $20.800 -->

 @Component({
      selector: 'app-pipes',
      template: `    
        <p> {{usersName$ | async}}</p>
      `
    })
    export class MyComponent {
      usersName$: Observable<string>;
    }

 @Pipe({
      name: 'fromNow'
    })
    export class FromNowPipe implements PipeTransform {
      transform(value: Date): string {
        return moment(value).fromNow();
      }
    }

usage

    {{myDate | fromNow}}

import {BrowserModule} from '@angular/platform-browser';
import {DoBootstrap, Injector, NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {createCustomElement} from '@angular/elements';
import {NgCardElementComponent} from './ng-card-element/ng-card-element.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  entryComponents: [NgCardElementComponent],
  imports: [
    BrowserModule
  ]
})
export class AppModule implements DoBootstrap {

  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const el = createCustomElement(NgCardElementComponent, {
      injector: this.injector
    });
    customElements.define('times-up', el);
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Time's UP</title>
</head>
<body>
<times-up endtime="27/02/2020 18:00:00" title="Title" 
subtitle="Subtitle" description="description">
</times-up>
</body>
<script src="URL/main.js"></script>
</html>