Demo showing how to lazy load a component in Angular without routing!

Andy Bond

Last update: Mar 25, 2022

Related tags

Overview

WidgetDashboard

This project was generated with Angular CLI version 13.2.6.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Reactive Extensions for Angular

RxAngular offers a comprehensive toolset for handling fully reactive Angular applications with the main focus on runtime performance and template rendering.

Jan 5, 2023

Semantic UI Angular Integrations

Semantic-UI-Angular Semantic-UI-Angular is a pure AngularJS 1.x set of directives for Semantic-UI components. We are considering Angular 2 support in

Dec 28, 2022

The code for a set of Angular 6+ components for the PatternFly project.

The code for a set of Angular 6+ components for the PatternFly project. Note that the release/3.x branch supports Angular 4 and 5.

Nov 15, 2022

Angular 11 & Bootstrap 5 & Material Design 2.0 UI KIT

MDB 5 Angular Angular 12 & Bootstrap 5 & Material Design 2.0 UI KIT Get Started in 4 steps MDBAngular 5 Demo 500+ material UI components Super s

Dec 30, 2022

Angular 2 building blocks :package: based on Semantic UI

Angular2 & Semantic UI Angular2 - Semantic UI Live demo ng-semantic.herokuapp.com Angular 2 Semantic UI version: 2.2.2 Installation npm install ng-sem

Dec 23, 2022

Native Angular components & directives for Lightning Design System

ng-lightning This library contains native Angular components and directives written from scratch in TypeScript using the Lightning Design System CSS f

Dec 8, 2022

Native AngularJS (Angular) directives for Bootstrap

Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!

Jan 3, 2023

NG Bootstrap - Angular powered Bootstrap widgets

NG Bootstrap - Angular powered Bootstrap widgets Angular widgets built from the ground up using only Bootstrap 4 CSS with APIs designed for the Angula

Dec 24, 2022

Lightweight, Material Design inspired go to top button. No dependencies. Pure Angular!

Angular ScrollTop Button Lightweight, Material Design inspired button for scroll-to-top of the page. No dependencies. Pure Angular! ✓ Angular 13, Ivy

Dec 18, 2022

Comments

SCAM FTW :)

I read your article and I liked it a lot. It's very clean, well written, and easy to follow! Very well done! I liked the idea of the widgets and cloned your repo. To play around, I did some changes and if you don't mind I would like to share with you my findings.

If you convert your Widget components to SCAM then you won't need to use the Compiler in the LazyWidgetDirective. The idea of the SCAM on the lazy components is to register the components using its own Module definition. So, if you have your SCAM, then you can import in the dashboard module the lazy components instead of the modules :100:

This would be also great as it will be easy to migrate to the Standalone components (like you have already mentioned).

Looking forward to your comments :)

Thanks

opened by profanis 2