Most Useful Angular Features You’ve Probably Never Used
#complexity: 🟢🟢⚪️⚪️⚪️⚪️
https://javanoscript.plainenglish.io/most-useful-angular-features-youve-probably-never-used-a64522e747a9
#complexity: 🟢🟢⚪️⚪️⚪️⚪️
https://javanoscript.plainenglish.io/most-useful-angular-features-youve-probably-never-used-a64522e747a9
2.8 million Docker Hub repositories infected with malware or phishing
are your devops team still ignore the upgrades?
or "Testen ist für Leute, die nicht improvisieren können?" 😊
"AS IS"
are your devops team still ignore the upgrades?
or "Testen ist für Leute, die nicht improvisieren können?" 😊
"AS IS"
From #Angular 18.1, we get a new feature allowing you to declare complex variables directly inside the template using @let
Currently, we often create variables inside the template using the 'as' keyword combined with a structural directive: *ngIf="dashboard$ | async as dashboard"
Yet this has some drawbacks 🛑
1️⃣ it's hard to reuse these variables across the template unless you wrap the entire template inside the *ngIf, but this is mostly not what you want.
2️⃣ If you work with numbers and the value is null, using *ngIf="count$ | async as count" will not render anything, and nullish coalescing doesn't work 😢
3️⃣ It's hard to create complex, reusable expressions in your template.
4️⃣ You often need some code duplication in for loops or when you need nested properties multiple times
read more in comments...
Currently, we often create variables inside the template using the 'as' keyword combined with a structural directive: *ngIf="dashboard$ | async as dashboard"
Yet this has some drawbacks 🛑
1️⃣ it's hard to reuse these variables across the template unless you wrap the entire template inside the *ngIf, but this is mostly not what you want.
2️⃣ If you work with numbers and the value is null, using *ngIf="count$ | async as count" will not render anything, and nullish coalescing doesn't work 😢
3️⃣ It's hard to create complex, reusable expressions in your template.
4️⃣ You often need some code duplication in for loops or when you need nested properties multiple times
read more in comments...
🔥1
Angular Munich pinned «https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe»
Angular Redirect Function 💡
An interesting new feature was released in Angular v18: you can now configure a redirect function inside your route configurations.
The redirect function gives you access to the queryParams and allows you to inject dependencies into the redirect function. By providing greater flexibility and access to route context, this update empowers developers to create more dynamic and context-aware redirects, ultimately improving the overall user experience in Angular applications.
An interesting new feature was released in Angular v18: you can now configure a redirect function inside your route configurations.
The redirect function gives you access to the queryParams and allows you to inject dependencies into the redirect function. By providing greater flexibility and access to route context, this update empowers developers to create more dynamic and context-aware redirects, ultimately improving the overall user experience in Angular applications.
Creating a Generic HTTP service with a model adapter in hashtag#Angular 🔀
Oftentimes, in Angular, the HTTP services responsible for fetching data look more or less the same; the only differences are the types and the API URLs. As a result, we end up with much repetitive code, so this is a great candidate for a base class that we inherit, a sort of generic HTTP service that can be inherited by the implementations for each domain/entity within our application that needs to communicate with an API 💡
Oftentimes, in Angular, the HTTP services responsible for fetching data look more or less the same; the only differences are the types and the API URLs. As a result, we end up with much repetitive code, so this is a great candidate for a base class that we inherit, a sort of generic HTTP service that can be inherited by the implementations for each domain/entity within our application that needs to communicate with an API 💡
💡 Dynamic Components in Angular 💡
Have you ever heard of Dynamic Components?
The concept itself is really simple - simply create a component dynamically in your class code.
This can be really handy in cases where you want to load different components based on some configuration.
In the example below, the ExternalContentComponent is a wrapper for a dynamic component based on some configuration data which it gets through the ActivatedRoute.
Such dynamic components can also often be seen on configurable dashboards.
Technically it is really simple. All you need is a HostDirective, which is an empty directive that injects the ViewContainerRef. Then the wrapper has to have a ViewChild on an element with the HostDirective and then call the createComponent function of the viewContainerRef and pass in a component.
Have you ever heard of Dynamic Components?
The concept itself is really simple - simply create a component dynamically in your class code.
This can be really handy in cases where you want to load different components based on some configuration.
In the example below, the ExternalContentComponent is a wrapper for a dynamic component based on some configuration data which it gets through the ActivatedRoute.
Such dynamic components can also often be seen on configurable dashboards.
Technically it is really simple. All you need is a HostDirective, which is an empty directive that injects the ViewContainerRef. Then the wrapper has to have a ViewChild on an element with the HostDirective and then call the createComponent function of the viewContainerRef and pass in a component.