How to fix delay between variable in html and controller in angular 4?

Question

I have a common mistake in angular 4 or 2, it is when I initialize a variable in subscribe it has delay. The problem is when I use that variable in html as *ngIf probably it first render that variable in html and at that time errors it is undefined. What is the best solution except setTimeout for this delay?

this is my html:

<a *ngIf="currentUser.type==0" class="tooltip-icon menu-navbar-item" (click)="goListProperty()">

and this is my component:

import {Component, OnInit, OnChanges, EventEmitter, Output, Input, 
ViewChild} from '@angular/core';
import {AuthenticationService} from "../../services/authentication.service";
import {LoginService} from "../../services/login-service.service";
import {SignUpService} from "../../services/signup-service.service";
import {Subscription} from 'rxjs';
import {Router} from '@angular/router';
@Component({
 selector: 'header-component',
 templateUrl: './header.component.html',
 })
 export class HeaderComponent implements OnInit {
 private subscription: Subscription;
 menu: boolean;
 index: number;
 menuButton: number;
 user: any;
 isOpen = false;
 currentUser: any;
 loading: boolean;

 constructor(private authentication: AuthenticationService, private 
 signUpService: SignUpService,
          private loginService: LoginService, private router: Router) {
 this.user = AuthenticationService.check();
  }

ngOnInit() {
if (this.user) {
  this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
  console.log(this.currentUser.type);
  this.subscription = this.authentication.notifyObservable$.subscribe(res => 
{
    this.currentUser = res;
    console.log(this.currentUser.type);
  });
}
this.subscription = this.loginService.notifyUserLoginObservable$.subscribe((res) => {
  console.log(res);
  this.user = res;
});
this.index = 1;
}

thank you for helping :)

Khaled Ahmed · Accepted Answer · 2018-01-01 09:00:20Z

1

<a *ngIf="currentUser && currentUser.type==0" class="tooltip-icon menu-navbar-
    item" (click)="goListProperty()">

here will check if current user is define or not and if not will not check for currentUser.type which prevent error

answered Jan 1, 2018 at 9:00

Khaled Ahmed

1,14410 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user184994 · Accepted Answer · 2018-01-01 09:27:01Z

1

You can use the null-safe operator in the HTML file like so:

<a *ngIf="currentUser?.type==0" class="tooltip-icon menu-navbar-item" (click)="goListProperty()">

That way, if currentUser is null or undefined, it will not throw an error.

You can read more about this operator at https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths

answered Jan 1, 2018 at 9:27

user184994

18.3k2 gold badges51 silver badges54 bronze badges

Comments

Shailesh Ladumor · Accepted Answer · 2018-01-02 08:49:49Z

1

you can set value by default. for example

currentUser: any = [];

and your html shloud like

<div *ngIf="currentUser.lenth > 0">
<a *ngIf="currentUser.type==0" class="tooltip-icon menu-navbar-item"(click)="goListProperty()">
</div>

edited Jan 2, 2018 at 8:49

answered Jan 1, 2018 at 7:08

Shailesh Ladumor

7,2515 gold badges44 silver badges60 bronze badges

Comments

Christopher Angel · Accepted Answer · 2018-01-01 07:12:18Z

0

put all the code of the ngOnInit in the constructor too, in that way when the page loads for the first time all the variable will have the value and will display in the html.

answered Jan 1, 2018 at 7:12

Christopher Angel

252 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to fix delay between variable in html and controller in angular 4?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related