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.
Shortcut with Angular CLI configuration
If your project is generated with Angular CLI, you can add a configuration stylePreprocessorOptions > includePaths in angular.json file. This configuration allows you to add extra base paths that will be checked for imports. It tells Angular CLI to look for styling files in the mentioned paths before processing each component style file.
For example, in our case, let’s add ./stylings in the paths. Since the configuration accept an array, you can add multiple paths.
If your project is generated with Angular CLI, you can add a configuration stylePreprocessorOptions > includePaths in angular.json file. This configuration allows you to add extra base paths that will be checked for imports. It tells Angular CLI to look for styling files in the mentioned paths before processing each component style file.
For example, in our case, let’s add ./stylings in the paths. Since the configuration accept an array, you can add multiple paths.
🔥 New model() function in Angular 🔥
Two-way bindings have previously been cumbersome and error-prone. Before, you had to create an input and an output and make sure that the output has "Change" as a suffix. This is not obvious at all and is error prone.
With the signal-based input revolution, we got a new function called model(), which is a signals-based input and an output.
This reduces boilerplate code and is reactive by default!
Two-way bindings have previously been cumbersome and error-prone. Before, you had to create an input and an output and make sure that the output has "Change" as a suffix. This is not obvious at all and is error prone.
With the signal-based input revolution, we got a new function called model(), which is a signals-based input and an output.
This reduces boilerplate code and is reactive by default!
Handling files with ease using the new Angular file loader options 🗃
In Angular 17.1, the team introduced new loader options that streamline file handling. Here's what you need to know:
📁 Text Loader (text): Convert file content into strings, perfect for those text file transformations.
🔢 Binary Loader (binary): Transform binary files into Uint8Array, essential for handling intricate binary data.
🖼 File Loader (file): This option keeps files separate and allows users to easily access their runtime locations. It is especially handy for managing assets efficiently.
🔲 Empty Loader (empty): Exclude files from your bundle, keeping your project lean and mean.
Configuring these loaders is a breeze! Let me walk you through it. Say you want to inline SVG content directly into your application. Here's what you need to add in your angular.json:
In Angular 17.1, the team introduced new loader options that streamline file handling. Here's what you need to know:
📁 Text Loader (text): Convert file content into strings, perfect for those text file transformations.
🔢 Binary Loader (binary): Transform binary files into Uint8Array, essential for handling intricate binary data.
🖼 File Loader (file): This option keeps files separate and allows users to easily access their runtime locations. It is especially handy for managing assets efficiently.
🔲 Empty Loader (empty): Exclude files from your bundle, keeping your project lean and mean.
Configuring these loaders is a breeze! Let me walk you through it. Say you want to inline SVG content directly into your application. Here's what you need to add in your angular.json:
{
"options": {
"loader": {
".noscript": "text"
}
}
}⬆️ Voila! This setup seamlessly inlines SVG files as strings, eliminating the hassle of external file requests for your graphics. Imagine the boost in performance and user experience!
To ensure TypeScript plays nice, especially with custom loaders like for SVG files, include a type definition file in your project. Simply add a file (e.g., src/types.d.ts).
To ensure TypeScript plays nice, especially with custom loaders like for SVG files, include a type definition file in your project. Simply add a file (e.g., src/types.d.ts).
🧙🏻♂️ A Gentle Introduction to Generics in Typenoscript.
https://dev.to/this-is-learning/a-gentle-introduction-to-generics-in-typenoscript-3ap3
One of the more advanced topics in Typenoscript is Generics and understanding and adding them to your Typenoscript coding toolbox can be very powerful. As we continue with our journey of learning Typenoscript and building amazing projects, we want to have more and more tools that we can use to make our job easier, without making compromises when possible.
https://dev.to/this-is-learning/a-gentle-introduction-to-generics-in-typenoscript-3ap3
🧙🏻♂️Backdoor in upstream xz/liblzma leading to ssh server compromise (CVE-2024-3094)
- https://www.openwall.com/lists/oss-security/2024/03/29/4
- https://news.ycombinator.com/item?id=39866092
- https://www.openwall.com/lists/oss-security/2024/03/29/4
- https://news.ycombinator.com/item?id=39866092