title: How do I display the username after submitting the form Angular
body: <p>I need help with displaying and adding values to my app How do I get my variables from app.component.ts to show I  tried refreshing the app but nothing seems to work. I have been Googling but I cannot find any solutions.how to display the result after submitting the form
  I want a display result after submitting the form for print</p>
  
  <p>app.component.html</p>
  
  <pre><code>
  &lt;header &gt;
    &lt;div class="container"&gt;
      &lt;nav&gt;
  
          &lt;div class="grid-container"&gt;
              &lt;div class="item1"&gt;
          &lt;h2 class="logo"&gt;Not facebook&lt;/h2&gt;
        &lt;/div&gt;
          &lt;div class="item2"&gt;
              &lt;form [FormGroup]="login" ngSubmit="onSubmit()"&gt;
  
                  &lt;span  id="usrn-input-text" class="hint"                                    &gt;Email or Phone&lt;/span&gt;
                  &lt;input id="usrn-input-box"    type="text"     formControlName="username" /&gt;
                  &lt;span  id="pswd-input-text" class="hint"                                    &gt;Password&lt;/span&gt;
                  &lt;input id="pswd-input-box"    type="password" formControlName="password" /&gt;
                  &lt;a  id="forget-password" class="link"   href="#"                         &gt;Forgot Account?&lt;/a&gt;
                  &lt;button id="log-in-button"   class="submit" type="submit"&gt;{{title}}&lt;/button&gt;    
               &lt;/form&gt;
          &lt;/div&gt;
  
          &lt;/div&gt;
  
  &lt;/nav&gt;
  &lt;/div&gt;
  
    &lt;/header&gt;
  
  </code></pre>
  
  <p>app.Module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule,ReactiveFormsModule } from '@angular/forms';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      ReactiveFormsModule ,
      AppRoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { 
  
  }
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { FormGroup, FormControl } from '@angular/forms';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'bookface';
    login = new FormGroup({
      username:new FormControl(''),
      password:new FormControl('')
    })
    onSubmit(){
      console.log('bookface')
    }
  
  }
  </code></pre>