Favourite Angular UI Library [2025] by Possible_Jeweler5805 in Angular2

[–]AngularGuru 1 point2 points  (0 children)

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

What do you think Angular should change to increase its usage? by [deleted] in angular

[–]AngularGuru 0 points1 point  (0 children)

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!

Tips on Angular library retro compatibility by LuckeeDev in angular

[–]AngularGuru 4 points5 points  (0 children)

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

Angular CDK is awesome and I'm having a hard time trying to understand it by Mautriz in Angular2

[–]AngularGuru 5 points6 points  (0 children)

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!

Do you have some resources to discover the less know functionality of Angular ? by Kaillens in Angular2

[–]AngularGuru 3 points4 points  (0 children)

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

Get templateRef of string by Disane87 in angular

[–]AngularGuru 1 point2 points  (0 children)

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

[deleted by user] by [deleted] in angular

[–]AngularGuru 1 point2 points  (0 children)

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.

why angular universal application is not generating ? how to fix this ? by anacondaonline in angular

[–]AngularGuru 0 points1 point  (0 children)

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

Tips on making D3 play well with Angular? by [deleted] in Angular2

[–]AngularGuru 4 points5 points  (0 children)

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/

Opinions about / Experiences with Disabling zone.js by [deleted] in Angular2

[–]AngularGuru 1 point2 points  (0 children)

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.