π Role Based Angular Directive
#angular #directive
β Article Link:
https://itnext.io/role-based-access-control-in-angular-templates-2eeca497855
π Code Link:
https://gist.github.com/klajdi006/90d8c9fc62ea02d594972f1f642d2163#file-has-roles-directive-ts
#angular #directive
β Article Link:
https://itnext.io/role-based-access-control-in-angular-templates-2eeca497855
https://gist.github.com/klajdi006/90d8c9fc62ea02d594972f1f642d2163#file-has-roles-directive-ts
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
π Angular Resolver Use Case
#angular #resolver
π©> Angular 16
β Article Link:
https://itnext.io/understanding-angular-resolvers-b49f6c227278
#angular #resolver
π©> Angular 16
β Article Link:
https://itnext.io/understanding-angular-resolvers-b49f6c227278
β³οΈ Angular function based interceptor
#angular #interceptor
π©> Angular 16
β Article Link: https://itnext.io/migrate-angular-interceptors-to-function-based-interceptors-90bd433e0c2a
π Code Link: https://stackblitz.com/edit/angular-gd6vru?file=src%2Fretry.interceptor.ts
#angular #interceptor
π©> Angular 16
β Article Link: https://itnext.io/migrate-angular-interceptors-to-function-based-interceptors-90bd433e0c2a
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
π2
β³οΈ Navigation Error Handling
#angular #router #withNavigationErrorHandler
π©> Angular 16
β Article Link: https://medium.com/@artur.fedotiew/%EF%B8%8F-simplifying-navigation-error-handling-with-angulars-upcoming-feature-%EF%B8%8F-b55ee04d246a
#angular #router #withNavigationErrorHandler
π©> Angular 16
β Article Link: https://medium.com/@artur.fedotiew/%EF%B8%8F-simplifying-navigation-error-handling-with-angulars-upcoming-feature-%EF%B8%8F-b55ee04d246a
π1
π Using React in Angular Application
#angular #react #directive
β Article Link: https://medium.com/palo-alto-networks-cortex-dev/using-react-in-an-angular-application-27c78e6aa914
#angular #react #directive
β Article Link: https://medium.com/palo-alto-networks-cortex-dev/using-react-in-an-angular-application-27c78e6aa914
This media is not supported in your browser
VIEW IN TELEGRAM
β οΈ How to replace rxjs Subjects with Signals
#angular #rxjs #subject #signal
π©> Angular 16
β Article Link: https://medium.com/ngconf/handling-user-actions-with-signals-in-angular-ff40bb63e857
π Code Link: https://github.com/alfredoperez/ng-demos/blob/main/libs/demos/src/lib/demos/ngrx-with-signals/ngrx-with-signals.component.ts#LL53C15-L53C15
#angular #rxjs #subject #signal
π©> Angular 16
β Article Link: https://medium.com/ngconf/handling-user-actions-with-signals-in-angular-ff40bb63e857
Please open Telegram to view this post
VIEW IN TELEGRAM
π2
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
π Angular Micro Frontend: Module Federation in 6 steps
#angular #ModuleFederation
Module Federation is a powerful feature provided by Webpack that enables the implementation of Micro Frontends in Angular. It allows you to dynamically load and integrate remote Angular modules (Micro Frontends) into a main application shell.
Module Federation handles the dynamic loading and sharing of modules, including their dependencies, at runtime. It enables applications to share code and resources, reducing duplication and improving the overall performance and development experience.
β Article Link: https://sagarsnath.medium.com/angular-micro-frontend-module-federation-5bc5638c963f
#angular #ModuleFederation
Module Federation is a powerful feature provided by Webpack that enables the implementation of Micro Frontends in Angular. It allows you to dynamically load and integrate remote Angular modules (Micro Frontends) into a main application shell.
Module Federation handles the dynamic loading and sharing of modules, including their dependencies, at runtime. It enables applications to share code and resources, reducing duplication and improving the overall performance and development experience.
β Article Link: https://sagarsnath.medium.com/angular-micro-frontend-module-federation-5bc5638c963f
π2
π Angular Fallback Image
#angular #img #directive
β Article Link: https://medium.com/angular-man/angular-fallback-image-1f7fc3626e5f
#angular #img #directive
β Article Link: https://medium.com/angular-man/angular-fallback-image-1f7fc3626e5f
π Angular 16 + Broadcast channel (Auth Fragments)
#angular #BroadcastChannel
β Article Link: https://techshareskk.medium.com/angular-16-broadcast-channel-4049a7f46019
#angular #BroadcastChannel
β Article Link: https://techshareskk.medium.com/angular-16-broadcast-channel-4049a7f46019
π1
π Why Class/Component inheritance in your Angular app might not be good
#angular #inheritance
β Article Link: https://medium.com/hackernoon/why-class-component-inheritance-in-your-angular-app-might-not-be-good-a5d88fdd855b
#angular #inheritance
β Article Link: https://medium.com/hackernoon/why-class-component-inheritance-in-your-angular-app-might-not-be-good-a5d88fdd855b
π1π₯1