Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have two components: login and home. After the user logs in, it is redirected to home-report page. I want to display on toolbar the username (usersLogin.userLogin) that has logged in. I am able to display this.testUser="bla" on toolbar.

What I have tried:

The login.component.ts:
TypeScript
import { Component, OnInit, Injectable } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatSnackBar, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { Route, Router } from '@angular/router';
import { MatCardModule } from '@angular/material/card';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { analyzeAndValidateNgModules } from '@angular/compiler';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
usersLogin: any;
testUser:any;

  ngOnInit() { }

  userLog: string;
  passLog: string;
  submitLoading = false;
  messageError: string;
  messageOK: string;
  data: any;

  constructor(private snackBar: MatSnackBar, private router: Router, private http: HttpClient) { this.testUser="bla"}

  // ********Login***********
  onSubmitLogin(usersLogin: { userLogin: string, passLogin: string }) {

    const headerDict = {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Access-Control-Allow-Headers': 'Content-Type',
    }
    
    const requestOptions = {                                                                                                                                                                                 
      headers: new HttpHeaders (headerDict), 
    };

    this.http.post('http://localhost:54111/api/Login', usersLogin, requestOptions).subscribe(dataLogin => {
 

      console.log( usersLogin.userLogin);// this usersLogin.userLogin i want to display on toolbar
      console.log("True or false: "+dataLogin)
      this.testUser=usersLogin.userLogin;
      console.log("testUser: "+ this.testUser);

      if (dataLogin) {
            this.snackBar.open('Login Successful', '', { duration: 1000 })
            this.router.navigate([`Home`]);
          } else {
            this.snackBar.open('Login error', '', { duration: 1000 })
          }
    })     
  }


The home-report.component.ts:
TypeScript
import { Component, OnInit } from '@angular/core';
import { LoginComponent } from '../login/login.component';

@Component({
  selector: 'app-home-report',
  templateUrl: './home-report.component.html',
  styleUrls: ['./home-report.component.css'],
  providers: [LoginComponent]
})
export class HomeReportComponent implements OnInit {

  userLogged: any;
  usersLogin: any;
  constructor(private utiliz: LoginComponent) { }

  ngOnInit() {
     
    this.userLogged=this.utiliz.testUser;//this displays "bla" on my toolbar  
  }
}


The home-report.component.html:
HTML
<mat-toolbar color="primary">
    <span>Toolbar</span>
    <div>
        <mat-icon>account_circle</mat-icon>
        {{userLogged}}
    </div>
</mat-toolbar>


So my question is how could I get the usersLogin.userLogin from onSubmitLogin(...) method in order to display it in home-report component?
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900