Angular Munich – Telegram
Angular Munich
178 subscribers
553 photos
41 videos
9 files
705 links
Stay up to date with Angular Framework ;-)

Need more: https://linktr.ee/ngxsamurai
Download Telegram
first version ) same text
In #Angular v19, you can pass environment variables during build time using the CLI🏗

To achieve this, you can use the `--define` flag in your build command


#ng19 #cli
Try not to laugh 🤭
😁2
🏎 How to boost the development in Angular 19?

#Angular v19🔥 introduces Hot Module Replacement (#HMR) for styles by default, and experimental support for template HMR behind a flag.

Previously, changes to styles or templates triggered a full rebuild and page refresh. With HMR, only the modified style or template is compiled and sent to the browser, updating your app without refreshing the page or losing state. This results in faster development cycles and uninterrupted workflow.

HMR for styles is enabled by default in v19 by running ng serve command.

#ng19
🔥3
🚀 Angular Template Syntax Upgrade: Multiple Values for @𝐜𝐚𝐬𝐞

Angular's template syntax might get a boost soon! 🎉

A PR is open in Angular, allowing multiple guards within a single @𝐜𝐚𝐬𝐞 statement using the syntax @𝐜𝐚𝐬𝐞(𝐚; 𝐛; 𝐜) 👇

Pls don't implement this for @𝐢𝐟 😁

PR: https://github.com/angular/angular/pull/58600

#ng19
👍1
Reduce boilerplate and simplify #Angular unit tests with #Spectator

Spectator is a fantastic library for simplifying your unit tests. One of its main benefits is that it automatically allows you to mock services, classes, and components

There is no need to set-up and configure a #TestBed with Spectator

Additionally, you can wrap your services with SpyObject<YourService>, and Spectator will automatically add spyOn functions to all your mocked methods; no need to manually do it yourself; simply asset in your tests

It also makes mocking return values much cleaner; no more jest.fn() that clutters your test, but a much more intuitive and declarative API to mock return value

Spectator has much more to offer; you can check out their docs here: https://github.com/ngneat/spectator
What is the new Route-level render mode introduced in #Angular v19 🤔


If you're using server-side rendering (SSR), by default, Angular will render all parametrized routes on the server and pre-render (also known as "static site generation" or SSG) all routes without parameters. This helps to serve your un-parametrized routes even faster⚡️

But sometimes, you might not want to pre-render the page and always want to render it on the server. Some reasons might be:
🔹 The page content changes based on the user (e.g., user dashboards, personalized recommendations, or profile pages).
🔹 The page displays data that updates frequently and needs to show the most current state, such as stock prices, live sports scores, or news headlines.
🔹 Pages can change based on actions taken in an admin panel (think of products in an e-commerce website; you can change the price, images, etc)
Dynamically Display a Required Asterisk with #css Only!

There's no need to manually insert an asterisk for required fields in your form. With a touch of CSS magic, it can be done automatically! 😎

This method allows the required asterisk to show up dynamically, saving you both time and effort in your markup. 💪

Codepen: https://codepen.io/syansari02/pen/azovjdV
#ToDo for Weekend!

https://yhype.me/

![](https://komarev.com/ghpvc/?username=<GH_USERNAME>&style=for-the-badge&label=PROFILE+VIEWS&abbreviated=true)



Example for "profile views": https://github.com/DerHerrGammler
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 😯 Angular is introducing a new Change Detection Tracing Service in DevTools that will automatically warn developers when their applications are triggering too many change detection cycles.

In the example when your application exceeds 10 change detections within a 1-second window, Angular will automatically log a warning to help you identify potential performance issues.

👉 PR: https://github.com/angular/angular/pull/58916
🆕 proposal for a JS operator - "::"

The "::" bind operator is still in Stage 0, meaning it's just an early concept being discussed.

It makes method binding and chaining clean, using "this"! ⛓️👇

https://github.com/tc39/proposal-bind-operator


#js
‼️ `aria-label and aria-labelledby` aren't allowed on divs, spans, and most other static text elements out of the box (i.e., without also changing roles), and *most* screenreaders won't announce them.

👇🏻

https://benmyers.dev/blog/dont-use-aria-label-on-static-text-elements/

#accessibility #a11y
💡 #angular Tip!

Did you know you can format dates, numbers, percentages, and currencies in Angular without relying on pipes? 🚀

👉 Simply call Angular’s built-in formatting functions directly in your code, specifying parameters like the date format or locale.

Why it’s awesome:
• No need for dependency injection (unlike importing DatePipe).
• Easily format data within services or other parts of your code.
• Streamlined, efficient, and perfect for scenarios where pipes aren’t accessible!

A small tweak that can make a big difference in your app’s performance and flexibility. 💻
It turns out that this is all standard IEEE 754, which gives a maximum relative rounding error of about 1.11e-16.

In JavaScript, when you compare 100 == 99.99999999999999, it evaluates to false because the precision of the number representation can lead to small inaccuracies. The value 99.99999999999999 is slightly less than 100, causing the comparison to fail.

On the other hand, 100 == 99.999999999999999 evaluates to true because this number is represented in a way that is close enough to 100 within the limits of the floating-point precision defined by IEEE 754. In this case, the tiny difference falls within the acceptable error margin, and thus the two values are considered equal by JavaScript.

This illustrates how floating-point arithmetic can lead to unexpected results in programming!