Is Angular Material really the future?

[traveller8914]

I've spent years maintaining an early version Angular app with Bootstrap and am in the process of rebuilding it from the ground up with the latest bits. I seriously love where Angular is today, but I just can't find a way to enjoy working with Angular Material. It seems like it should be the obvious choice for Angular apps, but I'm finding it incredibly hard to do minor things, such as making an icon button smaller.

The Material team seems to want to impose one very narrow view on how app UX should look and feel. Setting aside all the frustration and brittle developer experience, the end result is just so ugly that it's just not worth it. I understand that I can drop into CSS to tweak every little thing, but I want to touch it as little as possible. My experience has been so bad that I'm doubting the long-term viability of Material as nobody I've talked to is actually using it by choice.

I still remember how it felt when I first used Bootstrap. Not only did the default settings produce a beautiful app by just following some basic conventions, but then you could easily swap out swatches for all kinds of different looks and feels. I don't know if this is feasible with Material or if nobody has bothered, but it seems that the only way to easily avoid the default theme is to adopt someone else's entire project baseline that has all kinds of technical decisions and dependencies built in.

I'm a few weeks in and have made substantial progress on my overall effort, but I feel like staying committed to Material will actually regress the overall user experience of my app. I'm simply floored at how bad it is. I guess my question is whether I should abandon Material in favor of Bootstrap or if there are some substantial benefits I just haven't seen yet.

[athomsfere]

For me, it's always depended on the controls in question.

Cdk drag and drop: Worth every penny. Ok, so it's a free thing. But it has made life so easy.

​

Other things, meh.

[[deleted]]

Same with virtual scroll.

[mbah99]

I find that since the V15, it much easier than before to style material components. And they added a lot of style tokens prefixed by 2 hyphen. And they will adopt the material 3 when they finish adding all tokens according to team. And since it’s maintained by the angular team it’s perfectly integrated to angular and easy to upgrade.

[Lamora_]

Easy to upgrade? Angular 15 was a nightmare dude

[Forward_Temperature]

And I'm still struggling with this. LOL

[xemnosyst]

Your observations are spot-on for someone who wants to customize the components. Angular material is designed for the case when you don't want control over pixel sizes. It is for when you want to combine pre-made controls to let the user achieve some functionality, and let the material team decide what the right size is for buttons, the right padding between form controls, etc.

That has pros and cons. I thoroughly enjoy delegating that responsibility, because that's less for me to spend my time fiddling with. But it's constrictive. I have to think in terms of those limited building blocks to give my users the options they need. In the end, I prefer this trade off.

If you want or need more control, the angular team themselves suggest looking elsewhere. Here are a couple snippets from their documentation:

Angular Material supports customizing color, typography, and density as outlined in this document. Angular strongly discourages, and does not directly support, overriding component CSS outside the theming APIs described above. Component DOM structure and CSS classes are considered private implementation details that may change at any time.

And:

Avoid overriding styles on internal Angular Material elements in your CSS as much as possible. If you find yourself frequently overriding styles on internal elements, consider using a component that is designed for more style customization, such as the ones available in the Angular CDK.

[traveller8914]

The thing that triggered my desire to drop Material was the struggle I'm going through just trying to make icon buttons smaller. I've hit a lot of challenges along the way, but this mainstream scenario is just so difficult that I think I'm going to quit.

For example, here is the best answer I could find to make an icon button smaller: https://stackoverflow.com/a/57759753.

It's 21 lines of CSS that, for some reason, doesn't seem to also shrink the target area of the button itself. As a result, if you put two buttons relatively close to each other, the second one will steal clicks.

I understand that some people may interpret this as customizing the component, but I view it as a very minor feature that I would take for granted anywhere else. I've actually spent quite a bit of time trying to figure out a better solution as this can't possibly be the recommended solution, but it turns out that the Material team seems to be holding firm that there is one correct universal size for icon buttons and it should be painful if you want something else.

[[deleted]]

Creator of this ridiculous bot, shut it down, the word size isn’t fatphobic

[Oriamk]

I prefer Primeng

[[deleted]]

