CODEWITHSUNDEEP
angular
ajay
ajay

Reputation: 129

facing issue in applying the different background color for snackbar in angular

I have a scenario in my application where iam keeping the snackbar method in the common service so that i can call the snackbar wherever i need to show in the components.i need to show green colour only to some snackbar the remaining snackbar background colors are black.im able to apply the green background colour using panelClass but the issue im facing is sometime im getting the green color showsnackbar to the other snackbars also. can anyone suggest how to solve this issue.

 /** SHOWS the snack bar */
  showSnackbar(msg) {
    this.snackbar.open(msg, '', {
      duration: 2500,
      verticalPosition: 'bottom',
      horizontalPosition: 'right',
      panelClass: ['refresh-snackbar']
    });
  };

this is the method im keeping it in the common service .

 /** REFRESH client **/
  refreshClient(changePage?:boolean) {
    this.spinnerService.show();
    this.clientService.refreshClient().subscribe(res => {
     // this.defaultPaginateClient();
     this.paginateClient(changePage);
     this.helper.showSnackbar('Table Refreshed Successfully');
     this.spinnerService.hide();
    }, err => {
      console.log(err);
    })
  }

In this method im calling the snackbar, but im using snackbar in some other methods of different components, i need to apply the green background color for the refresh method only which i used in several components.

::ng-deep .refresh-snackbar{
  background-color: green !important;
}
```

this is the code im using it in css

Upvotes: 0

Views: 192

Answers (1)

Jasdeep Singh
Jasdeep Singh

Reputation: 8301

You can use an extra parameter while opening snackbar. You can keep it as true when you need green background else keep it as false.

And use that parameter while adding panelClass to snackbar.

 /** SHOWS the snack bar */
  showSnackbar(msg, isGreen:boolean = false) {
    this.snackbar.open(msg, '', {
      duration: 2500,
      verticalPosition: 'bottom',
      horizontalPosition: 'right',
      panelClass: isGreen ? 'refresh-snackbar': '',
    });
  };
  
   /** REFRESH client **/
  refreshClient(changePage?:boolean) {
    this.spinnerService.show();
    this.clientService.refreshClient().subscribe(res => {
     // this.defaultPaginateClient();
     this.paginateClient(changePage);
     this.helper.showSnackbar('Table Refreshed Successfully', true);
     this.spinnerService.hide();
    }, err => {
      console.log(err);
    })
  }

Upvotes: 1

Related Questions