jinhduong / Ng2 Loading Indicator
Licence: mit
Angular 2/4 loading indicator
Stars: ✭ 12
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Ng2 Loading Indicator
Material Dashboard Angular2
Material Dashboard Angular
Stars: ✭ 814 (+6683.33%)
Mutual labels: angular2
Ng Sticky
Angular 4 sticky, have header or any component sticky easy to use.
Stars: ✭ 25 (+108.33%)
Mutual labels: angular2
Angular Froala Wysiwyg
Angular 4, 5, 6, 7, 8 and 9 plugin for Froala WYSIWYG HTML Rich Text Editor.
Stars: ✭ 696 (+5700%)
Mutual labels: angular2
Whirl
CSS loading animations with minimal effort!
Stars: ✭ 774 (+6350%)
Mutual labels: loading-spinner
Bartonic
Quick Bart Schedule, Favorite Routes, Bart Map Ionic App
Stars: ✭ 8 (-33.33%)
Mutual labels: angular2
Ngx Restangular
Restangular for Angular 2 and higher versions
Stars: ✭ 787 (+6458.33%)
Mutual labels: angular2
Ngx Permissions
Permission and roles based access control for your angular(angular 2,4,5,6,7,9+) applications(AOT, lazy modules compatible
Stars: ✭ 749 (+6141.67%)
Mutual labels: angular2
Aws Cognito Angular Quickstart
An Angular(v5)-based QuickStart single-page app utilizing Amazon Cognito, S3, and DynamoDB (Serverless architecture)
Stars: ✭ 685 (+5608.33%)
Mutual labels: angular2
Angular2 Carousel
An lightweight , touchable and responsive library to create a carousel for angular 2 / 4 / 5
Stars: ✭ 26 (+116.67%)
Mutual labels: angular2
Ngx Echarts
An angular (ver >= 2.x) directive for ECharts (ver >= 3.x)
Stars: ✭ 820 (+6733.33%)
Mutual labels: angular2
Liferay Angular Portlet
A simple Liferay portlet which uses Angular to execute REST calls and display data.
Stars: ✭ 8 (-33.33%)
Mutual labels: angular2
Ng Select
A select library for Angular, with single and multiple select functionality
Stars: ✭ 16 (+33.33%)
Mutual labels: angular2
@decorator
ng2-loading-indicatorThe simplest library for loading indicator @decorator in Angular 2/4.
- No dependencies
- Simplest
1. Install
npm install ng2-loading-indicator --save
2. Using
.component
Add into import { LoadingIndicator } from 'ng2-loading-indicator';
We have 2 ways to use this decorator in our code:
1. Whole page loading
Subscription
after call .subscribe
1.1 When return a @LoadingIndicator()
tryLoadingIndicator() {
return Observable.timer(3000).subscribe(x => {
console.log('finished 3s');
});
}
- Other cases in
http
,forms
,... anything in Angular are usingrxjs
@LoadingIndicator()
getDataFromApi() {
return this.http.get('your-api.com')
.map(res => res.json())
.subscribe(res => {});
}
1.2 In async/await function
@LoadingIndicator()
async tryLoadingIndicator() {
await Observable.timer(3000).toPromise();
}
Observable<T>
after call from operators do
, map
,...
1.3 When return a @LoadingIndicator()
tryLoadingIndicator() {
return Observable.timer(3000).do(x => {
console.log('finished 3s');
});
}
2. Parts of the page loading
// Define a variable with HTMLElement
$div: Element;
// Using ElementRef to get DOM element for this component
constructor(private elementRef: ElementRef) {}
// Set value for above variable (HTMLElement)
ngOnInit() {
this.$div = this.elementRef.nativeElement.querySelector('div');
}
// Add the variable string list to @decorator
@LoadingIndicator(['$div'])
async trySectionLoading() {
await Observable.timer(3000).toPromise();
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].