Create the component in Auth for registration page

ng g c auth/registration
                                

set the design of registration page

src/app/Auth/registration/registration.component.ts

<section class="Singup-wrap mtb-40">
    <div class="container">
        <div class="row justify-content-center" *ngIf="!error">
          <div class="col-md-6">
              <div class="login-box">
                  <h1>User Registration</h1>
                  <div class="alert alert-success" *ngIf="datasaved">
                     {{massage}}
                  </div>
                  <form  (ngSubmit)="onSubmit(regForm)" [formGroup]="regForm">
                      
                      <div class="form-group form-row">
                          <label class="col-md-3">First Name : <span class="required">*</span></label>
                          <div class="col-md-9">
                            <input type="text" formControlName="FirstName" class="form-control" placeholder="First Name" required>
                            <span *ngIf="!regForm.get('FirstName').valid && regForm.get('FirstName').touched">Please enter First Name !!!</span>
                          </div>
                      </div>
                  
                      <div class="form-group form-row">
                          <label class="col-md-3">Last Name : <span class="required">*</span></label>
                          <div class="col-md-9">
                            <input type="text" formControlName="LastName" class="form-control" placeholder="Last Name" required>
                            <span *ngIf="!regForm.get('LastName').valid && regForm.get('LastName').touched">Please enter First Name !!!</span>
                          </div>
                      </div>
                      <div class="form-group form-row">
                          <label class="col-md-3">Email ID <span class="required">*</span></label>
                          <div class="col-md-9">
                            <input type="text" formControlName="EmailId" class="form-control" placeholder="Email Id" required>
                            <span *ngIf="!regForm.get('EmailId').valid && regForm.get('EmailId').touched">Please enter First Name !!!</span>
                          </div>
                      </div>
                      <div class="form-group form-row">
                          <label class="col-md-3">Password <span class="required">*</span></label>
                          <div class="col-md-9">
                            <input type="text" formControlName="Password" class="form-control" placeholder="Password" required>
                            <span *ngIf="!regForm.get('Password').valid && regForm.get('Password').touched">Please enter First Name !!!</span>
                          </div>
                      </div>
                  
                      <div class="form-group">
                          <button type="submit" [disabled]="!regForm.valid" class="btn btn-primary">Submit</button>
                      </div>
                  </form>
              </div>         
          </div>
        </div>
       
    </div>
  </section>
  
                                 

Create a class as employee

ng g class auth/employee
                             

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

 export class Employee {
     FirstName:string;
     LastName:string;
     EmailId:string;
     Password:string;
}

                                 

Create service

Create a class as employeeservice

ng g class auth/employeeservice
                             

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

set the web API url in this file and create the method for create employee.First you need to import HttpClient from @angular/common/http. then inject the HttpClient in constructor

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


@Injectable({
  providedIn: 'root'
})
export class EmplyeeserviceService {
url='http://localhost:54868/'
  constructor(private http:HttpClient) { }
  createemployee(employee:Employee):Observable<Employee>{
    return this.http.post<Employee>(this.url+'api/Employeemasters',employee)
  }
}
                                 

Edit the file src/app/app.module.ts

Import EmplyeeserviceService and set it in provider array

Import HttpClientModule and set it in imports array

....                            
import { EmplyeeserviceService } from './auth/emplyeeservice.service';
import { HttpClientModule, HttpClient } from '@angular/common/http';
....
                                    

....                            
 imports: [
    BrowserModule,
    HttpClientModule,
    
    CoursesModule,
    StaticpagesModule,
    AdminModule,
    AuthModule,
    AppRoutingModule
  ],
  providers: [EmplyeeserviceService],
  bootstrap: [AppComponent]
})
....
                                    

Edit the file src/app/Auth/registration/registration.component.ts

Import the FormBuilder, Validators, FormGroup from @angular/forms

Import the EmplyeeserviceService service

Import the Employee class

Inject FormBuilder and EmplyeeserviceService in constructor

Set the Validators for all controls

Create the method for create employee

Like Below:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import { EmplyeeserviceService } from '../emplyeeservice.service';
import { Employee } from '../employee';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})
export class RegistrationComponent implements OnInit {
  regForm: FormGroup;
  datasaved = false;
  massage: string;
  constructor(private formbuilder: FormBuilder, private employeeservice: EmplyeeserviceService) { }

  ngOnInit() {
    this.setFormState();
  }
  setFormState(): void {
    this.regForm = this.formbuilder.group({
      LastName: ['', [Validators.required]],
      FirstName: ['', [Validators.required]],
      EmailId: ['', [Validators.required]],
      Password: ['', [Validators.required]]
    })
  }

  onSubmit() {
    
    let employee = this.regForm.value;

    this.createemployee(employee);
    this.regForm.reset();
  }
  createemployee(employee: Employee) {
    this.employeeservice.createemployee(employee).subscribe(
      () => {
        this.datasaved = true;
        this.massage = "User Created";
       this.regForm.reset();
      }
    )
  }
}