CODEWITHSUNDEEP
angular
kronus
kronus

Reputation: 912

Angular object undefined in one component, but not another how do I synch the two compontents

I have a nav component, a login component and a service that call the db for the login to check if there is a matching username and password.

I have the service console.log the json that is returned. However, when I want to use the json in the nav component to hide some of the nav elements, along with show the username, then nav component says the object is undefined. Yet, right after the console.log() tells me it is undefined, it shows the json object written by the services console.log().

How can I synch the two components?

The following is the login component:

import { ShoppingCartValuesService } from "../shopping-cart-values.service";
import { Component } from "@angular/core";

@Component({
  selector: "app-login",
  templateUrl: "./login.component.html",
  styleUrls: ["./login.component.css"]
})
export class LoginComponent {
  public Obj: any;
  email = "";
  password = "";
  constructor(private srvc: ShoppingCartValuesService) {}

  login() {
    this.srvc.getLogin(this.email, this.password);
    this.Obj = this.srvc.loginObj;
    console.log("this obj returned: " + this.Obj);
  }
}

this.Obj is undefined

The following is the services:

import { Injectable } from "@angular/core";
import { Router } from "@angular/router";
import { HttpClient } from "@angular/common/http";

@Injectable({
  providedIn: "root"
})
export class ShoppingCartValuesService {
  public shoppingCartValues = "n";
  public loginObj: any;
  public uri = "http://local.kronus:8001/v2018/assets/api/send_get.pdo.php";

  constructor(private http: HttpClient, private router: Router) {}

  getLogin(email, password) {
    this.http
      .get(this.uri + "?name=" + email + "&pass1=" + password)
      .subscribe(res => {
        this.loginObj = res;
        if (this.loginObj.isAdmin === "1") {
          console.log(this.loginObj);
        } else {
          console.log("this is not an admin account");
        }
        return this.loginObj;
        // this.router.navigate(["/"]);
      });
  }
}

The this.loginObj writes to the console.log() just fine

The ultimate goal is to use something like an *ngif="isAdmin" from the this.loginObj.isAdmin to show or hide parts of the nav

The following is my nav component:

import { Component, OnInit } from "@angular/core";
import { ShoppingCartValuesService } from "../shopping-cart-values.service";

@Component({
  selector: "app-bs-navbar",
  templateUrl: "./bs-navbar.component.html",
  styleUrls: ["./bs-navbar.component.css"]
})
export class BsNavbarComponent implements OnInit {
  public loginObj: any;
  constructor(private srvc: ShoppingCartValuesService) {}

  ngOnInit() {
    this.loginObj = this.srvc.loginObj;
    console.log("isAdmin: " + this.loginObj.isAdmin);
  }
}

I am pretty sure that the reason why the this.loginObj.isAdmin is not working here, is because it is called at ngOnInit. Is there a lifecycle function to use for after the button has been clicked in the form?

The following is the login component html form:

  <div class="signup-form">
  <h2>Register</h2>
  <p class="hint-text">Login to your account.</p>
  <div class="form-group">
    <input
      type="email"
      class="form-control"
      name="email"
      placeholder="Email"
      required="required"
      [(ngModel)]="email"
    />
  </div>
  <div class="form-group">
    <input
      type="password"
      class="form-control"
      name="password"
      placeholder="Password"
      required="required"
      [(ngModel)]="password"
    />
  </div>
  <div class="form-group">
    <button (click)="login()" class="btn btn-success btn-lg btn-block">
      Login
    </button>
  </div>
  <div class="text-center">
    Need an account? <a routerLink="/register">Register here</a>
  </div>
</div>

Thanks in advance

Upvotes: 1

Views: 99

Answers (1)

Bassam
Bassam

Reputation: 856

for your login page,

login() {
    this.srvc.getLogin(this.email, this.password);
    this.Obj = this.srvc.loginObj;
    console.log("this obj returned: " + this.Obj);
  }

this.obj and console don't wait until you getLogin is done, so one suggesting solution you should first: in your service:

 getLogin(email, password) {
    return new Observable((observe) => {
        this.http
          .get(this.uri + "?name=" + email + "&pass1=" + password)
          .subscribe(res => {
            this.loginObj = res;
            if (this.loginObj.isAdmin === "1") {
              console.log(this.loginObj);
            } else {
              console.log("this is not an admin account");
            }
            observe.next(res);
          });
        });
      }

======================================

in your login page

login() {
    this.srvc.getLogin(this.email, this.password).subscribe((result)=>{
       this.Obj = result;
       console.log("this obj returned: " , this.Obj);
     });

}

Upvotes: 1

Related Questions