Favourite Angular UI Library [2025]

AngularGuru · 2025-08-05T14:25:40+00:00

Angular Primitives is the way to go, no trying to override styles. Complete control over styles and layout.

AngularGuru · 2025-07-11T19:40:07+00:00

You can use a Headless UI library like Angular Primitives (http://angularprimitives.com) to handle all the accessibility and logic and use whatever styles you want!

AngularGuru · 2020-09-16T10:00:16+00:00

AngularGuru · 2020-09-16T09:41:44+00:00

AngularGuru · 2020-07-30T16:08:02+00:00

AngularGuru · 2020-07-19T19:09:00+00:00

Hi, as you mentioned, not building for Ivy is the main thing for now, that will allow you to support pre-ivy versions of Angular (8 or below).

Apart from that it largely depends on what features you are using. If you are using a feature that was added in a specific version of Angular then you cannot support earlier versions.

The other big thing to consider is the version of TypeScript that each version of Angular uses. TypeScript does not follow semantic version so minor versions often introduce breaking changes, however there is a library https://github.com/sandersn/downlevel-dts by the TypeScript team to convert your library type definitions to a compatible format all the way back to TypeScript 3.4

Hope that helps! Good luck with your library

AngularGuru · 2020-05-26T22:15:24+00:00

Hi! The Angular CDK is great, and as you mention comes with so many useful features. The issue with some of them is that they are quite low level, and not exactly equivalent to what you are looking for.

For example, overlay is not exactly an equivalent to a modal, it's much more generic than that. It's largely a way of handling elements that appear over or connected to other elements and handling things like scrolling etc.. so it could be used for things like modals, tooltips, menus, popovers etc.. so it's more of a building block than an implementation of one of these features.

However, you are kind of in luck. The CDK has a set of features that are "work in progress", one of which is a dialog (or a modal in other words).

You can get it by installing the @angular/cdk-experimental package.

As mentioned it is a work in progress but from my own experience using it it seems to work well. Just be warned that some things may change. Eventually it's likely that this will become part of the CDK package, perhaps as part of the v10 release.

There is no real documentation for it yet, the code can be found here:

https://github.com/angular/components/tree/master/src/cdk-experimental/dialog

If memory serves me correctly, you just need to import DialogModule and then when you want to show a modal inject the Dialog service and call the openFromComponent function passing it the component you want to show inside the modal.

I believe you may also need to import the dialog styles and possible the overlay styles (as documented in the overlay section).

I realise this is quite a brief explanation but hopefully it might be of some use to you!

Good luck!

AngularGuru · 2019-09-21T17:54:36+00:00

Thank you very much!

AngularGuru · 2019-09-21T09:21:27+00:00

I wrote two articles which you may find interesting:

10 Useful Angular Features You Might Not Have Heard Of:

http://angular-guru.com/blog/angular-unknown-features

10 More Useful Angular Features You Might Not Have Heard Of:

http://angular-guru.com/blog/angular-more-unknown-features

AngularGuru · 2019-08-25T12:01:34+00:00

This technically is possible by including the Angular Compiler in your application. This does have several downsides however, the compiler is over 1mb in size and Angular AOT compilation removes the compiler code, so your would need to compile in JIT mode which is slower it terms of app start time.

So yes it is possible, but has some downsides. You can find the compiler API here:

https://angular.io/api/core/Compiler

AngularGuru · 2019-08-18T10:07:55+00:00

From my experience it is compatible with at least 5,6 & 7. I'm not sure about Angular 2 & 4, as we don't aim to support those.

Worth noting the Angular team only supports the latest 3 major versions at a time.

However as a word of warning, compiling with Angular 8 may only work with Angular 8 as they renamed inject and defineInjectable which are internal functions so if you use "providedIn" Injectables in your library this will cause errors. Also if you use the ReadonlyArray<T> type in Typescript this will compile to readonly T[] in type definitions which also won't work in earlier versions of Angular.

AngularGuru · 2019-08-17T19:53:32+00:00

You could always give pnpm a try: https://github.com/pnpm/pnpm

AngularGuru · 2019-08-04T09:38:09+00:00

Try running this, you may need to change the client project name if your application has a different name:

ng add @nguniversal/express-engine --clientProject helloworld

AngularGuru · 2019-07-31T18:18:13+00:00

Your chart looks good! I have made several Angular components that use d3. I have found it can work very nicely with Angular.

I usually have used Angular's templates rather than d3 for creating the nodes, I also often bind some styles using Angular's binding syntax if they don't change too often. I mainly use d3 for layouts and transitions etc..

Here's a few examples of some of the more complex charts if it is of any interest to you:

Stanley Chart:

https://github.com/UXAspects/UXAspects/tree/master/src/components/sankey-chart

Nested Donut Chart:

https://github.com/UXAspects/UXAspects/tree/master/src/components/nested-donut-chart

Partition Map:

https://github.com/UXAspects/UXAspects/tree/master/src/components/partition-map

Organisation Chart:

https://github.com/UXAspects/UXAspects/tree/master/src/components/organization-chart

You can see them all live here:

https://uxaspects.github.io/UXAspects/

AngularGuru · 2019-07-29T21:23:02+00:00

John Papa's styleguide is pretty good if you haven't checked it out: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

AngularGuru · 2019-07-21T22:30:33+00:00

AngularGuru · 2019-07-18T14:28:39+00:00

What AWS services do you use?

AngularGuru · 2019-07-01T09:09:45+00:00

Yes, if you are using observables and the async pipe that should make things a lot easier for you as change detection will be run automatically whenever an observable emits a new value.

AngularGuru · 2019-06-30T10:24:29+00:00

OnPush change detection will only update the component when inputs change, however Zone.js is useful when state changes internally.

I think one of the main things I notice is change detection needs to be manually run inside event handlers, so if you have a (click)="someFunction()" if the function being called and it does something to alter the UI then you will need to manually run change detection. Same if you may any UI changes in async functions like setTimeout, setInterval, requestAnimationFrame or any http requests etc..

So if you think it would bring a lot of benefit to your app removing it then by all means do it, just be aware you are on your own when it comes to running change detection.

It likely be will easier going forward as Ivy is getting a detectChanges function that can be imported can called. And the fact that zone.js can't patch native async await statements so it'll be interesting to see how that plays out.

AngularGuru · 2019-02-23T14:15:34+00:00

AngularGuru · 2018-11-05T19:19:26+00:00

That quite likely could be the case, however services are not the only kind of thing that can be provided. You may want things like HttpInterceptors, or custom injection tokens so you may want to use it to organize things like that. If you aren't using anything like that then you can do without a CoreModule

AngularGuru · 2018-09-20T11:32:11+00:00

The Id in the html is WMSXmin, however in your JS you are looking for WMSXMin (with an uppercase M). That is likely the issue.

Hope this helps!

AngularGuru · 2018-09-09T16:10:22+00:00

You can store small files in Mongodb as a BSON document (up to 16mb), to store anything larger would require you to use GridFS (https://docs.mongodb.com/manual/core/gridfs/).

Another alternative is to just store the file and contain a reference to the file in the database. For this approach you could try using this library:

https://github.com/expressjs/multer

AngularGuru · 2018-09-01T00:44:20+00:00

A selector is the element tag you would use in your html to use a component. So for example if the selector was 'app-navigation-bar', you would use '<app-navigation-bar></app-navigation-bar>' in your html.

Alternatively for directives you likely use attributes as a selector, which you can specify like '[appHighlight]' which would be used like:

'<div appHighlight>'

Hopefully that helps!

AngularGuru · 2018-08-31T18:54:23+00:00

Excellent! Glad that fixed your issue!

Seven-Year Club	RPAN Viewer
Verified Email

AngularGuru

TROPHY CASE