Sunday, October 2, 2022
HomeError SolveHow to implement login in angular?

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()" />

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

Recent Comments