Angular Material Snackbar not working after login

  angular, angular-material, nebular

I am building a sample application using Angular material and nebular UI theme in which there is a Login page on app loading. I need to show snackbar(toast message) if there is a successful login or unsuccessful login.I have installed material theme and imported MatSnackBarbut it is not showing the snackbar and displaying the error in the console.

Attached are the code files and images for the reference.

login.component.html

<div class="nihon-suido-image">
  <img src="assets/images/nihon-suido-consultants.jpeg" alt="Nihon Suido" class="nihon-suido">
</div>
<div class="nihon-suido-div">
  <mat-card [nbSpinner]="loading" class="login-card">
    <form class="login-form">
      <mat-form-field class="login-full-width">
        <mat-label>Email Address:</mat-label>
        <input matInput placeholder="" #email>
      </mat-form-field>
      <mat-form-field class="login-full-width">
        <mat-label>Password:</mat-label>
        <input matInput type="password" #password>
      </mat-form-field>
      <button mat-raised-button class="sign-in" (click)="signIn($event,email.value,password.value)">Sign In</button>
      <a ><label class="forgot-password">Forgot Password ?</label></a>

    </form>
  </mat-card>
</div>

login.component.ts

import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {CookieService} from 'ngx-cookie-service';
import {AuthService} from '../../services/auth.service';
import {MatSnackBar} from "@angular/material/snack-bar";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  /*Properties*/
  loading: boolean = false;
  private index: number = 0;

  constructor(public authService: AuthService,
              private router: Router,
              private cookieService: CookieService,
              public snackBar: MatSnackBar) {
  }

  ngOnInit() {

  }
  signIn($event: any, email: string, pass: string): void {

    this.loading = true;
    const data = {
      userName: email,
      password: pass
    };


    this.authService.logIn(data).subscribe(response => {
      if (response.isValid == true) {
        this.cookieService.set('username', response.username);
        this.cookieService.set('password', response.username);
        this.cookieService.set('isLoggedIn', response.isValid);
        console.log('Inside Login function');
        this.router.navigateByUrl('/db');
        this.loading = false;
      }
      else {
        this.loading = false;
        this.snackBar.open('Error');
      }

    }, error => {
      console.log(error);
    });
    $event.preventDefault();
  }

}

Error: Cannot read property ‘appendChild’ of undefined

Error after clicking login button and no toaster displaying

Any solution please ?

Source: Angular Material Quesions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.