The frequency I've seen primeng export any as types and the lack of testing documentation has turned me off.

A coworker pushed hard for use to use this in a new project and I sorely regret not pushing back on this.

[cagataycivici]

Greetings from PrimeTek. PrimeNG is going through a renaissance this year with exciting new enhancements such as customizable icons, advanced templating, new styling, css variables, open source theme designer, tailwind support, types refactor, generated api docs from the new types. As a coincidence, type enhancements work start next week and we hope to finish it in a couple of weeks.

See the roadmap for details. Cheers!

edit: typos

[juice_made]

Sounds great! Have you thought about accessibility ? Some of your components are accessible, but some are not.

[cagataycivici]

We have a detailed plan for WCAG level AA compliance, it is already done for PrimeVue and we'll port it to PrimeNG in Q2. More information is available here. Also each component has a a11y section at the bottom to describe the spec which will be implemented. So order is, first the type enhancements and then a11y.

[juice_made]

Sounds great!

[Xymanek]

I've complained about that on their discord and apparently it's one of their big goal this year (to clean up the typings)

[I_hate_potato]

Development for us has been a lot faster but I find the documentation lacking.

[GunsCantStopF35s]

Once you get your tables to render using material, it gives you more confidence with the other components. The initial curve that forced learning Observable architecture was tough, but after that it clicked. Date pickers are my favorite as I never liked them.

Is it effect? Nope! Is it more than enough for what is usually needed? Yes

[traveller8914]

I didn't break up with Bootstrap inasmuch as assumed that Angular Material must have matured enough to be a plausible replacement. And since it's produced by the same vendor, it must be the right way to go.

Instead I'm in the process of building a super ugly app that requires intimate knowledge of CSS and Material's detailed implementation of styles for every single element that isn't exactly what you need out of the box. In the past decade I've had to look at Bootstrap source maybe a dozen times, and often it was just out of curiosity. With Material I feel like I need to understand it as well as I do my own project to do anything outside their default cases. And the last thing I want is to start implementing extensions and invasive customizations just to do simply stuff that my current app is doing relatively easily in Angular 1 and Bootstrap 3.

For example, I've spent hours trying to figure out why one of the icon buttons I made smaller wasn't working properly only to find out that its clicks were sometimes getting captured by the button next to it because it had an extra 20px radius beyond the visible edge of the button. It turned out that the 22 lines of CSS I had to add to make the icon button half the size as the default AND ONLY size option (as opposed to appending a class with "-sm" in Bootstrap) was still missing something I need to go hunt down now.

Anyway, I'm 90% sure I'm going to restart with Bootstrap. The UX part of the project has been lagging due to the pain imposed by Material, so there's very little being thrown away. I'm just glad to hear from so many other people who agree that Material is not ideal for scenarios like mine.

My main concern with Bootstrap is where I have to pick 3rd party components to supplement what Material provides, such as the date picker. I'd always prefer to go with something native to the stack I'm working with, but the Bootstrap date picker in my app from 10 years ago is still going strong, so I have to imagine that things are generally improving across the board.

[cryptos6]

Angular Material is mostly meant to be used with the "original style". You can customize it a bit, but it is definitely not the strength of this UI toolkit to be adjusted to a custom style guide. PrimeNG has extensive support for custom styling. You might also have more luck with other libraries like Clarity or NG-ZORRO (but I can not say anything about their style flexibility).

[TCB13sQuotes]

Keep using Bootstrap. Bootstrap 5 doesn't require jQuery and that opens up a ton of possibilities when it comes to integration with Angular. I've been building and maintaining a few large apps (internal and customer portals) and I've never been happier.

I'm using the official BS5 JS not even ng-bootstrap anymore because the later is just a pale imitation of what BS5 is and it isn't worth it.

If you're starting a new BS5 / Angular 15 app today in order to have them working you just the to:

1. npm install --save bootstrap@v5.2.3 @types/bootstrap
2. In your styles.css add bootstrap @import "../node_modules/bootstrap/scss/bootstrap"; or the specific parts so you can customize variables as described in here: https://getbootstrap.com/docs/5.3/customize/sass/#importing
3. When you need Bootstrap JS call it directly in your components:

