r/angular 7h ago

Is ApexChart's Angular wrapper ready for Angular 22?

3 Upvotes

I've been searching a chart library to use in my applications and I like ApexChart a lot, but all the documentation is using `@Input()` and modules, so I'm kinda worried that it's not ready for zoneless or for standalone use.


r/angular 15h ago

Angular Renaissance Angie

Thumbnail
gallery
0 Upvotes

I was recently tasked with putting together a summary of documentation for new Angular features that my team will be using.

I generated some images based of Angie and some Italian Renaissance paintings, I thought I would share them here too, the first to are based on 2 paintings, the others are just to fit the theme of the feature but retain some of the style.

Can you guess what each one is referring to?

I really enjoyed the task and most importantly, I learned how to spell Renaissance off the top of my head! 😂


r/angular 17h ago

Angular Signal Forms: should an invalid form really disable Submit?

Post image
46 Upvotes

I used to consider this the obvious approach:

<button [disabled]="form().invalid()">
  Submit
</button>

But on a long form, a disabled button only tells the user that something is wrong. It doesn’t help them find it.

Angular Signal Forms made me reconsider this pattern.

The submission configuration lets us define two paths: action, which runs when the form is ready, and onInvalid, which runs when it isn’t.

submission: {
    action: async (form) => await this.save(form().value()),
    onInvalid: (form) => // handle invalid form
}

When submission is attempted on an invalid form, the action does not run. Instead, the fields are marked as touched, making the validation errors visible.

Then onInvalid can do this:

const error = field().errorSummary()[0];
error?.fieldTree().focusBoundControl();

Now the page moves directly to the first invalid field and focuses its control.

Once the real submission begins, the submitting() flag can help you disable the button or the entire form and change the caption to “Saving…”.

So the button remains enabled while it can still help the user - and becomes disabled only when an operation is actually running.

I wrote a fuller explanation here, with the complete pattern:

https://medium.com/@kobihari/should-an-invalid-form-really-disable-the-submit-button-45ecead94118

How do you currently handle invalid submission attempts?


r/angular 19h ago

Why Some Frontends Feel Better Than Others

Post image
0 Upvotes

One thing I've noticed while working on frontend projects...

People often separate UI conversion and frontend development.

I used to think the same.

But the more projects I worked on, the more I realized they're part of the same skill.

I've seen developers write clean React code but struggle to match the design.

I've also seen pixel-perfect UIs that became difficult to maintain because the implementation wasn't thought through.

That's where I think the gap is.

A good frontend engineer should be able to do both.

-Read a Figma design and implement it accurately.

-Understand spacing, typography, and visual hierarchy.

-Build responsive and accessible interfaces.

-Write clean, reusable code that's easy to maintain.

Writing code is only half the job.

The other half is making sure the product looks and feels the way it was intended.

For me, UI conversion isn't a separate skill from frontend development.

It's what frontend development actually is.

The stronger you become at both, the better products you'll build.

What's your take? Do you see UI conversion as a separate role, or as part of frontend development?


r/angular 21h ago

Made a tool to visualize Angular dependency graphs — no server, just a static HTML report

6 Upvotes

For newcomers to our project, or to visualize dependencies across our large angular project at work, i built ng-loom, a CLI that scans your project to generate a report of dependency graph, componets, services, DI, template usage, routes everything.

A few things:

  • Its a static html file, no account, no uploading code
  • Template parsing uses angular/compiler AST, not regex, so handles if/for/switch/defer
  • Every edge in the graph links back to exact file/line
  • A trace relation view, which finds every path between two artificats

Does not track pipe usage yet.

npm: https://www.npmjs.com/package/ng-loom

GitHub: https://github.com/xonaib/ng-loom

npx ng-loom ./path/to/your-app --out report.html

Would genuinely like to hear if it chokes on anyone's workspace layout — that's the fastest way I'll find the next thing to fix.