realtomaszkula

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-suggested-username',
  template: `
    <form [formGroup]="form">
       <input formControlName="firstName" placeholder="First name" />
       <input formControlName="lastName" placeholder="Last name" />
       <input formControlName="username" placeholder="Username" />

realtomaszkula

reactiveUsername() {
  const firstName = this.form.get('firstName');
  const lastName = this.form.get('lastName');
  const username = this.form.get('username');

  const combined$ = combineLatest(
    firstName.valueChanges,
    lastName.valueChanges
  )
   .pipe(map(([first, last]) => (first && last ? `${first}-${last}` : '')))

realtomaszkula

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { combineLatest } from 'rxjs';
import { map, filter } from 'rxjs/operators';

@Component({
  selector: 'app-suggested-username',
  template: `
    <form [formGroup]="form">
      <input formControlName="firstName" placeholder="First name" />

realtomaszkula

import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { FormControl } from '@angular/forms';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { SuggestedUsernameComponent } from './suggested-username.component';
import { SuggestedUsernameModule } from './suggested-username.module';

describe('SuggestedUsernameComponent', () => {
  let component: SuggestedUsernameComponent;
  let fixture: ComponentFixture<SuggestedUsernameComponent>;
  let firstNameCtrl: FormControl;

realtomaszkula

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-price-range',
  template: `
  <form [formGroup]="form">
    <mat-slider formControlName="rangeStart" thumbLabel min="1" max="5" step="0.5" value="1.5"></mat-slider>
    <mat-slider formControlName="rangeEnd" thumbLabel min="1" max="5" step="0.5" value="1.5"></mat-slider>

realtomaszkula

describe('PriceRangeComponent', () => {
  let component: PriceRangeComponent;
  let fixture: ComponentFixture<PriceRangeComponent>;
  let startCtrl: FormControl;
  let endCtrl: FormControl;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [PriceRangeModule, NoopAnimationsModule]
    }).compileComponents();

realtomaszkula

reactiveRange() {
    const startCtrl = this.form.get('rangeStart');
    const endCtrl = this.form.get('rangeEnd');

    startCtrl.valueChanges
      .pipe(filter(v => v > endCtrl.value))
      .subscribe(v => endCtrl.setValue(v));

    endCtrl.valueChanges
      .pipe(filter(v => v < startCtrl.value))

realtomaszkula

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-price-range',
  template: `
  <form [formGroup]="form">
    <mat-slider formControlName="rangeStart" thumbLabel min="1" max="5" step="0.5" value="1.5"></mat-slider>
    <mat-slider formControlName="rangeEnd" thumbLabel min="1" max="5" step="0.5" value="1.5"></mat-slider>

realtomaszkula

type Label<T extends object> = { [key in keyof T]: string };

realtomaszkula

type PartialLabel<T extends object> = { [key in keyof Partial<T>]: string };