set the design of Login page

src/app/Auth/login/login.component.ts

<section class="login-wrap mtb-40">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-6">
                <div class="login-box">
                    <h1>Admin Login</h1>
                    <div class="alert alert-danger" *ngIf="Error">
                        {{massage}}
                     </div>
                    <form (ngSubmit)="onSubmit(loginForm)" [formGroup]="loginForm">
                        <div class="form-group">
                            <input type="text" formControlName="Username" class="form-control" placeholder="Username">
                        </div>
                        <div class="form-group">
                            <input type="password" formControlName="Password" class="form-control" placeholder="Password">
                        </div>
                        <div class="form-group">
                            <!-- <a href="dashboard.html" class="btn btn-danger">Log In</a> -->
                            <button type="submit" [disabled]="!loginForm.valid" class="btn btn-primary">Log In</button>
                        </div>
                    </form>
                </div>         
            </div>
    </div>
  </div>
</section>

  
                                 

Create a class as loginemployee

ng g class auth/login/loginemployee
                             

Set the properties in the file src/app/auth/loginemployee.ts

export class Loginemployee {
    Username:string;
    Password:string;
}


                                 

employeeservice

change in employeeservice

Edit in the file src/app/auth/employeeservice.ts

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import{observable, Observable} from 'rxjs';
import {Employee} from './employee';
import {Loginemployee} from './login/loginemployee';

@Injectable({
  providedIn: 'root'
})
export class EmployeeserviceService {
url="http://localhost:54868/";

  constructor( private http:HttpClient) { } 
 
  createemployee(employee:Employee):Observable{
    
    return this.http.post(this.url+'api/Employeemasters',employee)
  }
  loginemployee(loginEmployee: Loginemployee): Observable {
    return this.http.post(this.url + 'api/Login', loginEmployee)
  }
}
                                 

Edit the file src/auth/login/login.component.ts

....                            
import { Component, OnInit } from '@angular/core';
import {FormBuilder,Validators,FormGroup} from '@angular/forms';
import { EmployeeserviceService } from '../employeeservice.service';
import { Loginemployee } from './loginemployee';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  loginForm: FormGroup;
  massage: string;
  Error = false;
  constructor( private employeeservice:EmployeeserviceService, private formbuilder:FormBuilder,private router:Router) { }

  ngOnInit() {
    this.setFormState();
  }
  setFormState(): void {
    this.loginForm = this.formbuilder.group({
      Username: ['', [Validators.required]],
      Password: ['', [Validators.required]]
    })
  }
  onSubmit(){
    let login=this.loginForm.value;
    this.login(login);
  }
  login(loginEmployee: Loginemployee) {
    this.employeeservice.loginemployee(loginEmployee).subscribe(
      employee => {
        debugger;
        var succ = employee;
        if(succ){
        this.loginForm.reset();
        localStorage.setItem("Employee", JSON.stringify(succ));
        this.router.navigate(['dashboard']);
        } else {
          this.Error = true;
          this.massage = "User ID/Password Wrong";
        }
      }
    )
  }
}

                                    

Create a componnet as dashboard

ng g c admin/dashboard
                            

Edit the file src/app/Admin/dashboard/dashboard.component.html

Like Below:

<section class="dashboard-wrap mtb-40">
  <div class="container">
        <div class="body-content">
        <div class="row">
          <div class="col-md-3">
                    <div class="dash-left">
                        <ul>
                            <li class="active"><a href="#" class="active">Dashboard</a></li>
                            <li><a href="#">Posts</a></li>
                            <li><a href="#">Courses</a></li>
                            <li><a href="#">Pages</a></li>
                            <li><a href="#">Logout</a></li>
                        </ul>
                    </div>   
                </div>
                <div class="col-md-9">
                    <div class="dash-right">
                        <h1>Dashboard</h1>
                        <p>Sahosoft Tutorials is amazing and easy to learn from basic to advanced level. The guy who is teaching on YouTube its wonderful and he has just taught a lesson is very basic to advanced level and each and every point explain well even non technical person would see the vedio carefully i am sure he or she can develop application easily. Special this tutorial for fresher level even the person with experience level sometimes they would not know some point so Sahosoft Tutorials the best resource for Online Education.</p>
                    </div>   
                </div>
        </div>
        </div>
  </div>
</section>


                                    

Edit the file src/app/Admin/admin-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
  {path:'dashboard',component:DashboardComponent},

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AdminRoutingModule { }