Username is displayed on home page and done styling

src/app/app.component.html

@@ -4,6 +4,10 @@
       <ion-header>
         <ion-toolbar>
           <ion-title>Menu</ion-title>
+         
+          <div class="ion-text">
+           Welcome , {{userService.userDetails.username}}
+          </div>
         </ion-toolbar>
       </ion-header>
       <ion-content>

src/app/app.component.scss

+.ion-text{
+    font-size: small;
+    color:black;
+    font-weight: bold;
+    margin-left: 20px;
+    margin-top: 3px;
+  }
+ 
\ No newline at end of file

src/app/app.component.ts

@@ -7,6 +7,7 @@ import { Storage } from '@ionic/storage';
 import { Router } from '@angular/router';
 
 import { RestService } from './rest.service';
+import { UserService } from './services/user.service';
 
 @Component({
   selector: 'app-root',
@@ -14,7 +15,7 @@ import { RestService } from './rest.service';
   styleUrls: ['app.component.scss']
 })
 export class AppComponent {
-
+  username="";
   isLoginPage = false;
 
   public appPages = [
@@ -39,6 +40,7 @@ export class AppComponent {
       icon: 'exit'
     }
   ];
+  
 
   constructor(
     private platform: Platform,
@@ -46,7 +48,9 @@ export class AppComponent {
     private statusBar: StatusBar,
     public restService: RestService,
     private storage: Storage,
-    private router: Router) {
+    private router: Router,
+    public userService: UserService) {
+    this.username = this.userService.getUsername();
 
     this.initializeApp();
 

src/app/auth/login/login.page.ts

@@ -5,6 +5,7 @@ import { Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 
 import { RestService } from '../../rest.service';
+import { UserService } from 'src/app/services/user.service';
 
 @Component({
   selector: 'app-login',
@@ -12,14 +13,14 @@ import { RestService } from '../../rest.service';
   styleUrls: ['./login.page.scss'],
 })
 export class LoginPage implements OnInit {
-  username = "Bob@mail.com";
-  password = "BobPassword";
+  username = "";
+  password = "";
   //username = "";
   //password = "";
   correctCredentials = false;
   loginApi: Observable<any>;
 
-  constructor(private router: Router, public httpClient: HttpClient, public restService: RestService) {
+  constructor(private router: Router, public httpClient: HttpClient, public restService: RestService,public userService: UserService) {
 
   }
 
@@ -41,6 +42,7 @@ export class LoginPage implements OnInit {
         //console.log('my data: ', data);
         this.restService.setToken(data.token);
         this.restService.isLoginPage = false;
+        this.userService.setUsername(this.username);
         this.router.navigateByUrl('/home');
       }, (error) => {
         console.log(JSON.stringify(error));

src/app/services/user.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { UserService } from './user.service';
+
+describe('UserService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: UserService = TestBed.get(UserService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/user.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+userDetails = {name : "",username:""}
+  constructor() { }
+public getUsername(){
+  return this.userDetails.username
+}
+public setUsername (username){
+  this.userDetails.username = username
+}
+}