Discovering the world of Angular and TypeScript is quite exciting. In my Angular project, I have 8 pages that include a login and registration page. I'm facing an issue where I need to access the user's email data on every page/component but the traditional method of using emit function seems unreliable as the data gets lost upon page refresh. Can someone guide me towards a simple yet effective solution to retrieve the email id across all pages/components in my project?
Take a look at my login.ts file below:
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Input, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { DataService } from '../services/data.service'
import {EventtosymptomsService } from '../services/eventtosymptoms.service';
interface loginInfo
{
email: string;
password: string;
}
interface Response{
result: boolean;
}
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor(private router: Router, private route: ActivatedRoute, private dataService: DataService, private eventService: EventtosymptomsService ) { }
isShown: boolean = true ; // default will be Patient Login
PemailId:string = "";
Ppassword:string = "";
logininfo ={} as loginInfo;
response = {} as Response;
error_message:boolean = false;
sendData:string;
toggleShow() {
console.log("In toggle show")
this.isShown = ! this.isShown;
this.error_message = false;
}
patientLogin(patient_emailid: string, patient_password: string)
{
this.logininfo.email = patient_emailid;
this.logininfo.password = patient_password;
console.log(this.logininfo)
this.sendData = patient_emailid;
this.loginCheckPatient()
}
Register()
{
console.log("hello")
this.router.navigate(['register']);
}
loginCheckPatient() {
this.dataService.loginCheck(this.logininfo)
.subscribe(data => {
console.log(data)
this.response = data;
if(this.response.result)
{
console.log("In response check", this.response["result"])
this.error_message = false
this.eventService.emit<{}>(this.sendData);
this.router.navigate(['analyseSymptoms']);
}
else{
console.log("In else")
this.error_message = true;
}
}
)
}
}
Below is my service code file (dataservice.ts)
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';
@Injectable({
providedIn: 'root'
})
export class DataService {
loginPatient_url = "http://127.0.0.1:5000/api/loginPatient"
constructor(private httpClient: HttpClient) { }
loginCheck(person): Observable<any> {
const headers = { 'content-type': 'application/json'}
const body=JSON.stringify(person);
console.log(body)
return this.httpClient.post(this.loginPatient_url , body,{'headers':headers})
}
}