Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TDD Angular Workshop

TDD Angular Workshop

More Decks by Pablo Villoslada Puigcerber

Other Decks in Programming

Transcript

  1. Static typed language function sayHello(name: string): string { return `Hello

    ${name}!`; } const person: object = {}; let age: number;
  2. Displaying data import { Component } from '@angular/core'; @Component({ selector:

    'app-root', template: '<h1>{{title}}</h1>' }) export class AppComponent { title = 'TDD Workshop'; }
  3. Lifecycle hooks class Lifecycle implements OnInit, OnDestroy { ngOnInit() {

    console.log('on init'); } ngOnDestroy() { console.log('on destroy'); } }
  4. Built-in pipes {{ a }}<!-- 0.189 --> {{ a |

    currency }}<!-- $0.19 --> {{ a | currency:’EUR' }}<!-- €0.19 --> {{ a | currency:’USD':'code' }}<!-- USD0.19 -->
  5. Subscribing const myObservable = Observable.of(1, 2, 3); myObservable.subscribe( x =>

    console.log('Next value: ' + x), err => console.error('Error: ' + err), () => console.log('Complete!') );
  6. RxJS Operators import { fromEvent } from 'rxjs'; import {

    filter, map, tap } from 'rxjs/operators'; const subscription = fromEvent(document, 'keypress') .pipe( tap(console.log), filter(e => e.key === 'a'), map(e => e.keyCode) ).subscribe(console.log);
  7. Configuration export const routes: Routes = [ { path: 'main',

    component: MainComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes) ], exports: [RouterModule] }) export class AppRoutingModule { }
  8. Activated route class RoutedComponent { constructor( private route: ActivatedRoute )

    { const id = route.paramMap.pipe( map((params: ParamMap) => params.get(('id'))) ); } }
  9. Dumb component @Component({ selector: 'btn-dumb', template: `<button (click)="onClick()">{{label}}</button>` }) export

    class DumbComponent{ @Input() label; @Output() dumb = new EventEmitter(); onClick() { this.dumb.emit('dumb'); } }
  10. Smart component @Component({ selector: 'smart', template: ` <btn-dumb [label]="label" (dumb)="onDumb($event)">

    </btn-dumb>` }) export class SmartComponent{ label = 'Click'; onDumb(event) { console.log(event); } }