Angular 🇺🇦 - practical notes

📄 How to design user-friendly forms: Colours

#guide

Colours will not just make your form look better or more engaging, but they will also make it easier for the user to get through each section faster.

Different colours can be used for different purposes. As mentioned before, red is often used to indicate any errors on the form while light grey can used for any disabled fields that we are not allowed to change (see the example below). A soft tone can also be applied to the whole form background to help the user identify each empty field. You can then use prominent and contrasting colours to make users notice action buttons like “Proceed to payment”, “Submit” or “OK”.

350 views05:59

Angular 🇺🇦 - practical notes

🌐

Optimize Angular Apps with Unused Standalone Imports Diagnostic in v19

#angular #standalone

One of the most anticipated features since the introduction of standalone components is the ability to detect whether a component or directive imported into a component is actually being used. In Angular v19, this need has finally been addressed with the addition of a diagnostic for unused standalone imports.

The unused import diagnostic is reported as a warning, giving developers a heads-up without blocking the build. This can be especially helpful during development, allowing teams to catch unused imports early in the process. If needed, the diagnostic behavior can be disabled using the unusedStandaloneImports option in the tsconfig.json.

✅ Article link

Please open Telegram to view this post

VIEW IN TELEGRAM

👍1

346 views06:02

Angular 🇺🇦 - practical notes

🆚 CSS class naming conventions

#css #bem #smaCSS #ooCSS

✅ Article link

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

287 views05:59

Angular 🇺🇦 - practical notes

❤️

📄 How to Implement Compodoc in Your Angular Project

#angular #compodoc #guide

Tips to Maximize the Use of Compodoc

— Keep Documentation Updated: Regenerate the documentation whenever you change the code.

— CI/CD Integration: Consider integrating Compodoc into the CI/CD pipeline to automate documentation generation.

— Consistent JSDoc Comments: Use JSDoc comments consistently to enrich the documentation.

✅ Article link

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

340 views05:59

Angular 🇺🇦 - practical notes

❤️

📄 How to Implement Angular Micro-Frontends with Module Federation

#angular #moduleFederation

What is micro-frontend ?
Micro-frontends are a way to break down a large frontend application into smaller, independently deployable modules, similar to microservices on the backend. Angular micro-frontends use Webpack 5’s Module Federation feature to enable this architecture. Module Federation allows multiple teams to build and deploy features in isolation while composing them together at runtime.

Why Micro-Frontends?
Micro-frontends bring several benefits to modern web development:

— Independent Deployment: Teams can build, test, and deploy individual parts of the frontend independently.
— Better Scalability: Teams can work on their domain-specific features without interference from other teams.
— Technology Agnostic: Different micro-frontends can use different frameworks.

What is Module Federation?
Module Federation is a feature in Webpack 5 that allows multiple applications to share code or load remote code at runtime. This is especially useful for micro-frontends, as it allows one Angular application to load modules from another application seamlessly.

How to Implement Angular Micro-Frontends Using Module Federation
We will break the setup into two parts:
— Host Application: The main shell that loads different micro-frontends.
— Remote Applications: Individual Angular micro-frontend apps that are federated into the host.