ng2-toastr in conjunction with akveo/ng2-admin - Styles not being applied

I recently integrated ng2-toastr into my akveo/ng2-admin dashboard, utilizing the latest version with Angular 4. Following the provided installation documentation, I imported the necessary CSS in the index.html file and declared ToastModule in the app.module.ts file.

Additionally, I imported ToastsManager in my component and assigned the ViewContainerRef. The module loads successfully without any errors encountered during the process.

However, upon calling 

this.toastr.success('You are awesome!', 'Success!');
, the displayed text does not reflect the defined CSS styles.

One important note is that ng2-admin utilizes WebPack as a bundler.

If anyone has any insights or suggestions on this issue, it would be greatly appreciated! Thank you in advance for your help!

To learn more about toastr, visit: https://github.com/PointInside/ng2-toastr

For further information on ng2-admin, please refer to: enter link description here

angulartypescripttoastr

Answer №1

I pasted the CSS file into the theme directory and then included it in the app.component.ts using the command below:

import 'style-loader!./theme/ng2-toastr/ng2-toastr.scss';

Cheers, Serge.

Answer №2

Include

@import '../node_modules/ng2-toastr/ng2-toastr.css';

into ./src/app/theme/theme.cscc

This specific file is utilized for incorporating universal styles or linking to other files, preventing the need to duplicate them.

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

How come TypeScript does not generate an error when attempting to import a default export that does not exist?

As I work on converting my code from non-TypeScript CommonJS files to TypeScript ES6 modules, I encountered an issue with the import statements. Specifically, I needed to use import * as x instead of import x: The original snippet looked like this: const ...

typescriptes6-modules

Guide to transmitting a "token" to an "API" using "React"

As a novice developer, I am facing a challenge. When users log in to our website, a JWT is created. I need to then pass this token to the API on button click. If the backend call is successful, the API response should be displayed. If not, it should show ...

javascriptreactjstypescriptmaterial-uinext.js

Updating the active tab in the navigation bar whenever the router navigates

I'm struggling with changing the active tab in Angular 2 and Bootstrap 4. I have managed to get the active tab to change using this code snippet: navbar.component.html <nav class="navbar navbar-fixed-top navbar-light bg-faded"> <button cl ...

htmlcssangularbootstrap-4

What is the method to access the value of a different model in ExpressJs?

I am working on a MEAN stack and have a model for employee information. I want to include the store name where they will work from a separate stores model. Can you review my approach below? Employee Model: var mongoose = require('mongoose'); va ...

node.jsangularexpress

Unable to locate the reference to 'Handlebars' in the code

I am currently attempting to implement handlebars in Typescript, but I encountered an error. /// <reference path="../../../jquery.d.ts" /> /// <reference path="../../../require.d.ts" /> My issue lies in referencing the handlebars definition f ...

javascripttypescripthandlebars.js

Can you identify the type of component being passed in a Higher Order Component?

I am currently in the process of converting a protectedRoute HOC from Javascript to TypeScript while using AWS-Amplify. This higher-order component will serve as a way to secure routes that require authentication. If the user is not logged in, they will b ...

reactjstypescript

A software error was encountered: Unrecognized or incorrect character detected

After running ng serve, I keep encountering the following error: An unhandled exception occurred: Invalid or unexpected token See "\mypc_path\AppData\Local\Temp\ng-Aij37E\angular-errors.log" for further details. The ...

angular

What is the best way to convert the NextJS router.query.id to a string?

As a newcomer to TypeScript and the T3 stack (React Query / Tanstack Query), I am facing an issue with typing companyId as string. I want to avoid having to type companyId as string every time I use it in my code, but I'm struggling to find the best p ...

typescriptnext.jsreact-typescripttrpc.iot3

Using Angular 5 to make a series of API calls, fetching a large object while also updating the UI with progress

I'm currently working on an Angular 5 Project where speed and responsiveness are crucial when retrieving a large object from the server. To optimize performance, I have broken down the object (resembling a Word Document) into main components (similar ...

angulartypescriptobservable

Create metadata.json and ngsummary.json files in Angular 2

Hello fellow Angular 2 developers, I've been running into some trouble trying to find comprehensive documentation on the angular 2 compiler (ngc). Here's my situation: I have a directory that contains an Angular 2 logging library with a main fi ...

angularangular-compiler-clitypescript-compiler-api

What steps can be taken to fix error TS2731 within this code snippet?

I've been working through a book and encountered an issue with the code below. // This code defines a function called printProperty that has two generic type parameters function printProperty<T, K extends keyof T> (object: T, key: K) { let pro ...

typescriptgenericsconstraints

"Efficient ways to calculate the total sum of an array of objects based on a specific property

I currently have a straightforward method that calculates the total sum of an object array based on one of the properties. const calculateSum = <T extends object, K extends keyof T>(array: T[], property : K) : number =>{ let total = 0; if ( ...

typescript

Include a class in ul > li elements upon page load in Angular4

I attempted to add a class to each "li" element in an Angular4 page, but the class was not applied. Here is the relevant HTML code: <ul class="pagination"> <button class="previous" (click)="previous()">Previous</button> <button ...

javascriptjqueryangulartypescript

The module for the class could not be identified during the ng build process when using the --

Encountering an error when running: ng build --prod However, ng build works without any issues. Despite searching for solutions on Stack Overflow, none of them resolved the problem. Error: ng build --prod Cannot determine the module for class X! ...

javascriptjqueryangulartypescript

The TypeScript inference feature is not functioning correctly

Consider the following definitions- I am confused why TypeScript fails to infer the types correctly. If you have a solution, please share! Important Notes: * Ensure that the "Strict Null Check" option is enabled. * The code includes c ...

javascripttypescripttype-inference

Is there a way for me to dissect a segment of the source map produced by source-map-explorer without any reference?

I'm currently working on an Angular 12 application and I've noticed that the bundle size is unexpectedly large, even though there are only a few components in the application. After using source-map-explorer to analyze the bundle, I discovered th ...

angulardictionarybundleexplorer

In the latest release of Angular2, some routers are lacking a provider

After the recent upgrade from beta to RC1, I've encountered some routing issues. While some routes are functioning properly, others throw the following exception: Error: Uncaught (in promise): EXCEPTION: Error in :0:0 ORIGINAL EXCEPTION: No provider ...

angularangular2-routing

Remove an item from the DOM instantly with React

Having trouble synchronously removing a child from the container? Here is a simplified code snippet demonstrating the current solution using the useState hook. type ChildProps = { index: number; id: string; remove: (index: number) => void; }; fun ...

javascriptreactjstypescriptwebreact-hooks

Utilizing TypeScript to Define Object Properties with String Keys and Values within Parentheses

I am in the process of developing a telegram bot I have the need to save all my messages as constants My message schema is structured as follows: type MessagesSchema = { [K in keyof typeof MessagesEnum]: string } Here is an example implementatio ...

javascripttypescript

Error message indicating a problem with global typings in Angular 2 when using Webpack is displayed

My project is utilizing angular 2 with webpack and during the setup process, I encountered Duplicate identifier errors when running the webpack watcher: ERROR in [default] /angular/typings/globals/node/index.d.ts:370:8 Duplicate identifier 'unescape& ...

typescriptangularnpmwebpacktyping