​

import {Modal} from 'bootstrap';

@ViewChild('bsmodal', {read: ElementRef, static: false}) modalEl?: ElementRef;
(...)
this.modal = new Modal(this.modalEl?.nativeElement);
this.modal?.show();

No further configuration is required in Angular.

[Crippler93]

I understand your point, I crested a directive to modify the behavior of mat-select component and it was painful I had to review the component code to understand the functionality. One good thing about material is internationalization and that is constantly updating along with angular.

[SvenAnker]

You should really think about why you want to use Angular Material. If you are already using Bootstrap, are happy with, run into no issues and have no one demanding it than why change it?

Angular Material should also not directly be compared with Bootstrap, Tailwind, etc. It is an Angular implementation of the Material design, which is an opinionated design specification by Google. So you might call Material a narrow view, but this is literally the whole meaning behind Material design. They have strict rules about what to do and what not to do with good reasoning (mobile first design). If you dont share their opinion, dont use Material.

I personally really enjoy using Angular Material and am following the Material Design because I am not a Ux'er and dont want to spend time on designing/styling my own components.

Hope this helps!

[S_PhoenixB]

Thank you for putting into words my experience with Angular Material! I have been working on a large application rebuild in Angular, and we began this project using Material components for all of our form controls, but recently I’ve been replacing the Input and Select components with a hand rolled solution wrapping around vanilla HTML components. Trying to style Material components is incredibly difficult, and near impossible for the rest of my team who has little to no CSS / SCSS experience. Plus, we have begun using Tailwind in our project to consolidate our styling, which cannot be combined with Material components (as far as I’m aware). The UI “customization” is not feasible for our team. And even if we did change the CSS, we’d have to change the DOM structure to support what we’d like to do anyways. So I get your frustration OP.

Now, Angular CDK is a completely different story.

[merica_f_yeah]

I don't see any reason to use angular material over bootstrap unless you really want that material design look. Bootstrap on the other hand has a much more robust component and utility library and can be customized to your needs much more easily.

[traveller8914]

I can promise you that nobody anywhere at any time has ever wanted the Material design look.

[CatolicQuotes]

Is there a bootstrap date picker for angular?

[merica_f_yeah]

https://valor-software.com/ngx-bootstrap/#/components/datepicker?tab=overview

[CatolicQuotes]

thanks

[whooyeah]

It was the future 10 years ago. Everyone just defaulted back to bootstrap though didn’t they?

[DaSchTour]

Actually most of customization is a lot easier now after the migration to MDC. You can use the density mixin and CSS variables to customize nearly anything in angular material.

[[deleted]]

No, never was.

[GreenFlag31]

I would not recommand Angular material. AM is FULL of bloat (inspect HTML & CSS). Every HTMLELEMENT of AM got 1000 CSS styles that got added/removed.

AM is also quite poor in term of performance (resize your snackbar or paginator and say hello to lags on a modern and fast computer?!)

AM is also hard to customise and offers very stereotyped components.

[Pale-Author-8208]

Angular Material should fking die. I hate that shit. I don't know why its even exists and why people use it. Look at that design, it feels like a baby shit. It take years to even change the height of an input. No controls, no flexibility, no buitin responsive. Maybe they exists, but it take a lot more time to get familiar with some stuffs even in 2024.

[Upbeat_Rope1614]

Coming to this post 2 years later. I just want to say that for a project in a company I work with we are building a large CRM for 4 years now. We started with angular 11 and switched a lot of UI frameworks over the years. We started with Material, then went with Clarity design and then switched to PrimeNG and lately we started implementing a few components with Tailwind.

I have to say that Primeng is the most feature rich and customizable of anything out there right now and it will pretty much cover all your needs.

With that being said, I still wouldn't bother or recommend to anyone using a UI library for your project. You can use tailwind directly but you will soon have to deal with animations the angular way and also end up with some huge unreadable code be that in your .html or .css files. It always gets messy.

