📄 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
✳️ Handle subscriptions directly from template with Init Directive
#angular #directive
The problem is every
✅ Article Link: https://medium.com/@mikekucherov92/angular-utilities-init-directive-8dc4e0a4723c
🎁 Code Link:
https://gist.github.com/mikekucherov/9677d444148e7f1f8890e0130402b1de#file-init-params-component-html
https://gist.github.com/mikekucherov/84caf26cb387eb904877552531151d1a#file-init-directive-ts
#angular #directive
The problem is every
async pipe usage creates a new subscription which is not what you really want to see in your project. Moreover this approach won’t work if your’re dealing with cold observables such as http requests. Because in that case every subscriber will get different value. You might know about as keyword in`ngIf ` to bind a template property of some data and solve the problem of reusing same data multiple times. But what if we don’t want to hide this piece of template in any condition. Or imagine we have a lot of streams, which we need to reuse. That would be a bunch of pointless ngIf directives!✅ Article Link: https://medium.com/@mikekucherov92/angular-utilities-init-directive-8dc4e0a4723c
https://gist.github.com/mikekucherov/9677d444148e7f1f8890e0130402b1de#file-init-params-component-html
https://gist.github.com/mikekucherov/84caf26cb387eb904877552531151d1a#file-init-directive-ts
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
✳️ Implementing a Loading Skeleton in Angular
#angular #directive #skeleton #ui_element
Skeletons are placeholder elements that are displayed before the actual content is loaded on a webpage. A skeleton is usually a light gray box or circle that you see on websites like Medium, YouTube, etc. Skeletons convey a visual impression of the feature, which gives them an advantage over spinners.
✅ Article Link: https://netbasal.com/implementing-a-loading-skeleton-in-angular-7490ffdecc1b
🎁 Code Link:
Step 1: https://gist.github.com/NetanelBasal/33f8ec9a106ee2367f3b9847fd3043cb#file-rect-ske-component-ts
Step 2: https://gist.github.com/NetanelBasal/82030b63d6ed0055c09a543483bd3470#file-skeleton-directive-ts
Step 3: https://gist.github.com/NetanelBasal/0f26e85d13d10a9e564541553094c12f#file-skeleton-demo-html
#angular #directive #skeleton #ui_element
Skeletons are placeholder elements that are displayed before the actual content is loaded on a webpage. A skeleton is usually a light gray box or circle that you see on websites like Medium, YouTube, etc. Skeletons convey a visual impression of the feature, which gives them an advantage over spinners.
✅ Article Link: https://netbasal.com/implementing-a-loading-skeleton-in-angular-7490ffdecc1b
Step 1: https://gist.github.com/NetanelBasal/33f8ec9a106ee2367f3b9847fd3043cb#file-rect-ske-component-ts
Step 2: https://gist.github.com/NetanelBasal/82030b63d6ed0055c09a543483bd3470#file-skeleton-directive-ts
Step 3: https://gist.github.com/NetanelBasal/0f26e85d13d10a9e564541553094c12f#file-skeleton-demo-html
Please open Telegram to view this post
VIEW IN TELEGRAM
📄 Binding CSS Variables in Angular
#angular #directive #css_variables
✅ Article Link: https://netbasal.com/binding-css-variables-in-angular-69dfd4136e21
🎁 Code Link: https://gist.github.com/NetanelBasal/8abfd1dc1ce85bdc41ee0d9fd41d0781#file-css-var-4-ts
#angular #directive #css_variables
✅ Article Link: https://netbasal.com/binding-css-variables-in-angular-69dfd4136e21
Please open Telegram to view this post
VIEW IN TELEGRAM
👎1
📄
#angular #pipe #errors
✅ Article Link: https://max-syniuk.medium.com/handle-angular-form-control-validation-errors-using-pure-pipe-7c3a874ce77
🎁 Code Link:
- Pipe
https://gist.github.com/maksym-syniuk/c2a8bba5144e05e3edce19e81d998706#file-control-error-handler-pipe-ts
- Use case
https://gist.github.com/maksym-syniuk/972aaf537c9bffaf30d43a5ede380046#file-app-component-html
FormControl validation errors using pure pipe#angular #pipe #errors
✅ Article Link: https://max-syniuk.medium.com/handle-angular-form-control-validation-errors-using-pure-pipe-7c3a874ce77
- Pipe
https://gist.github.com/maksym-syniuk/c2a8bba5144e05e3edce19e81d998706#file-control-error-handler-pipe-ts
- Use case
https://gist.github.com/maksym-syniuk/972aaf537c9bffaf30d43a5ede380046#file-app-component-html
Please open Telegram to view this post
VIEW IN TELEGRAM
📄 Optimize
#angular #directive #ngFor
✅ Article Link: https://levelup.gitconnected.com/angular-optimize-ngfor-with-a-custom-directive-3e39504000cd
🎁 Code Link:
https://gist.github.com/Sw3eks/b4aa3f6c0a0d8e17dab5f38e3840c67f#file-ngfor-trackby-directive-ts
https://gist.github.com/Sw3eks/af3f14190fe2bb962b1d38ad0f6c098e#file-ngfor-trackby-usage-html
https://gist.github.com/Sw3eks/d6ef46242fdee83d4e65da6a0e011e9e#file-ngfor-trackbyproperty-directive-ts
https://gist.github.com/Sw3eks/18b22674c54822806a9d23fa7215204d#file-ngfor-trackbyproperty-usage-html
*ngFor with a custom directive#angular #directive #ngFor
✅ Article Link: https://levelup.gitconnected.com/angular-optimize-ngfor-with-a-custom-directive-3e39504000cd
ngForTrackById directive:https://gist.github.com/Sw3eks/b4aa3f6c0a0d8e17dab5f38e3840c67f#file-ngfor-trackby-directive-ts
https://gist.github.com/Sw3eks/af3f14190fe2bb962b1d38ad0f6c098e#file-ngfor-trackby-usage-html
ngForTrackByProperty directive:https://gist.github.com/Sw3eks/d6ef46242fdee83d4e65da6a0e011e9e#file-ngfor-trackbyproperty-directive-ts
https://gist.github.com/Sw3eks/18b22674c54822806a9d23fa7215204d#file-ngfor-trackbyproperty-usage-html
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
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
🤓 Create Reusable
#angular #ngTemplateOutlet #ui_element
The goal is to make a reusable component that can be shared across the app and is highly configurable by the parent component.
✅ Article Link:
https://medium.com/null-exception/building-angular-reusable-components-using-ng-template-ngtemplateoutlet-ngtemplateoutletcontext-f8813b67cd1f
🎁 Code Link:
1. https://gist.github.com/vikas0sharma/ddff8060b8c2d9275eac75b009fdfbf1#file-data-table-component-ts
2. https://gist.github.com/vikas0sharma/8ceb9b1ecfd08fa710d802351ab5bcf5#file-data-table-component-html
3. https://gist.github.com/vikas0sharma/3ecfa0913dcb4e14e8b99f43fa915c94#file-employess-component-ts
4. https://gist.github.com/vikas0sharma/4b66b931499fc587ca09a15ff55a92ad#file-employees-component-html
DataTable Component#angular #ngTemplateOutlet #ui_element
The goal is to make a reusable component that can be shared across the app and is highly configurable by the parent component.
✅ Article Link:
https://medium.com/null-exception/building-angular-reusable-components-using-ng-template-ngtemplateoutlet-ngtemplateoutletcontext-f8813b67cd1f
1. https://gist.github.com/vikas0sharma/ddff8060b8c2d9275eac75b009fdfbf1#file-data-table-component-ts
2. https://gist.github.com/vikas0sharma/8ceb9b1ecfd08fa710d802351ab5bcf5#file-data-table-component-html
3. https://gist.github.com/vikas0sharma/3ecfa0913dcb4e14e8b99f43fa915c94#file-employess-component-ts
4. https://gist.github.com/vikas0sharma/4b66b931499fc587ca09a15ff55a92ad#file-employees-component-html
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
📄 Example of viewProviders for reusable controls
#angular #viewProviders #ControlContainer
✅ Article link: https://medium.com/medialesson/use-viewproviders-to-make-form-controls-reusable-in-angular-87be877bd102
🎁 Code link:
1 - Component link.
2 - Template link.
#angular #viewProviders #ControlContainer
✅ Article link: https://medium.com/medialesson/use-viewproviders-to-make-form-controls-reusable-in-angular-87be877bd102
1 - Component link.
2 - Template link.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
📄 Theming for Angular Applications with CSS Variables
#angular #guide #theming
1. Install required packages
2. Define CSS variables
🎁 Code Link
3. Create pre-defined themes
🎁 Code Link
4. Create a theme service to operate the theme
Create a new service from the ng-cli.
🎁 Code Link
5. Create a theme component for the theme switcher
Create a new component from the ng-cli.
🎁 Code Link
🎁 Code Link
🎁 Code Link
✅ Article link
#angular #guide #theming
1. Install required packages
Install the font-awesome/angular-fontawesome package for creating the theme switcher later.
npm install --save @font-awesome/angular-fontwaesome
2. Define CSS variables
First, we have to define colors as CSS variables in the styles.scss. The properties defined in the :root section could be referred to globally.
:root represents the <html> element and is identical to the selector html .
3. Create pre-defined themes
Create a new TypeScript file.
— Define required theme types (line 1 ~ line 4)
— Define required themes in the JSON format (line11 ~ line 35)
4. Create a theme service to operate the theme
Create a new service from the ng-cli.
ng g s theme
Update the service.
— Expose the method to retrieve the theme type from memory and localStorage (line 20 ~ line 23)
— Expose the method to set the theme type to memory and localStorage (line 42 ~ line 47)
The key is document.documentElement(line 55). It stands for the root DOM. In setCurrentTheme() , we set the new value for the corresponding theme.
5. Create a theme component for the theme switcher
Create a new component from the ng-cli.
ng g c theme
Update the theme.component.ts.
— In ngOnInit() phase, we set the corresponding icon for the theme type retrieved from the service (line 23 ~ line 26)
— When the user toggles, we set the icon for the next theme type retrieved from the service (line 28 ~ line 32)
Update the theme.component.html to place the icon.
Update the theme.component.scss to switch the theme of the icon.
The theme switcher will look like the following images.
✅ Article link
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4