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
🤓 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
📄 Implementing a masking strategy on
#angular #ui_element
✅ Article link: https://medium.com/@shahzadjavaidisb/implementing-a-masking-strategy-on-ngbdatepicker-angular-d47cada589f2
ngbDatePicker#angular #ui_element
✅ Article link: https://medium.com/@shahzadjavaidisb/implementing-a-masking-strategy-on-ngbdatepicker-angular-d47cada589f2
📄 Angular Simple Tabs
#angular #ContentChildren #ngTemplate #ui_element
✅ Article link: https://javascript.plainenglish.io/angular-template-powers-4-7ffc219d2db0
🎁 Code link: https://stackblitz.com/edit/stackblitz-starters-4e6zq8?file=src%2Fmain.ts
#angular #ContentChildren #ngTemplate #ui_element
✅ Article link: https://javascript.plainenglish.io/angular-template-powers-4-7ffc219d2db0
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
📄 Angular carousel
#angular #ui_element
✅ Article link: https://medium.com/@su.ede.kovacs/angular-carousel-e6953aa38f77
🎁 Code link: https://stackblitz.com/edit/angular-dy6ybx?file=src%2Fcarousel.component.ts
#angular #ui_element
✅ Article link: https://medium.com/@su.ede.kovacs/angular-carousel-e6953aa38f77
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
📄 Reusable Checkbox Input in Angular
#angular #ui_element #ControlValueAccessor
All we need to do is to use its selector inside our
🚩 > Angular v16
✅ Article link: https://blog.bitsrc.io/how-ive-created-reusable-checkbox-input-in-angular-16-5fd470f26104
#angular #ui_element #ControlValueAccessor
All we need to do is to use its selector inside our
<form> HTML element with FormGroup:<app-checkbox-input
formControlName="fullName"
label="Check by Full Name"
></app-checkbox-input>
🚩 > Angular v16
✅ Article link: https://blog.bitsrc.io/how-ive-created-reusable-checkbox-input-in-angular-16-5fd470f26104
This media is not supported in your browser
VIEW IN TELEGRAM
📄 Resizable Columns in Angular Table
#angular #directive #ui_element
✅ Article link: https://levelup.gitconnected.com/how-to-create-resizable-columns-in-angular-scrollable-table-a-step-by-step-guide-5b8f766c1f60
🎁 Code link: https://stackblitz.com/edit/angular-6x5egd?file=src%2Fapp%2Fdirectives%2Fcolumn-resize.directive.ts
#angular #directive #ui_element
✅ Article link: https://levelup.gitconnected.com/how-to-create-resizable-columns-in-angular-scrollable-table-a-step-by-step-guide-5b8f766c1f60
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1🔥1