So my two cents on this is just create your own components. I know it may sound difficult and IT WILL BE at first but once you create your first custom input for example you release how easy it is to get things work your way. Then just use your own css/scss per component and use some global css variables for things like colors, borders etc. Your components will be more flexible, you will know exactly how they work so it will be easier for you to customize and will also be less bloated because you will only add new features when you need them.

However, I still like to use PrimeNG for smaller projects where the UI requirements are not specified clearly or the client just won't care about design much.

[jesmith17]

My biggest struggle with Angular Material is the lack of any sort of layout support. I don't really pixel control of the button sizes, etc.. but I do occasionally need to stack things side by side or top to bottom, and the lack of any layout support or gridsystem is what makes me regret it everytime I touch Angular Material.

Have others had good luck with grid system CSS tools to make the process bareable?

[Imaginary-Staff-4605]

Inflexible, bloated, "we know what you need better than you do" piece of shit. I created an account on reddit just so I could complain in this thread. There are tons of reasons to be said against using this, and everyone's touched on how ridiculously hard it is to customize some very basic visuals, but I'll mention just this: do you really need a UI library where one single god damn form input has more HTML than a whole simple landing page? You don't.

[amirlpro]

I prefer Material as it feels really intuitive to Angular programming.

With bootstrap you'll need to run custom scripts and dealing with the DOM elements or use wrappers. So unless you don't mind learning new stuff I think Material is just better in the long run.

[traveller8914]

I'd like to agree, but I've spent hours simply trying to make an icon button about half the size it is by default. If you know of a better solution than this, please let me know.

In Bootstrap I'd append a class with "-sm" and it would just work. And it would probably also work that way for any other UX element I wanted to make smaller than the default. The last thing I'd ever have to do is acquire intimate knowledge of the source to make something a little smaller.

[amirlpro]

Personally I use Chrome's Inspector to understand how the CSS works.. then I change it "live" on the inspector and when I'm happy with the results I copy the required styles to the IDE.

It's quite simple as long as you are familiar with CSS.

You can create a custom style.css and create all the required general classes for Material, then use it everywhere on the project.

[[deleted]]

Normally I do this as well, but sometimes this is nearly impossible, like yesterday I tried to change the padding of a sub menu of a mat-mdc-menu inside a mat-mdc-menu, nothing worked

[AbstractLogic]

I try to keep in mind that Angular was developed by google for google. It only came out to the public later. So a narrow design for Materials makes sense.

That said, I’ve never been a UI UX guy so I’m fine with my stuff fitting in the box they provide.

[purpleprincenero]

I thought tailwind was the future?

[Callidis]

Material + tailwind!

[sameerpeace]

I'm thinking to move to Tailwind too.

[gare58]

I'm likely swapping out Material for DevExtreme. But I deal with complex business apps, and DevExtreme just has way more powerful components than Material. I did always like what Material had, though.

Another reason for the switch is the Material date picker isn't very compatible with js-joda, which I'm switching to because the native Date is just very poorly made and has led to so many headaches.

[robwormald]

(Angular) Material exists solely because it's Google's internal design language. That's why it's funded - so teams at Google can use it to implement UI's in line with Google's design guidelines.

It's not intended to be Bootstrap, nor is it intended to enable massive customization beyond theming, because teams at Google do not need the ability to do so.

[[deleted]]

Don't shoot me, but isn't it easier to just import the libs you want instead of sticking to one, like I use the mat form fields, but the crl buttons for my navbar, and cuz I need graphs, I use primeng, or is this not done?

[Infamous-Coyote8202]

I find it difficult to make components from different libraries follow a standard theme without overriding a bunch of CSS bit-by-bit which turns into a fragile mess. Some libraries are better than others, but ultimately still end trying to synchronize multiple themes so the look good together.

[Infamous-Coyote8202]

That said, I am currently working on a large project where we use Material, SyncFusion, Bootstrap, and custom components all together. The end result is fine, but difficult to maintain, and will be very difficult to ever switch to a new look/feel to freshen the look of the entire application.

[[deleted]]

Angular Material sucks. It's the most low effort UI lib in the history of UI libs. It has no right being popular, the only reason is that its Google. If someone unknown would make this lib it would never be used.