While implementing toastr notifications in my Angular application, I encountered an issue with compatibility across browsers. Specifically, the ngx-toastr module functions properly in Chrome and Firefox, but not in Internet Explorer. Interestingly, it works when called within the ngOninit() function, but fails to work in any other function. . import { ToastrModule } from 'ngx-toastr';
In my situation, I encountered an issue where the DOM showed the toast container but the actual toast was not visible. To confirm if this is your problem, inspect the DOM and search for the "toast-container" text, indicating the div container's presence.
After attempting to uncomment polyfills and various troubleshooting methods, I discovered that Internet Explorer (IE) was setting the toast's display property to "none" for unknown reasons.
The solution that resolved the issue for me was adding the following CSS code to my styles.scss file:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.toast {
display: block !important;
}
}
@supports (-ms-accelerator:true) {
/* IE Edge 12+ CSS styles go here */
.toast {
display: block !important;
}
}
I hope this information proves helpful in resolving your issue!
polyfills.ts
/**
This polyfills.ts file is essential for Angular and loads before the main app.
You have the option to add custom polyfills to this file as needed.
*
The file is structured into two main sections:
file.
*
The current configuration caters to "evergreen" browsers; the latest versions of browsers that
auto-update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
Edge >= 13 on desktop, and iOS 10 and Chrome on mobile.
*
For more details, visit https://angular.io/docs/ts/latest/guide/browser-support.html
*/
/***************************************************************************************************
BROWSER POLYFILLS
*/
/** The following polyfills are required for IE9, IE10, and IE11. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
/** The following are needed for NgClass support on SVG elements in IE10 and IE11 */
import 'classlist.js'; // Execute npm install --save classlist.js.
/** The Reflect API needs these for IE10 and IE11 */
import 'core-js/es6/reflect';
/** Evergreen browsers require the below polyfills. **/
// Required for reflect-metadata in JIT. If exclusively using Angular decorators with AOT, this can be excluded.
import 'core-js/es7/reflect';
/**
Web Animations
@angular/platform-browser/animationsNecessary only if AnimationBuilder is utilized within the app and targeting IE/Edge or Safari.
Standard animation support in Angular does not mandate any polyfills (as of Angular 6.0).
**/
import 'web-animations-js'; // Execute
npm install --save web-animations-js/**
By default, zone.js will patch all possible macroTask and DomEvents
User can disable parts of macroTask/DomEvents patch by setting the following flags
*/
(window as any).__Zone_disable_requestAnimationFrame = true; // Disables patch requestAnimationFrame
(window as any).__Zone_disable_on_property = true; // Disables patch onProperty like onclick
(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // Disables patching specified eventNames
/*
In IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
With the flag below, it bypasses zone.js patch for IE/Edge
*/
(window as any).__Zone_enable_cross_context_check = true;
/***************************************************************************************************
Zone JS is a prerequisite for Angular itself by default.
*/
import 'zone.js/dist/zone'; // Part of Angular CLI.
/***************************************************************************************************
APPLICATION IMPORTS
*/
// Adds global to window, assigning the value of window itself.
(window as any)['global'] = window;
If (!Element.prototype.matches) {
Element.prototype.matches = (<any>Element.prototype).msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
}
package.json { "name": "xtreme-admin-angular", "version": "0.0.0", "scripts": { "ng": "ng", "start": "node app.js", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "postinstall": "node patch-webpack.js" }, "private": true, "dependencies": { "@agm/core": "^1.0.0-beta.7", "@angular/animations": "^7.0.1", "@angular/common": "^7.0.1", "@angular/compiler": "^7.0.1", ... }, "devDependencies": { "@angular-builders/custom-webpack": "^8.2.0", "@angular-devkit/build-angular": "^0.10.7", ... }, "browser": { "crypto": false, "stream": false } }
Hi there, I'm currently learning Ionic 2 and I recently created an array that I want to loop through in an ion-list. This is my produk.ts import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angul ...
I'm having trouble figuring out how to properly copy an array along with all its elements. In my model, I have a name and options, both of which are strings. This is what I currently have: const myArrayToDuplicate = [myModel, myModel, myModel] My ...
I am currently working on branding a SharePoint website and have encountered an issue with aligning background colors for the title area and body of some web parts. Despite applying background colors, the alignment between the title and body areas is off ( ...
Despite setting the meta tags for image, description, and keywords dynamically in Angular 13.0.2 using API calls, they do not show up on any checker or work as expected. It seems like the meta service is not functioning properly, even though the tags are p ...
Currently, I am working on adding an additional column with checkboxes to the Mat table example. However, I noticed that when I click on one checkbox in a column, the checkboxes in other columns also get selected. How can I implement this so that only th ...
I'm working on my new portfolio and I've run into an issue with the navigation placement that I can't seem to solve. The text should be aligned with the lines on the sides, but instead it's shifted right and down. I'm struggling t ...
For a school project, I am creating a login form using Angular. Below is the HTML code: <input type="text" ng-model="username" name="username" /> <input type="text" ng-model="password" name="password" /> <button (click)="submit(username, pa ...
Hey there! I'm currently using the Angular Material Auto complete component in my Angular 7 app and I'm trying to find a way to bind a value from an API response to it. Can someone help me out with a solution for this? HTML: <mat-form-field> ...
Is there a preferred method for configuring 3rd party components? I frequently use primeng p-table in various components throughout my application. I am looking to configure it globally for the entire application - enabling the paginator by default, setti ...
Currently, I am working on developing a mobile web app using jQuery Mobile. I am now looking to implement a back-to-top action. Typically, this can be done with the following code snippet: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
I am facing an issue with a div inside another div. The child div contains text, and when I apply animation to decrease the width and height, the text inside gets reset according to the new size. While I understand why this happens, I want to find a way to ...
Need help with creating an HTML etch-a-sketch! I have a div container with multiple div elements inside it, all set up with CSS grid display. HTML structure: <div id="canvas"></div> To populate the canvas with div elements, I'v ...
Attempting to style an active button with a small transition when it receives that attribute has been a challenge. The same issue occurs with the paragraph rendered from the data file. function Pagination() { const [selected, setSelected] = useState(0) ...
After uploading an Angular app with Travis on Github pages using the gh-pages branch, I'm encountering a frustrating issue. The page is blank and there are several error messages in the console: Failed to load resource: https://hdz.github.io/runtime.j ...
I have a component that dynamically renders data based on the URL '/lp/:pageId'. The :pageId parameter is used to fetch data from the server in the ngOnInit() lifecycle hook. ngOnInit(){ this.apiHelper.getData(this.route.snapshot.params.pageId) ...
I am attempting to create a design where the entire content of a div is displayed initially, and then after clicking a button labeled "show less", only 300px of the content will be shown with the button changing to "show more". <div className="bod ...
Currently, my code is set up to access a website and click on each row in the table which then opens a new window. My goal is to extract one specific piece of information from this new window, but I am struggling to utilize CSS selectors to retrieve the f ...
On my webpage, users can input text into a textarea. However, I want to ensure that the text they provide is properly sanitized before being saved as a string. I am struggling to understand how to manually sanitize this data using DomSanitizationService. ...
I am looking to align the content of a div element in a single row while dealing with an unknown width of the ul element due to varying child li elements. The h2 will always take up the remaining space, and each li element has a width of 20px. The desired ...
My goal is to have my website icon appear in WhatsApp when I share it (similar to the example below). https://i.stack.imgur.com/KCWi8.jpg I initially tried using this code, but it didn't work: <link rel="shortcut icon" href="css/img/favicon/favi ...