suggested-username#final.ts

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" />
      <input formControlName="lastName" placeholder="Last name" />
      <input formControlName="username" placeholder="Username" />
    </form>
  `,
  styleUrls: ['./suggested-username.component.css']
})
export class SuggestedUsernameComponent implements OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      firstName: '',
      lastName: '',
      username: ''
    });

    this.reactiveUsername();
  }

  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}` : '')))
      .subscribe(value => username.setValue(value));
  }
}