Therichpost

Angular 15 Session Management Basic Tutorial

·

,
therichpost Avatar
therichpost
Angular 15 Session Management Basic Tutorial

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 15 Session Management Basic Tutorial.

Working Live Demo

Angular15 came and if you are new then you must check below link:

  1. Angular 15 Tutorials

Here is the code snippet for Angular 15 Session Management Basic Tutorial and please use carefully:

1. Very first guys, here are common basics steps to add angular 15 application on your machine and also we must have latest nodejs version(14.17.0) installed for angular 15:

npm install -g @angular/cli

ng new angulardemo // Set Angular 15 Application on your pc

cd angulardemo // Go inside project folder

2. Now guys we will add below code into our angulardemo/src/app/app.component.html:

<p>Username = {{UserName}}</p>
<button class="btn btn-primary" (click)="clearSession()">Remove or Clear Session</button>

3. Now we will add below code into our angulardemo/src/app/app.component.tsfile:

...
export class AppComponent {
  
  UserName:any;


ngOnInit() {
  //sessting session value
  sessionStorage.setItem("UserName", "Jassa");

  //getting session value
  this.UserName = sessionStorage.getItem("UserName");
  console.log(this.UserName)
}

clearSession()
{
 //delete session value
  sessionStorage.removeItem("UserName");
  //sessionStorage.clear();
}

}

Now we are done friends and please run ng serve command to check the output in browser(locahost:4200) and if you have any kind of query then please do comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding please watch video above.

Guys I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

Other Posts