Angular Deferrable
- 176 installs
- 6 repo stars
- Updated April 4, 2026
- oguzhan18/angular-ecosystem-skills
Implement Angular @defer blocks to lazy-load heavy templates, defer below-fold widgets, and gate rendering on viewport, interaction, or idle triggers without manual route splitting.
About
angular-deferrable teaches Angular's @defer API for lazy-rendering template sections with triggers like viewport or interaction, placeholders, and loading states to shrink initial bundles and speed first paint.
- Uses @defer with on viewport, idle, and interaction triggers
- Defers heavy or below-fold UI from first paint
- Provides placeholder and loading templates
- Cuts initial JavaScript without new routes
- Improves Time to Interactive on large pages
Angular Deferrable by the numbers
- 176 all-time installs (skills.sh)
- +1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Ranked #903 of 2,245 Frontend Development skills by installs in the Skillselion catalog
- Data as of Aug 4, 2026 (Skillselion catalog sync)
npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-deferrableAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 176 |
|---|---|
| repo stars | ★ 6 |
| Last updated | April 4, 2026 |
| Repository | oguzhan18/angular-ecosystem-skills ↗ |
What it does
Implement Angular @defer blocks to lazy-load heavy templates, defer below-fold widgets, and gate rendering on viewport, interaction, or idle triggers without manual route splitting.
Files
Angular Deferrable Views
Version: Angular 17+ (2025) Tags: @defer, Deferrable, Lazy Loading
References: Deferrable Views
Best Practices
- Use @defer with on viewport
@Component({
template: `
@defer (on viewport) {
<heavy-chart />
} @placeholder {
<div>Loading...</div>
}
`
})
export class DashboardComponent {}- Use @defer with on interaction
@Component({
template: `
<button (click)="showModal = true">Open</button>
@defer (when showModal) {
<modal-component />
}
`
})
export class MyComponent {}- Use @defer with on hover
@Component({
template: `
@defer (on hover) {
<tooltip />
}
`
})
export class TooltipWrapper {}Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4kFrontend Developmentfrontend