In Angular 17.2 🔥, one of the interesting feature is Automatic placeholders with NgOptimizedImage.
If you’re using the NgOptimizedImage directive for your images, you can now quickly add a blurry placeholder while an image loads. Just add the placeholder attribute to your image, and the image directive will automatically request a small version of the image, blur it, and display that until the full image is ready.
UX will be enhanced with this feature.
#angular17 #angular #angulardeveloper #javanoscript
If you’re using the NgOptimizedImage directive for your images, you can now quickly add a blurry placeholder while an image loads. Just add the placeholder attribute to your image, and the image directive will automatically request a small version of the image, blur it, and display that until the full image is ready.
UX will be enhanced with this feature.
#angular17 #angular #angulardeveloper #javanoscript
Exploring TypeScript: Mapped Types 🗺
Mapped Types in TypeScript allow you to transform and manipulate existing types and create new types dynamically. They enable you to iterate over the properties of a type and generate new types based on those properties.
Why are They Cool?
Mapped Types provide an elegant solution for scenarios where you need to transform or extend existing types in a systematic and type-safe manner. They offer advanced techniques for type manipulation and abstraction, elevating TypeScript to a whole new level.
Real-world Application
Imagine you're building a complex application with various data structures, each requiring specific transformations or enhancements. Mapped Types come to the rescue, enabling you to define precise mappings and generate tailored types effortlessly.
Key Benefits
1️⃣ Dynamic Type Generation: Mapped Types enable dynamic generation of new types based on existing types, providing flexibility and expressiveness.
2️⃣ Type Safety: They ensure type safety by preserving the structure and constraints of the original types during transformation, preventing unintended errors.
3️⃣ Code Maintainability: Mapped Types promote code maintainability by abstracting complex type transformations into reusable constructs, enhancing code readability and scalability.
Mapped Types in TypeScript allow you to transform and manipulate existing types and create new types dynamically. They enable you to iterate over the properties of a type and generate new types based on those properties.
Why are They Cool?
Mapped Types provide an elegant solution for scenarios where you need to transform or extend existing types in a systematic and type-safe manner. They offer advanced techniques for type manipulation and abstraction, elevating TypeScript to a whole new level.
Real-world Application
Imagine you're building a complex application with various data structures, each requiring specific transformations or enhancements. Mapped Types come to the rescue, enabling you to define precise mappings and generate tailored types effortlessly.
Key Benefits
1️⃣ Dynamic Type Generation: Mapped Types enable dynamic generation of new types based on existing types, providing flexibility and expressiveness.
2️⃣ Type Safety: They ensure type safety by preserving the structure and constraints of the original types during transformation, preventing unintended errors.
3️⃣ Code Maintainability: Mapped Types promote code maintainability by abstracting complex type transformations into reusable constructs, enhancing code readability and scalability.
🚀 Exploring Angular's Power: ControlValueAccessor
ControlValueAccessor is an Angular interface that acts as a bridge between Angular forms and native DOM elements. Essentially, it empowers developers to create custom form controls, seamlessly integrating them into Angular's reactive forms infrastructure 📜
Imagine you have a complex form with unique input requirements beyond standard HTML form elements. ControlValueAccessor allows you to create form elements while maintaining compatibility with Angular forms. When using the ControlValueAccessor interface for your custom form element, Angular reactive forms can access the values of your form and include it in the form state, error handling, styling, and so on ✅
In order to work with the ControlValueAccessor , you provide an NG_VALUE_ACCESSOR provider and implement the interface of ControlValueAccessor
#angular #corebase
ControlValueAccessor is an Angular interface that acts as a bridge between Angular forms and native DOM elements. Essentially, it empowers developers to create custom form controls, seamlessly integrating them into Angular's reactive forms infrastructure 📜
Imagine you have a complex form with unique input requirements beyond standard HTML form elements. ControlValueAccessor allows you to create form elements while maintaining compatibility with Angular forms. When using the ControlValueAccessor interface for your custom form element, Angular reactive forms can access the values of your form and include it in the form state, error handling, styling, and so on ✅
In order to work with the ControlValueAccessor , you provide an NG_VALUE_ACCESSOR provider and implement the interface of ControlValueAccessor
#angular #corebase
Angular Munich pinned «https://angular.love/en/2024/02/21/angular-micro-frontends-a-modern-approach-to-complex-app-development/»
Angular 17.3 is released 🎉
The most noteworthy additions:
🔹 output() function, no more need for the @output() decorator
🔹 Introduced the outputFromObservable() interop function used to declare outputs using the new
🔹 Introduced the outputToObservable interop helper, converting the output to an observable with
🔹 The HostAttributeToken is added and used to inject static attributes for the host node, similar to the @attribute() directives.
🔹 Support for TypeScript 5.4
https://github.com/angular/angular/releases/tag/17.3.0
The most noteworthy additions:
🔹 output() function, no more need for the @output() decorator
🔹 Introduced the outputFromObservable() interop function used to declare outputs using the new
OutputRef API and output() API, while using a custom RxJS observable as data source.🔹 Introduced the outputToObservable interop helper, converting the output to an observable with
.pipe etc. The function is ideally used in all places where you subscribe to an output programmatically.🔹 The HostAttributeToken is added and used to inject static attributes for the host node, similar to the @attribute() directives.
🔹 Support for TypeScript 5.4
https://github.com/angular/angular/releases/tag/17.3.0
🅰️💥Angular 17.3 introduced the `hostAttributeToken()` class.
It creates a token that can be used to inject static attributes of the host node.
It works similarly to `constructor(@Attribute('value') type: string)`, but uses the newer `inject()` API instead of the `@Attribute` decorator.
It creates a token that can be used to inject static attributes of the host node.
It works similarly to `constructor(@Attribute('value') type: string)`, but uses the newer `inject()` API instead of the `@Attribute` decorator.
Icon Explorer
https://icones.js.org/
Features
- Instant Fuzzy Searching - all are done locally, no web queries!
- The Bag - select your icons and pack them into a ready-to-use icon font!
- noscript-packer was born from this XD
- Copy the usage noscripts
- SVGs direct download
- Mobile friendly
- Collection bookmarks
- Categories filters
- Dark mode
- Built with Vite and Vue 3
- If you like how it's built - try 🏕 Vitesse, an opinionated starter template made from Icônes
https://icones.js.org/
Features
- Instant Fuzzy Searching - all are done locally, no web queries!
- The Bag - select your icons and pack them into a ready-to-use icon font!
- noscript-packer was born from this XD
- Copy the usage noscripts
- SVGs direct download
- Mobile friendly
- Collection bookmarks
- Categories filters
- Dark mode
- Built with Vite and Vue 3
- If you like how it's built - try 🏕 Vitesse, an opinionated starter template made from Icônes
❤1
Angular Munich pinned «Icon Explorer https://icones.js.org/ Features - Instant Fuzzy Searching - all are done locally, no web queries! - The Bag - select your icons and pack them into a ready-to-use icon font! - noscript-packer was born from this XD - Copy the usage noscripts - SVGs…»
🔥 Angular Authoring is becoming leaner in the future 🔥
Angular is trying to get rid of the double import problem by removing selectors and directly referencing components with their class names. On top the standalone: true flag will be the default, such that you can reduce even more boilerplate.
Angular is making big steps forward towards a leaner framework and I can definitely see it becoming easier to learn for newcomers.
#angular #renaissance #webdev #typenoscript
Angular is trying to get rid of the double import problem by removing selectors and directly referencing components with their class names. On top the standalone: true flag will be the default, such that you can reduce even more boilerplate.
Angular is making big steps forward towards a leaner framework and I can definitely see it becoming easier to learn for newcomers.
#angular #renaissance #webdev #typenoscript
Using #Angular ViewportScroller to control scroll behavior ↕️
ViewportScroller is a service provided by Angular that allows you to control the scrolling behavior when navigating between routes or performing other actions that change the viewport position.
It exposes 5 different methods for controlling scroll behavior:
1️⃣ setOffset: This method allows you to set an offset for scrolling to elements within the viewport. This is particularly useful when you have fixed headers, footers, or other elements that might obscure the content you're scrolling to. By setting an offset, you ensure that the target content is appropriately positioned within the viewport when scrolling.
2️⃣ getScrollPosition: This method enables you to retrieve the current scroll position of the viewport.
3️⃣ scrollToPosition: This method allows you to programmatically scroll the viewport to a specific position. A common use case for this might be where you want to smoothly scroll to a particular section of the page in response to user interactions or events.
4️⃣ scrollToAnchor: This method scrolls the viewport to an anchor element within the DOM by its ID. Anchors are commonly used for creating deep links within a page or for navigation purposes. You might use this method to ensure that when a user clicks on a link that points to a specific section of a page, the viewport scrolls to that section to provide a smooth navigation experience.
5️⃣ setHistoryScrollRestoration: This method sets the scroll restoration behavior when navigating back and forth between routes. The "auto" option ensures that the browser automatically restores the previous scroll position when navigating back, providing a seamless user experience. On the other hand, the "manual" option disables this behavior, which might be useful in scenarios where you want more control over scroll restoration, such as when implementing custom scroll behavior during navigation transitions.
ViewportScroller is a service provided by Angular that allows you to control the scrolling behavior when navigating between routes or performing other actions that change the viewport position.
It exposes 5 different methods for controlling scroll behavior:
1️⃣ setOffset: This method allows you to set an offset for scrolling to elements within the viewport. This is particularly useful when you have fixed headers, footers, or other elements that might obscure the content you're scrolling to. By setting an offset, you ensure that the target content is appropriately positioned within the viewport when scrolling.
2️⃣ getScrollPosition: This method enables you to retrieve the current scroll position of the viewport.
3️⃣ scrollToPosition: This method allows you to programmatically scroll the viewport to a specific position. A common use case for this might be where you want to smoothly scroll to a particular section of the page in response to user interactions or events.
4️⃣ scrollToAnchor: This method scrolls the viewport to an anchor element within the DOM by its ID. Anchors are commonly used for creating deep links within a page or for navigation purposes. You might use this method to ensure that when a user clicks on a link that points to a specific section of a page, the viewport scrolls to that section to provide a smooth navigation experience.
5️⃣ setHistoryScrollRestoration: This method sets the scroll restoration behavior when navigating back and forth between routes. The "auto" option ensures that the browser automatically restores the previous scroll position when navigating back, providing a seamless user experience. On the other hand, the "manual" option disables this behavior, which might be useful in scenarios where you want more control over scroll restoration, such as when implementing custom scroll behavior during navigation transitions.
⬆️
Each of these methods provides valuable functionality for managing scrolling behavior in Angular applications, and understanding their use cases can help you leverage them effectively to enhance the user experience in your application.
Each of these methods provides valuable functionality for managing scrolling behavior in Angular applications, and understanding their use cases can help you leverage them effectively to enhance the user experience in your application.