I'm experiencing issues with the CSS not loading in Angular notifier despite diligently following the guidelines from the documentation. This problem arises with Angular 9 using notifier version 6.0

I'm facing an issue with loading the Angular notifier CSS. Despite following all the instructions on the installer page, I can't seem to get it to work properly.

        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        ComponentsModule,
        RouterModule,
        AppRoutingModule,
        MatToolbarModule,
        MatCardModule,
        MatFormFieldModule,
        MatProgressSpinnerModule,
        HttpClientModule,
        NotifierModule.withConfig(customNotifierOptions),
    ],
  declarations: [
    AppComponent,
    AdminLayoutComponent,
    LoginComponent
  ],

const customNotifierOptions: NotifierOptions = {
    position: {
        horizontal: {
            position: 'right',
            distance: 12
        },
        vertical: {
            position: 'bottom',
            distance: 12,
            gap: 10
        }
    },
    theme: 'material',
    behaviour: {
        autoHide: 5000,
        onClick: 'hide',
        onMouseover: 'pauseAutoHide',
        showDismissButton: true,
        stacking: 4
    },
    animations: {
        enabled: true,
        show: {
            preset: 'slide',
            speed: 300,
            easing: 'ease'
        },
        hide: {
            preset: 'fade',
            speed: 300,
            easing: 'ease',
            offset: 50
        },
        shift: {
            speed: 300,
            easing: 'ease'
        },
        overlap: 150
    }
};

The app.component.css file includes this: @import '~angular-notifier/styles';

I'm puzzled as to what mistake I might be making. Any insights?

angulartypescript

Answer №2

To display notifications, ensure you include the 

<notifier-container></notifier-container>
code at the end of each HTML page.

Answer №3

I encountered similar issues while working with Angular 15, specifically when trying to import styles from "~angular-notifier/styles" into my styles.css file.

After some troubleshooting, I found a solution by modifying the angular.json file in the /projects/'project_name'/architect/build/options/styles section.

*general styles*
"node_modules/angular-notifier/styles/core.css",
"node_modules/angular-notifier/styles/themes/theme-material.css",
*for success toast*
"node_modules/angular-notifier/styles/types/type-success.css",
*for error toast*
"node_modules/angular-notifier/styles/types/type-error.css"

In addition, I discovered that other styles such as default, info, and warning can be found in the types folder within angular-notifier.

Answer №4

I managed to get it to function by importing 

@import "angular-notifier/styles";
instead of 
@import "~/angular-notifier/styles"
; in my styles.scss located at the project's root directory.

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

Generating a fresh instance of input value in Angular2

