How to implement login in angular?

In this example, we will learn how to perform a Login operation using JWT Token generated using DOT NET CORE WEB API.

Step 1) To perform the operation generating the JWT token please Click Here.

Step 2) Create Class (login.model.ts)

export class User {
  UserName: string = '';
  Password: string = '';
}

Step 3) Open your Angular project Login Component.

export class LoginComponent implements OnInit {
  public userObj: User = new User();
  constructor(
    public config: Config,
    public http: HttpClient,
    public router: Router,
    public security: Security
  ) {}
  login() {
    var observable = this.http.post(
      this.config.apiURL + 'api/Security',
      this.userObj
    );
    observable.subscribe(
      (res) => this.Sucess(res),
      (res) => this.Error(res)
    );
  }
  Sucess(res: any) {
    this.security.token = res.token;
    this.router.navigate(['/add']);
  }
  Error(res: any) {
    console.log(res);
  }

Step 3) Login page HTML code

UserName:
<input type="text" [(ngModel)]="userObj.UserName" name="" id="" /><br />
Password:
<input type="text" [(ngModel)]="userObj.Password" name="" id="" /><br />
<input type="button" value="Login" (click)="login()" />