working with forms (1/3)

@Component({
  selector: 'model-driven-forms',
  template: `
    <form (ngSubmit)="onSubmit()" [formGroup]="mdf">
        <label for="email">Email</label>
        <input type="email" formControlName ="email">
        <label for="comments">Comments</label>
        <textarea formControlName ="comments"></textarea>
    </form>
  `
})
class ModelDrivenForms {
  
  mdf: FormGroup;

  constructor(fb: FormBuilder) {
    this.mdf = fb.group({
      'email': ['', Validators.required],
      'comments': ['']
    });
  }
}

// import {map, filter} from 'rxjs/operators';

this.mdf.valueChanges
    .pipe(
        map( value => {
            value.email = this.sanitize(value.email);
            return value;
        }),
        filter( value => this.form.valid)
    )
    .subscribe( value => print(`
        Model Driven Form valid value: 
        vm = ${JSON.stringify(value)}
    `));

working with forms (2/3)

// import {map, flatMap} from 'rxjs/operators';

this.mdf.ngSubmit
  .pipe(
    map( _ => this.mdf.controls['email'] ),
    flatMap( _ => /* push to server */)
  )
  .subscribe(
    value => console.log(value),
    error => console.trace(error),
   () => console.info('done')
  )

working with forms (3/3)

http simple (1/2)

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Config} from './app.config';

interface ItemsResponse { ... }

@Injectable()
class Fetch {
    //...
    constructor(private http: HttpClient) {

      this.stream$ = this.http.get<ItemsResponse>(Config.DATA_URL);

    }
    //...
}

http Advanced (2/2)

// other imports ...

import {interval} from 'rxjs/observable/interval';
import {map, flatMap, startWith, toArray} from 'rxjs/operators';

@Injectable() class Fetch {
    contructor(loader: FetcherService) {
      this.stream$ = interval(Config.TIMER)
        .pipe(
            flatMap(_ => loader.fetch()),
            map((facts: any) => this.randomize(facts.data))
        )
        .subscribe(
          data => this.randomQuote = data,
          err => this.logError(err),
          () => console.log('Random Quote Complete')
        );
    }
    //...
}

event emitter (1/3)

event emitter (2/3)

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

@Component({
    selector: 'parent-cmp',
    template: `<child-cmp 
                (onChildEvent)="receiveChildEvent($event)">
               </child-cmp>`
})
export class ParentComponent {

  receiveChildEvent(value) {
    console.log(value);
  }

}

event emitter (3/3)

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

@Component({
    selector: 'child-cmp'
    /* configuration */
})
export class ChildCmp {

  @Output() outputEvent: EventEmitter<string>;

  constructor() {
    this.outputEvent = new EventEmitter<string>();
    this.outputEvent.emit('foo');
  }

}