In the hierarchy of components, I have a grand parent component where I am passing the "selectedValue" to the parent component like so: @Component({ selector: 'grand-parent', template: '<parent [details]="selectedValue" ></par ...

angulartypescript

Potential breakpoint (Breakpoint established but not yet linked)

My experience with debugging my Angular app in Chrome was going smoothly through the Chrome Debugger extension with automatic settings. However, something changed after a Windows 7 reboot and all my breakpoints became inactive. I suspect this was due to a ...

angulargoogle-chromedebuggingvisual-studio-codeelectron

No members were exported by the module, please export an interface

I encountered this error: "/Users/robot/code/slg-fe/src/app/leaderboards/leaderboards.component.ts (2,10): Module '"/Users/robot/code/slg-fe/src/app/leaderboards/leaderboard"' has no exported member 'Leaderboard'. This is what my le ...

angularjstypescript

Invoke an ActionCreator within a different ActionCreator

Calling an ActionCreator from another file is proving to be a challenge... The products.ts file contains the ActionCreators and Reducers for Products... import { setStock } from './Store.ts'; //.... export const addProduct = (product: IProduct) ...

reactjstypescriptredux

Property ngIf in Angular is not being supplied by any relevant directive within the embedded template

When attempting to use ngIf, I encountered an error with a red underline. The error message states: "Property ngIf is not provided by any applicable directive on an embedded template." I then attempted to import commonModel, but received a new error: "src ...

angulartypescriptangular16

"Error: In TypeScript, the Child Method is not recognized within the Parent

I'm a newcomer to TypeScript and object-oriented programming. I am attempting to use a method from a child class in the parent class, but for some reason, the method is not being recognized. Below is my Child class: import {Ouvrage} from "./Clas ...

typescriptoop

Is there a way to verify the content inside the :before selector using Jasmine within an Angular 6 application?

Looking to test whether the content of a label changes based on the checkbox being checked using Jasmine in an Angular 6 project. Is this feasible? Code snippet: HTML <input id="myCheck" class="checkbox" type="checkbox" /> <label for="myCheck" ...

javascriptcssangularjasminekarma-jasmine

Using Mongoose with TypeScript: Receiving an error message stating "Expected 0 arguments, but received 1" while trying to construct an ObjectId... surprisingly,

Encountering an issue where I receive the error message "Expected 0 arguments, but got 1" on this line (idProduct is a string) : |new mongoose.Types.ObjectId(idProduct) Interestingly, even though it's underlined, the code still functions correctly.. ...

node.jstypescriptmongodbmongoose

Angular Forms, mark a form as invalid if a p-select element retains its original value

I am looking to prevent the submit button from being enabled until a user makes changes in any of the form controls. The challenge I'm facing is that while required input fields are easy to handle, there is also a select control with three options. De ...

angularformsreactiveform-control

Unable to assign the value 'hello' to an undefined property in TypeScript

I'm attempting to define a class in TypeScript, but I keep encountering the error shown below. Here is the execution log where the error occurs: [LOG]: "adding" [LOG]: undefined [ERR]: Cannot set property 'hello' of undefined class Cust ...

javascripttypescript

Exploring Angular: How to Access HTTP Headers and Form Data from POST Request

I am currently working with an authentication system that operates as follows: Users are directed to a third-party login page Users input their credentials The website then redirects the user back to my site, including an auth token in a POST request. Is ...

angularhttpauthenticationjwttoken

Tips for setting up automatic saving of a reactive form in Angular 4

Is there a way to automatically save content in a reactive form once the form is validated, without the need to click a save button? ...

angularautosaveangular-reactive-forms

What is the recommended approach for storing and retrieving images in the Angular 5 framework?

I have an Angular 5 app that utilizes Java rest services. The Java application stores images in a folder located outside of the Java app itself. Now, my goal is for the Angular app to be able to read these images. Although it makes sense to store them outs ...

angularfile

Arranging data in a table by date with "."

My current use case involves working with a table that contains dates and empty strings. Despite expecting the sorting to behave a certain way, I've encountered an issue. Normally, when sorting with strings, the empty string would typically be placed ...

angulartypescriptsorting

Unlocking rotation on a single screen in a react native application can be achieved by altering

I attempted to use react-native-orientation within a webview in order to make it the only view that would rotate. import React, {useEffect} from 'react'; import { WebView } from 'react-native-webview'; import Orientation from "react-na ...

typescriptreact-nativerotationscreen-rotation

Is there a way in Angular to dynamically load modules based on the user's authentication status?

Consider this scenario: if a user is authenticated on www.example.com, one specific module should be loaded; otherwise, a different module should be loaded. I attempted to use guards, but the outcome was not what I anticipated. Since I am new to Angular, ...

angularangular-routerangular-router-guardsangular-route-guards

Is it possible to create a Typescript interface that includes computed keys?

When defining a Typescript interface with computed keys, I encountered some design challenges: const NAMESPACE = 'com.pizza' const KEY_SAUCE = `${NAMESPACE}/sauce` const KEY_CRUST = `${NAMESPACE}/crust` interface PizzaToken { radius: num ...

javascripttypescriptinterfacetsc

Limiting the number of items shown in the dropdown panel of an NgSelect

Currently, I am utilizing Angular ngselect to showcase a dropdown menu with multiple options. However, due to the limited screen space, I need to restrict the number of items visible in the dropdown to about 3, allowing users to scroll through the rest. W ...

angulartypescriptdropdownangular-ngselect

Combining Objects in Angular 2: Extending Your Data Structures

Looking to combine 2 objects in Angular 2? In AngularJS 1, we used the "merge" and "extend" functions: https://docs.angularjs.org/api/ng/function/angular.merge https://docs.angularjs.org/api/ng/function/angular.extend However, it seems like there is no e ...

javascriptangularjsangular

How to successfully extract and understand JSON data in Angular that has been delivered from a Spring controller

I am facing a unique challenge while trying to utilize JSON data obtained from a Spring API to populate a list in Angular. Within the datasets-list.component.ts file, I have the following code: import { Component, OnInit } from '@angular/core'; i ...

jsonangularrestngfor