Auto unsubscribe in Angular 🔥
#angular #decorator
✅ Link: https://medium.com/@sniadek97/auto-unsubscribe-in-angular-bcda939d6158
#angular #decorator
✅ Link: https://medium.com/@sniadek97/auto-unsubscribe-in-angular-bcda939d6158
Confirmation Dialog Decorator
#angular #decorator
✅ Link: https://itnext.io/confirm-dialog-with-decorator-in-angular-7491d1237667
#angular #decorator
✅ Link: https://itnext.io/confirm-dialog-with-decorator-in-angular-7491d1237667
🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
📄 @Attribute Decorator in Angular
#angular #decorator #attribute
As you can see, when we trigger the change detection by emitting the click event, Angular is checking the value.
We can be more efficient in this case if we use the @Attribute decorator. With this change, Angular will evaluate it once and forget about it. As a general rule, I prefer the @Attribute() approach when the string is a fixed value that never changes.
#angular #decorator #attribute
As you can see, when we trigger the change detection by emitting the click event, Angular is checking the value.
We can be more efficient in this case if we use the @Attribute decorator. With this change, Angular will evaluate it once and forget about it. As a general rule, I prefer the @Attribute() approach when the string is a fixed value that never changes.
import { Component, Attribute } from '@angular/core';
@Component({...})
export class ButtonComponent {
constructor(
@Attribute('type')
public type: ButtonType = 'primary'
) {
}
}
✅ Article Link: https://netbasal.com/getting-to-know-the-attribute-decorator-in-angular-4f7c9fb61243👍1
📄 Debounce decorator in Angular
#angular #decorator #debounce
⚠️ Third-Party Lib
Usage example:
#angular #decorator #debounce
⚠️ Third-Party Lib
Usage example:
@Component({...})
export class ExampleComponent {
@Debounce(1000)
execute(arg: unknown) {
[ ... ]
}
}
✅ Article Link: https://blog.bitsrc.io/3-ways-to-debounce-http-requests-in-angular-c407eb165ada❤1
📄 Catch decorator in Angular
#angular #decorator #catch
✅ Article Link: https://javascript.plainenglish.io/a-try-catch-decorator-to-stylize-your-code-bdd0202765c8
🎁 Code Link: https://github.com/omirobarcelo/catch-decorator/blob/master/src/index.ts
#angular #decorator #catch
✅ Article Link: https://javascript.plainenglish.io/a-try-catch-decorator-to-stylize-your-code-bdd0202765c8
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
📄 RunOutsideAngular decorator
#angular #decorator #ngZone
✅ Article Link: https://emilgadzaev.medium.com/achive-better-angular-application-using-typescript-decorators-9e0eb01ad72d
#angular #decorator #ngZone
✅ Article Link: https://emilgadzaev.medium.com/achive-better-angular-application-using-typescript-decorators-9e0eb01ad72d
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
📄 Throttle Decorator
#angular #decorator
✅ Article Link: https://netbasal.com/inspiration-for-custom-decorators-in-angular-95aeb87f072c
🎁 Code Link:
Decorator
https://gist.github.com/NetanelBasal/db13a56407c76db8fe55d590ca4760c3#file-throttle-decorator-ts
Usage:
https://gist.github.com/NetanelBasal/0fcd8ed554c1ae7c9f961766db7465ac#file-throttle-usage-decorator-ts
#angular #decorator
✅ Article Link: https://netbasal.com/inspiration-for-custom-decorators-in-angular-95aeb87f072c
Decorator
https://gist.github.com/NetanelBasal/db13a56407c76db8fe55d590ca4760c3#file-throttle-decorator-ts
Usage:
https://gist.github.com/NetanelBasal/0fcd8ed554c1ae7c9f961766db7465ac#file-throttle-usage-decorator-ts
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
📄 Log Observable Property Decorator
#angular #decorator
✅ Article Link: https://netbasal.com/inspiration-for-custom-decorators-in-angular-95aeb87f072c
🎁 Code Link:
Decorator:
https://gist.github.com/NetanelBasal/e457750f0235adcbead10cd28f609384#file-do-decorator-ts
Usage:
https://gist.github.com/NetanelBasal/d07658a3502086fb469d8cba1fcdbb97#file-do-usage-decorator-ts
#angular #decorator
✅ Article Link: https://netbasal.com/inspiration-for-custom-decorators-in-angular-95aeb87f072c
Decorator:
https://gist.github.com/NetanelBasal/e457750f0235adcbead10cd28f609384#file-do-decorator-ts
Usage:
https://gist.github.com/NetanelBasal/d07658a3502086fb469d8cba1fcdbb97#file-do-usage-decorator-ts
Please open Telegram to view this post
VIEW IN TELEGRAM
📄Useful Decorators
#ts #decorator
✅ Article link: https://javascript.plainenglish.io/5-javascript-decorator-tricks-that-will-catch-your-eye-a31a717f5497
#ts #decorator
✅ Article link: https://javascript.plainenglish.io/5-javascript-decorator-tricks-that-will-catch-your-eye-a31a717f5497
📄 Create Paginated, Sortable and Filterable Endpoints with NestJs Decorators
#nestjs #decorator
✅ Article link: https://medium.com/@bhkfazano/how-to-create-paginated-sortable-and-filterable-endpoints-with-nestjs-fde6315c8466
#nestjs #decorator
✅ Article link: https://medium.com/@bhkfazano/how-to-create-paginated-sortable-and-filterable-endpoints-with-nestjs-fde6315c8466
📄 Card Composite via @ViewChildren in Angular
#angular #decorator #ViewChildren
✅ Article link: https://blog.stackademic.com/card-composite-via-viewchildren-in-angular-aa3317f92f82
#angular #decorator #ViewChildren
Imagine the following requirements for your Angular app:
- Your customer wants a view that displays multiple cards at once.
- A button at the top of the page should toggle the edit mode.
- While in edit mode, all cards are editable at the same time.
- As soon as you click “save” only those cards that actually have been edited are going to send a request to the server.
- If you decide to discard the changes by clicking on “cancel” all cards should be reset to their initial state.
This is a common scenario in any more sophisticated web application. Nevertheless, I just recently discovered a very handy way to handle those requirements in Angular. In this article I want to share my solution, leveraging the @ViewChildren property decorator to implement the Card Composite pattern.
✅ Article link: https://blog.stackademic.com/card-composite-via-viewchildren-in-angular-aa3317f92f82
👍2🔥1
🧪 Attribute Injection in Angular: The HostAttributeToken Approach
#angular #decorator #attribute
🚩 > Angular 17.3
✅ Article link
#angular #decorator #attribute
Angular offers the @ Attribute decorator, facilitating the injection of attributes from the host node. It proves particularly handy when there’s no necessity to establish a binding.
🚩 > Angular 17.3
✅ Article link
👍1
🤓 Replacing Static Inputs with the Host Attribute Token
#angular #decorator #Attribute #HostAttributeToken
🚩 > Angular 17
✅ Article link
#angular #decorator #Attribute #HostAttributeToken
🚩 > Angular 17
✅ Article link
👍1