suggested-username#setup.ts

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" />
    </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() {
     // continue reading to see the implementation
  }
}