CODEWITHSUNDEEP
angulartypescriptangular-material
Rinzler21
Rinzler21

Reputation: 476

SnackBar doesnt show up in Angular 9

I have one SnackBar that should be displayed in a login when you put the incorrect information, but when that happen the SnackBar doesnt show up its overlap by other element, how can i fix it?

Here below i will put how I'm trying to do it

sendAdmin() is the function that is called by a button in the page

snackMessage:string = 'Introduce valid data';

  constructor(private _builder:FormBuilder,private router: Router,
    private adminService: AdminService,public _snackBar: MatSnackBar) { }

    openSnackBar(message: string){
      this._snackBar.open(message, 'X', {
        duration: 3000,
      });
    }
  sendAdmin(){
    this.bSignIn = true;
    let formData = new FormData();
    formData.append('email', this.loginForm.get('email').value);
    formData.append('password', this.loginForm.get('password').value);

    this.adminService.validateAdminCredentials(formData)
    .subscribe(
      res => {
        this.bSignIn = false;
        let auxRes: any = res;

        if(auxRes.type == 'success'){
          let auxUser = {
            personId: auxRes.id,
            clientId: auxRes.client_id,
            firstName: auxRes.first_name
          }
          this.isSigned = true;
          localStorage.setItem('leadLoggedAdmin', JSON.stringify(auxUser));
          this.goToAdminDashboard(auxRes.first_name);
        }  
      },
      err => {
        this.bSignIn = false;
        this.openSnackBar(this.snackMessage);
        //window.alert('Introduce valid data');
      }
    );
  }

Also I'm importing import {MatSnackBar} from '@angular/material/snack-bar';

This is how it looks like right now, overlap

enter image description here

Upvotes: 1

Views: 2077

Answers (4)

Rinzler21
Rinzler21

Reputation: 476

I solve it putting to the bottom bar a class, like this:

.behind{
  z-index: 10;
}

Upvotes: 0

Hallah
Hallah

Reputation: 109

Try importing your module MatSnackBarModule in app.module file and remove its import from the shared module.

EDIT: Did you check your console? Is there any exception thrown?

Updated Answer

I think you should need to set positioning of snack bar using verticalPosition as top

See the API

Upvotes: 0

andsilver
andsilver

Reputation: 5972

You have to import MatSnackBarModule in your module where the component declared. If you did it, please make sure that you import material theme style in your styles.scss or in styles section in angular.json.

If an element overlapped, please try this:

this._snackBar.open(message, 'X', {
   duration: 3000,
   panelClass: 'snack-bar'
});

And set z-index: 99 on the snack-bar class. You need to define this class in styles.scss

Upvotes: 2

Nabel
Nabel

Reputation: 1956

How is this component rendered? Is it possible that this component is being re-rendered due to a ng-if or something like that?

Upvotes: 0

Related Questions