Skip to content

Commit bce576f

Browse files
Zak-CZak-C
committed
Added linting and formatted code base.
1 parent ee70051 commit bce576f

32 files changed

+10014
-8811
lines changed

‎.eslintrc.json

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"root": true,
3+
"parser": "@typescript-eslint/parser",
4+
"plugins": ["@typescript-eslint", "@angular-eslint"],
5+
"env": {
6+
"node": true
7+
},
8+
"extends": [
9+
"eslint:recommended",
10+
"plugin:@typescript-eslint/recommended",
11+
"prettier"
12+
],
13+
"rules": {
14+
"@typescript-eslint/consistent-type-imports": "error",
15+
"@typescript-eslint/no-unused-vars": [
16+
"error",
17+
{
18+
"argsIgnorePattern": "_"
19+
}
20+
],
21+
"@typescript-eslint/array-type": "error"
22+
}
23+
}

‎.pretterrc

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "all"
4+
}

‎.prettierignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
**/dist
2+
**/coverage
3+
**/.vscode
4+
**/.nyc_output
5+
**/.github
6+
**/node_modules
7+
**/.angular

‎README.md

+90-81
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,89 @@
11
# ngx-loading
2+
23
A customisable loading spinner for Angular applications.
34

45
[![npm version](https://badge.fury.io/js/ngx-loading.svg)](https://badge.fury.io/js/ngx-loading)
56

67
![ngx-loading](https://cloud.githubusercontent.com/assets/26901242/25317405/05a1ce4a-2870-11e7-8693-ed2394b54cba.gif)
78

89
## Table of contents
10+
911
1. [Demo](#demo)
1012
2. [Installation](#installation)
1113
3. [Getting started](#getting-started)
1214
4. [Input parameters](#input-parameters)
1315
5. [Config options](#config-options)
1416

1517
## Demo
18+
1619
Check out the interactive demo on [StackBlitz](https://stackblitz.com/edit/ngx-loading-sample?file=src/app/app.component.html "ngx-loading StackBlitz demo").
1720

1821
## Installation
19-
Install ngx-loading via NPM, using the command below.
22+
23+
Install ngx-loading via NPM, using the command below.
2024

2125
### NPM
26+
2227
```shell
2328
npm install --save ngx-loading
2429
```
2530

2631
NOTE: Version 13 of this package requires Angular 13 as a dependency. If you are using an older version of Angular, please install the relevant version e.g. 2.0.1 for Angular 2:
32+
2733
```shell
2834
npm install --save [email protected]
2935
```
3036

3137
## Getting started
38+
3239
Import the `NgxLoadingModule` in your root application module:
3340

3441
```typescript
35-
import { BrowserModule } from '@angular/platform-browser';
36-
import { NgModule } from '@angular/core';
37-
import { CoreModule } from './core/core.module';
38-
import { NgxLoadingModule } from 'ngx-loading';
42+
import { BrowserModule } from "@angular/platform-browser";
43+
import { NgModule } from "@angular/core";
44+
import { CoreModule } from "./core/core.module";
45+
import { NgxLoadingModule } from "ngx-loading";
3946

4047
@NgModule({
4148
//...
4249
imports: [
4350
//...
44-
NgxLoadingModule.forRoot({})
51+
NgxLoadingModule.forRoot({}),
4552
],
4653
//...
4754
})
48-
export class AppModule { }
55+
export class AppModule {}
4956
```
5057

5158
You must create a boolean variable (e.g. `loading` below) that is accessible from the component which will contain ngx-loading. This boolean is used as an input into ngx-loading, and will determine when the loading spinner is visible.
5259

5360
```typescript
54-
import { Component, OnInit } from '@angular/core';
61+
import { Component, OnInit } from "@angular/core";
5562

5663
@Component({
57-
//...
64+
//...
5865
})
5966
export class AppComponent implements OnInit {
60-
//...
61-
public loading = false;
62-
63-
constructor(private authService: AuthService) { }
64-
65-
ngOnInit() { }
66-
67-
Login() {
68-
this.loading = true;
69-
this.authService.login(this.email, this.password)
70-
.subscribe(res => {
71-
this.loading = false;
72-
//...
73-
}, err => {
74-
this.loading = false;
75-
//...
76-
});
77-
}
67+
//...
68+
public loading = false;
69+
70+
constructor(private authService: AuthService) {}
71+
72+
ngOnInit() {}
73+
74+
Login() {
75+
this.loading = true;
76+
this.authService.login(this.email, this.password).subscribe(
77+
(res) => {
78+
this.loading = false;
79+
//...
80+
},
81+
(err) => {
82+
this.loading = false;
83+
//...
84+
}
85+
);
86+
}
7887
}
7988
```
8089

@@ -86,84 +95,84 @@ NOTE: ngx-loading will fill the entirety of its parent component. If you wish fo
8695

8796
```html
8897
<div class="my-container">
89-
<ng-template #customLoadingTemplate>
90-
<div class="custom-class">
91-
<h3>
92-
Loading...
93-
</h3>
94-
<button (click)="showAlert()">
95-
Click me!
96-
</button>
97-
</div>
98-
</ng-template>
99-
100-
<ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '3px' }" [template]="customLoadingTemplate"></ngx-loading>
101-
//...
98+
<ng-template #customLoadingTemplate>
99+
<div class="custom-class">
100+
<h3>Loading...</h3>
101+
<button (click)="showAlert()">Click me!</button>
102+
</div>
103+
</ng-template>
104+
105+
<ngx-loading
106+
[show]="loading"
107+
[config]="{ backdropBorderRadius: '3px' }"
108+
[template]="customLoadingTemplate"
109+
></ngx-loading>
110+
//...
102111
</div>
103112
```
104113

105114
## Input parameters
106115

107-
| Input | Required | Details |
108-
| ---- | ---- | ---- |
109-
| show | Required | A boolean, which will determine when ngx-loading is visible. |
110-
| config | Optional | A set of configuration options for ngx-loading. If this is not specified, the globally configured configuration will be used, if set. If no config options are set, the ngx-loading default config options will be used. See [Config options](#config-options). |
111-
| template | Optional | A TemplateRef, which will be displayed within the ngx-loading component. Use this to inject your own custom templates into the component.
116+
| Input | Required | Details |
117+
| -------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
118+
| show | Required | A boolean, which will determine when ngx-loading is visible. |
119+
| config | Optional | A set of configuration options for ngx-loading. If this is not specified, the globally configured configuration will be used, if set. If no config options are set, the ngx-loading default config options will be used. See [Config options](#config-options). |
120+
| template | Optional | A TemplateRef, which will be displayed within the ngx-loading component. Use this to inject your own custom templates into the component. |
112121

113122
## Config options
114123

115-
| Option | Required | Default | Details |
116-
| ---- | ---- | ---- | ---- |
117-
| animationType | Optional | ngxLoadingAnimationTypes.threeBounce | The animation to be used within ngx-loading. Use the ngxLoadingAnimationTypes constant to select valid options. |
118-
| backdropBorderRadius | Optional | 0 | The border-radius to be applied to the ngx-loading backdrop, e.g. '14px'. |
119-
| backdropBackgroundColour | Optional | rgba(0, 0, 0, 0.3) | The background-color to be applied to the ngx-loading backdrop, e.g. 'rgba(255, 255, 255, 0.2)'. |
120-
| fullScreenBackdrop | Optional | false | Set to true to make the backdrop full screen, with the loading animation centered in the middle of the screen. |
121-
| primaryColour | Optional | #ffffff | The primary colour, which will be applied to the ngx-loading animation. |
122-
| secondaryColour | Optional | #ffffff | The secondary colour, which will be applied to the ngx-loading animation (where appropriate). |
123-
| tertiaryColour | Optional | #ffffff | The tertiary colour, which will be applied to the ngx-loading animation (where appropriate). |
124+
| Option | Required | Default | Details |
125+
| ------------------------ | -------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
126+
| animationType | Optional | ngxLoadingAnimationTypes.threeBounce | The animation to be used within ngx-loading. Use the ngxLoadingAnimationTypes constant to select valid options. |
127+
| backdropBorderRadius | Optional | 0 | The border-radius to be applied to the ngx-loading backdrop, e.g. '14px'. |
128+
| backdropBackgroundColour | Optional | rgba(0, 0, 0, 0.3) | The background-color to be applied to the ngx-loading backdrop, e.g. 'rgba(255, 255, 255, 0.2)'. |
129+
| fullScreenBackdrop | Optional | false | Set to true to make the backdrop full screen, with the loading animation centered in the middle of the screen. |
130+
| primaryColour | Optional | #ffffff | The primary colour, which will be applied to the ngx-loading animation. |
131+
| secondaryColour | Optional | #ffffff | The secondary colour, which will be applied to the ngx-loading animation (where appropriate). |
132+
| tertiaryColour | Optional | #ffffff | The tertiary colour, which will be applied to the ngx-loading animation (where appropriate). |
124133

125134
Config options can be set globally (using the `.forRoot() module import statement`), as well as being passed into each ngx-loading instance, if required. Config options that are passed into an ngx-loading element will override any custom global config options that have been set. A combination of the two can be used together if appropriate. If no config is set, the default ngx-loading config options will be used. Please see below for an example custom configuration setup, using both global and local configurations.
126135

127136
```typescript
128-
import { BrowserModule } from '@angular/platform-browser';
129-
import { NgModule } from '@angular/core';
130-
import { CoreModule } from './core/core.module';
131-
import { NgxLoadingModule, ngxLoadingAnimationTypes } from 'ngx-loading';
137+
import { BrowserModule } from "@angular/platform-browser";
138+
import { NgModule } from "@angular/core";
139+
import { CoreModule } from "./core/core.module";
140+
import { NgxLoadingModule, ngxLoadingAnimationTypes } from "ngx-loading";
132141

133142
@NgModule({
134143
//...
135144
imports: [
136145
//...
137146
NgxLoadingModule.forRoot({
138-
animationType: ngxLoadingAnimationTypes.wanderingCubes,
139-
backdropBackgroundColour: 'rgba(0,0,0,0.1)',
140-
backdropBorderRadius: '4px',
141-
primaryColour: '#ffffff',
142-
secondaryColour: '#ffffff',
143-
tertiaryColour: '#ffffff'
144-
})
147+
animationType: ngxLoadingAnimationTypes.wanderingCubes,
148+
backdropBackgroundColour: "rgba(0,0,0,0.1)",
149+
backdropBorderRadius: "4px",
150+
primaryColour: "#ffffff",
151+
secondaryColour: "#ffffff",
152+
tertiaryColour: "#ffffff",
153+
}),
145154
],
146155
//...
147156
})
148-
export class AppModule { }
157+
export class AppModule {}
149158
```
150159

151160
```html
152161
<div class="my-container">
153-
<ng-template #customLoadingTemplate>
154-
<div class="custom-class">
155-
<h3>
156-
Loading...
157-
</h3>
158-
<button (click)="showAlert()">
159-
Click me!
160-
</button>
161-
</div>
162-
</ng-template>
163-
164-
<ngx-loading [show]="loading" [config]="{ animationType: ngxLoadingAnimationTypes.rectangleBounce,
162+
<ng-template #customLoadingTemplate>
163+
<div class="custom-class">
164+
<h3>Loading...</h3>
165+
<button (click)="showAlert()">Click me!</button>
166+
</div>
167+
</ng-template>
168+
169+
<ngx-loading
170+
[show]="loading"
171+
[config]="{ animationType: ngxLoadingAnimationTypes.rectangleBounce,
165172
backdropBackgroundColour: 'rgba(255,255,255,0.3)', backdropBorderRadius: '10px',
166-
primaryColour: '#ffffff', secondaryColour: '#ffffff', tertiaryColour: '#ffffff' }" [template]="customLoadingTemplate"></ngx-loading>
167-
//...
173+
primaryColour: '#ffffff', secondaryColour: '#ffffff', tertiaryColour: '#ffffff' }"
174+
[template]="customLoadingTemplate"
175+
></ngx-loading>
176+
//...
168177
</div>
169-
```
178+
```

‎angular.json

+18
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,15 @@
3131
"tsConfig": "projects/ngx-loading/tsconfig.spec.json",
3232
"karmaConfig": "projects/ngx-loading/karma.conf.js"
3333
}
34+
},
35+
"lint": {
36+
"builder": "@angular-eslint/builder:lint",
37+
"options": {
38+
"lintFilePatterns": [
39+
"projects/ngx-loading/**/*.ts",
40+
"projects/ngx-loading/**/*.html"
41+
]
42+
}
3443
}
3544
}
3645
},
@@ -131,6 +140,15 @@
131140
"styles": ["projects/ngx-loading-sample-app/src/styles.scss"],
132141
"scripts": []
133142
}
143+
},
144+
"lint": {
145+
"builder": "@angular-eslint/builder:lint",
146+
"options": {
147+
"lintFilePatterns": [
148+
"projects/ngx-loading-sample-app/**/*.ts",
149+
"projects/ngx-loading-sample-app/**/*.html"
150+
]
151+
}
134152
}
135153
}
136154
}

0 commit comments

Comments
 (0)