Browser Support for Angular Material

Browser support for Angular material

From the official documentation:

Please note that using Angular Material requires the use of Angular
1.3.x or higher. Angular Material is targeted for all browsers with versions n-1; where n is the current browser version.

Also you can find several polyfill to extend the Browser's compatibility reading in their official forum: https://groups.google.com/forum/#!forum/ngmaterial

Why won't Angular 12 run in Edge or Firefox after adjusting polyfill.ts?

polyfill.ts isn't that required anymore, since

• Edge is now running under chromium
• Firefox does just well on its own.
• E11 is finally dead

This is the only part you'll need in your pollyfill.ts file

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js' // Included with Angular CLI.

/***************************************************************************************************

And everything should work just fine, so please do

npm un classlist.js & npm un web-animations-js

Angular Material and the Safari Browser

At the time of the question, there were indeed problems with Angular Material in Safari:

• layout (mostly flex-related issues)
• dialogs (positions calculated wrongly / dialogs collapsed)
• performance (some of the fancy animations, including ripple, scale from click coords, etc)

You were using Angular Material at version < v0.10.1, which in fact had a lot of problems in general. However, nowadays (and in fact after Angular Material v1.x), those problems are gone (not only in Safari).

Angular Material became more stable and more performant (proof of this are the 7000+ closed issues). Flexbox is also better supported nowadays, which was the cause of many layout issues for versions < 1.x.

For anybody finding the question today that is running Angular Material < v1.x, the answer is simple: upgrade Angular Material to a newer version, preferably v1.1+.

How to detect browser with Angular?

I have used this before and it worked well.

const isIEOrEdge = /msie\s|trident\/|edge\//i.test(window.navigator.userAgent)

---

Related Topics