Tips for adjusting the color of the snackbar in Angular

When a user logs out, I am using snackBar to display a message. I want to change the color of the panel from dark grey to another color and tried using the following solution:

panelClass: ['danger']

supposed to change the panel color to red ('danger'). However, this method does not work as intended:

  message: string = 'You Have Logged out.';
  open() {
    this.snackBar.open(this.message, '', {
      duration: 2000,
      panelClass: ['danger'],
   });
  }

Does anyone know how I can change the panel color to something different?

angulartypescript

Answer №1

If you're working with @angular:

1 - Define a universal CSS style

.custom-css-class {
  background-color: brown;
}

If you prefer not to create a global style, add 

encapsulation: ViewEncapsulation.None
in the component decorator where you want to implement the snackbar with a custom background color (this will apply the style globally):

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
})
export class SagaSnackbarComponent {

2 - Utilize the snackbar service and include the class in the configurations

constructor(private _snackBar: MatSnackBar) {}

...

this._snackBar.open(message, action, {
      panelClass: 'custom-css-class'
    });

You can observe this functioning in a stackblitz demonstration.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Develop a new entity utilizing Array in Javascript

let DaysArray: any = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"] I am looking to transform the above array into an Object structure as shown below: let DaysObject: any = { time: { headerName: "" }, m ...

javascriptarraysobjectfor-looptypescript

The index declaration file has not been uploaded to NPM

After creating a Typescript package and publishing it on NPM, I encountered an issue with the declaration files not being included in the published version. Despite setting declaration: true in the tsconfig.json, only the JavaScript files were being publis ...

javascripttypescriptnpm

A guide on updating a MySQL table using a JSON object in Node.js

I have a JSON Object and need to UPDATE a mySQL table without listing all of the keys individually For an INSERT operation, I use the following code: var arrayValue = Object.keys(obj).map(function(key) { return String("'"+obj[key]+"'"); ...

javascriptmysqlnode.jstypescript

Enhance the appearance of the table footer by implementing pagination with Bootstrap Angular6 Datatable styling

I utilized the angular 6 datatable to paginate the data in a table format. https://www.npmjs.com/package/angular-6-datatable Everything is functioning properly, but I am struggling with styling the footer of mfBootstrapPaginator. The items appear stack ...

htmlcssangulartwitter-bootstrapdatatable

Access basePath within the Next.js AppRouter

Is there a way to access the basePath in Next.js 13 when using AppRouter? To retrieve it, we can simply get router.basePath through the useRouter hook of PageRouter by importing `import { useRouter } from 'next/router' I am currently unable to ...

javascripttypescriptnext.jsnext.js13

Creating a custom currency input directive for ion-input: A step-by-step guide

Update: Initially, I believed the issue lied within the implementation of the ControlValueAccessor, but later discovered that the problem was related to applying the ControlValueAccessor to child elements. The question has been edited to reflect this. I a ...

angularionic2angular2-directives

Optimal practices for checking the status of your request

In my Node.js backend, I used to include a boolean value in my response to indicate successful operations: if(req.body.user.username == null || req.body.user.username == '' || req.body.user.password == null || req.body.user.password == '&ap ...

node.jsangularhttprequest

What sets Angular 2 apart when it comes to utilizing [ngStyle] versus [style.attribute]?

When using Angular 2, what distinguishes the following 2 options for passing a variable value to a style? Are there advantages and disadvantages, or is it simply a matter of personal preference, or is one more adaptable/meant for specific purposes? Option ...

javascriptangular

MaterialUI Divider is designed to dynamically adjust based on the screen size. It appears horizontally on small screens and vertically on

I am currently using a MaterialUI divider that is set to be vertical on md and large screens. However, I want it to switch to being horizontal on xs and sm screens: <Divider orientation="vertical" variant="middle" flexItem /> I h ...

reactjstypescriptmaterial-uistylingdivider

Issue with displaying Angular index.html page post-build

My Angular application runs smoothly on ng serve, but after building and uploading with ng build --prod, the index.html file fails to open. I've tried using various base href configurations like <base href="#">, <base href="/& ...

angulartypescript

Tips for adding an extensive collection of fixed attributes to a function using Typescript

I am attempting to write a function that includes a lengthy list of static strings attached as properties, all returning the property as a string value: const arr = ["a", "b", "c"]; // there are around 140 items in the actual list const f = (tag: strin ...

typescript

Navigating between components in different modules using Angular 5

I have a home component within the homeModule and a contactUs component within the contactModule. When I click cancel on the contactUs component, it should redirect me to the Home component. Here are the routes: import {NgModule} from '@angular/cor ...

angulartypescript

Understanding Express JS's handling of boolean values when reading them as strings

Using axios for communication between my React app and express API has presented an unexpected issue. Before sending the data, the value is identified as a boolean (as intended), but upon receival in the API, it gets converted to and stored as a string. T ...

reactjstypescriptexpress

"I am looking for a way to retrieve dynamic data from a (click) event in Angular. Can

Within my component, I have a video loaded in an i tag on a click event. The challenge is accessing the video ID from the video.component.ts file in order to dynamically load a new video. The solution has been elusive so far. <li *ngFor="let video of c ...

javascripthtmlangular

My component fails to load using Angular Router even though the URL is correct

I have been experiencing an issue while trying to load my Angular component using the router. The component never appears on the screen and there are no error messages displayed. app-routing-module { path: '', redirectTo: '/home', ...

javascriptangulartypescriptangular8

Get rid of the "No data" tag from the nz-table within a Simple Component

(Apologies for any language errors, English is not my native tongue) I'm working on a web page utilizing the smart and dumb components architecture. The issue I'm facing is that after fetching data from an API in my smart component, the table in ...

angularng-zorro-antd

Is there a way to create two slide toggles with unique colors on a single page?

How can I create two slide toggles with a unique color scheme on the same page? Looking to add some flair to your website with custom-colored slide toggles? Learn how to effortlessly incorporate two of them onto a single webpage here. ...

angularmaterial-ui

Troubleshooting a problem with Angular2 involving the This.http.get function

Currently, I am delving into Angular 2 and have set up an ASP.NET WebApi locally hosted in IIS at http://localhost:8081/ping. The API call successfully returns a string serialized as a JSON Object. Below is the code for my service: import { Injectable } ...

angularangular2-servicesangular2-http

Navigating with nginx

My Angular2 application works perfectly fine when using the local webpack dev server. However, after deploying the application on a server behind nginx, I am facing an issue. I can navigate using application links, but if I enter a URL directly into the br ...

angularnginxangular2-routing

The altered closure variable ts remains undetectable

Check out the live demonstration I made changes to the flag variable, but TypeScript did not recognize it. Could this be a coding issue? function fn () { let flag = true function f () { // alter the value of flag flag = false } for (let ...

typescript