Angular ngIf firebase authentication directive makes DOM unresponsive

Question

I am using Angular's *ngIf directive to check if a user is currently logged in. Depending on the authentication status of the user(I'm using Firebase authentication), either the log in button or the user menu should show. Here's the code:

.html

<div class="right-side">
    <!-- Header Widget -->
    <div class="header-widget">

    <!-- User Menu -->
    <div class="user-menu" *ngIf="afAuth.authState | async as user; else showLogin">
        <div class="user-name"><span><img src="assets/images/agent-03.jpg" alt=""></span>Hi, {{ ... }}!</div>
        <ul>
            <li><a routerLink="my/profile"><i class="sl sl-icon-user"></i> My Profile</a></li>
            <li><a routerLink="my/bookmarks"><i class="sl sl-icon-star"></i> Bookmarks</a></li>
            <li><a routerLink="my/properties"><i class="sl sl-icon-docs"></i> My Properties</a></li>
            <li (click)="logOut()"><a routerLink="/"><i class="sl sl-icon-power"></i> Log Out</a></li>
        </ul>
    </div>

    <ng-template #showLogin>
        <a routerLink="/login-register" class="sign-in"><i class="fa fa-user"></i> Log In / Register</a>
    </ng-template>

    <a routerLink="/submit-property" class="button border">Submit Property</a>
    </div>
    <!-- Header Widget / End -->
</div>

.ts

import { AngularFireAuth } from 'angularfire2/auth';
// ...
@Component({
  // ...
})
export class AppComponent {
  constructor(public afAuth: AngularFireAuth) {
  }

When clicked, the user menu should pop up and display the list of links. However, it is unresponsive upon clicking.This is the template I'm using. Here's the .css code for the menu's ul:

.css

.user-menu ul {
    float: left;
    text-align: left;
    position: absolute;
    top: 45px;
    right: 0;
    list-style: none;
    background-color: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12);
    border-radius: 4px;
    display: inline-block;
    width: 190px;
    font-size: 15px;
    transform: translate3d(0,15px,0);
    padding: 16px 8px;
    box-sizing: border-box;
    transition: 0.25s;
    visibility: hidden;
    opacity: 0;
    z-index: 110;
}

If I replace the code in the *ngIf directive like so <div class="user-menu" *ngIf="1==1; else showLogin">, the DOM is responsive:

But when I monitor a user's authentication state *ngIf="afAuth.authState | async as user; else showLogin", it stays unresponsive.

How can this be resolved?

Try changing constructor to: user: Observable; constructor(public afAuth: AngularFireAuth) { this.user = afAuth.authState; } and then keep on html as, *ngIf="user | async; else showLogin" — Shantanu, May 17 '18 at 11:06
The code looks ok. Are you sure there is nothing wrong with the firebase setup ? — CornelC, Sep 19 '19 at 09:52

score 0 · Answer 1 · answered May 21 '18 at 16:23

0

Add this line to the class

user$: Observable<firebase.user>;
    constructor(private afAuth: AngularFireAuth){
    this.user$ = afAuth.authState
    }

Inside the HTML write

<div *ngIf="user$ | async as user; else showLogin">

answered May 21 '18 at 16:23

Sanjeet kumar

3,333
3
17
26

Angular ngIf firebase authentication directive makes DOM unresponsive

1 Answers1