login.component.html

<h1>Login</h1>
<hr>
<div class="col-md-4">
  <form #loginForm="ngForm" (ngSubmit)="login(loginForm.value)" 
    novalidate autocomplete="off">
    <div class="form-group" >
      <label for="userName">User Name:</label>
      <em *ngIf="loginForm.controls.userName?.invalid && (loginForm.controls.userName?.touched || mouseoverLogin)">Required</em>
      <input 
        (ngModel)="userName" 
        name="userName" 
        required 
        id="userName" 
        type="text" 
        class="form-control" 
        placeholder="User Name..." />
        
    </div>
    <div class="form-group" >
      <label for="password">Password:</label>
      <em *ngIf="loginForm.controls.password?.invalid && (loginForm.controls.password?.touched || mouseoverLogin)">Required</em>
      <input 
        (ngModel)="password" 
        name="password" 
        required 
        id="password" 
        type="password" 
        class="form-control"
        placeholder="Password..." />
        
    </div>
     <span (mouseenter)="mouseoverLogin=true" (mouseleave)="mouseoverLogin=false">  
        <button [disabled]="loginForm.invalid" type="submit" class="btn btn-primary mr-5">Login</button>
    </span> 
    <button (click)="cancel()" type="button" class="btn btn-default">Cancel</button>
  </form>
</div>
<!-- <div class="col-md-8">
    <div class="col-md-6">
        loginForm.valid: <strong>{{loginForm.valid}}</strong><br>
        loginForm.invalid: <strong>{{loginForm.invalid}}</strong><br>
        loginForm.dirty: <strong>{{loginForm.dirty}}</strong><br>
        loginForm.pristine: <strong>{{loginForm.pristine}}</strong><br>
        loginForm.touched: <strong>{{loginForm.touched}}</strong><br>
        loginForm.untouched: <strong>{{loginForm.untouched}}</strong><br>
    </div>
    <div class="col-md-6">
        loginForm.controls.userName.valid: <strong>{{loginForm.valid}}</strong><br>
        loginForm.controls.userName.invalid: <strong>{{loginForm.invalid}}</strong><br>
        loginForm.controls.userName.dirty: <strong>{{loginForm.dirty}}</strong><br>
        loginForm.controls.userName.pristine: <strong>{{loginForm.pristine}}</strong><br>
        loginForm.controls.userName.touched: <strong>{{loginForm.touched}}</strong><br>
        loginForm.controls.userName.untouched: <strong>{{loginForm.untouched}}</strong><br>
    </div>
    <div class="col-md-6">
        loginForm.controls.password.valid: <strong>{{loginForm.valid}}</strong><br>
        loginForm.controls.password.invalid: <strong>{{loginForm.invalid}}</strong><br>
        loginForm.controls.password.dirty: <strong>{{loginForm.dirty}}</strong><br>
        loginForm.controls.password.pristine: <strong>{{loginForm.pristine}}</strong><br>
        loginForm.controls.password.touched: <strong>{{loginForm.touched}}</strong><br>
        loginForm.controls.password.untouched: <strong>{{loginForm.untouched}}</strong><br>
    </div>
</div> -->

<!-- {{loginForm.value | json}} -->

login.component.ts

import { Component } from '@angular/core'
import { AuthService } from './auth.service';
import { Router } from '@angular/router';

@Component({
    templateUrl: './login.component.html',
    styles: [`
        em{ float: right; color: #e05c65; padding-left: 10px;}
    `]
})

export class LoginComponent{
    userName
    password
    mouseoverLogin

    constructor(private authService: AuthService, private router: Router){}

    login(formValues){
        this.authService.loginUser(formValues.userName, formValues.password)
        this.router.navigate(['events']);
        //console.log(formValues)
    }
    cancel(){
        this.router.navigate(['events']);
    }
}

auth.service.ts

import { IUser } from './user.model';
import { Injectable } from '@angular/core';

@Injectable()
export class AuthService{

    currentUser: IUser;
    loginUser(userName: string, password: string){
        this.currentUser = {
            id: 1,
            userName: userName,
            firstName: 'Bipon',
            lastName: 'Biswas'
        }
    }
    isAuthenticated(){
        return !this.currentUser;
    }
}

app.module.ts [register auth.service.ts file]

import { AuthService } from './user/auth.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { EventsAppComponent } from './events-app.component';
import { EventListComponent } from './events/event-list.component';
import { EventThumbnailComponent } from './events/event-thumbnail.component';
import { NavBarComponent } from './nav/navbar-component';
import { EventService } from './events/shared/event.service';
import { ToastrService } from './common/toastr.service';
import { EventDetailsComponent } from './events/event-details/event-details.component';
import { RouterModule } from '@angular/router';
import { appRoutes } from 'src/routes';
import { CreateEventComponent } from './events/event-details/create-event.component';
import { Error404Component } from './errors/404.component';
import { EventRouteActivator } from './events/event-details/event-route.activator.service';
import { EventListResolver } from './events/shared/events-list-resolver.service';
import { UserModule } from './user/user.module';

@NgModule({
  declarations: [
    EventsAppComponent,
    EventListComponent,
    EventThumbnailComponent,
    NavBarComponent,
    EventDetailsComponent,
    CreateEventComponent,
    Error404Component
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [
    EventService, 
    ToastrService, 
    EventRouteActivator,
    EventListResolver,
    AuthService,
      {
        provide:'canDeactivateCreateEvent',
        useValue: checkDirtyState
      }
  ],
  bootstrap: [EventsAppComponent]
})
export class AppModule { }

export function checkDirtyState(component: CreateEventComponent){
  if(component.isDirty)
    return window.confirm('You have not saved this event, do you really want to cancel?')
  return true
}