Comments (5)
Hi @HunteRoi. Thanks for help on that, mate!
One approach that might be used here is by creating a service and adding it to be used on service constructor. E.G. https://angular.io/guide/dependency-injection
So we can have a service like NgxSkeletonLoaderServiceConfig
when we are adding all the information added via forRoot
NgxSkeletonLoaderModule.forRoot({
loadingText: 'Please wait, content is loading...',
animation: 'pulse',
})
And adding it on NgxSkeletonLoaderComponent
, checking and overriding in case there's no default value being passed to the component.
So, based on this rule and example, we can assume:
- If there's no
animation
value, we should setanimation
withpulse
value as default - If there's
animation
value, the given value should be used since that means it was added intentionally.
Happy to help on the review or in any other way I can, mate!
from ngx-skeleton-loader.
@rafaelss95 Yeah, that makes sense to me. Thanks for the feature request, you're welcome to create a PR.
from ngx-skeleton-loader.
This seems like a reasonable request. I'm willing to participate. Although I don't quite know how this could be implemented as the parameters are actually component's attributes with @Input
.
Anyone to guide and review once the PR is done ?
from ngx-skeleton-loader.
Is it worth creating types ? eg
// types
export type Appearance = 'circle' | 'line' | '';
export type Animation = 'progress' | 'progress-dark' | 'pulse' | 'false' | false;
export type Theme = {
// This is required since ngStyle is using `any` as well
// More details in https://angular.io/api/common/NgStyle
// tslint:disable-next-line: no-any
[k: string]: any;
};
export class NgxSkeletonLoaderConfig {
appearance: Appearance = 'line';
animation: Animation = 'progress';
theme: Theme = {};
loadingText: string = 'Loading...';
count: number = 1;
}
export const defaultConfig = new NgxSkeletonLoaderConfig();
//service
@Injectable({ providedIn: 'root' })
export class NgxSkeletonLoaderConfigService {
readonly config: NgxSkeletonLoaderConfig = defaultConfig;
constructor(@Optional() config: NgxSkeletonLoaderConfig) {
if (config) this.config = config;
}
}
This would mean that the changes on the library are more important though.
from ngx-skeleton-loader.
If NgxSkeletonLoaderConfig
is something used in a single spot, perhaps there's no need of it. We can live on NgxSkeletonLoaderConfigService
for better maintenance. Also, there's no need to have NgxSkeletonLoaderConfig
as a class since a const can do the trick.
const defaultConfig = {
appearance: 'line',
animation: 'progress',
theme: {},
loadingText: 'Loading...',
count: 1,
} as NgxSkeletonLoaderConfig;
// ...
For the types, I would say we can apply that in a different matter, but the idea is exactly that!
export type NgxSkeletonLoaderConfig = {
appearance: 'circle' | '';
animation: 'progress' | 'progress-dark' | 'pulse' | 'false' | false;
theme: {
// This is required since ngStyle is using `any` as well
// More details in https://angular.io/api/common/NgStyle
// tslint:disable-next-line: no-any
[k: string]: any;
};
};
And, it can reuse it on the component itself. E.G.
export class NgxSkeletonLoaderComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
// ...
@Input()
appearance: NgxSkeletonLoaderConfig['appearance'] = '';
// ...
}
Don't worry if some of the things I mentioned at the moment are not totally clear. Also, I would encourage you to raise a pull request with the changes, thoughts and suggestions. So we can have some even better discussions there.
PS: Nice initiative @HunteRoi
from ngx-skeleton-loader.
Related Issues (20)
- Skeleton loader animation scrolls outside of mat-card container HOT 1
- Suggestion: adjust peerDependencies to match ng 12 and above HOT 3
- How to change the pulse color ? HOT 2
- Support angular 14 HOT 5
- Add oblique animation option
- "Starting dev server" for a long time HOT 1
- Problem with using Appearance="line" in Mat-Table HOT 1
- Error in component.d.ts after Importing the ngx-skeleton-loader to app.module.ts in Angular 14.2.7 HOT 7
- Possible Angular Universal memory leak HOT 6
- Module parse failed: Unexpected token (56:32) HOT 5
- Unable run in Angular 11 HOT 2
- Version 8 is not published in Releases HOT 2
- Error Angular 10 HOT 1
- Make ngx-skeleton-loader standalone compliant HOT 3
- Possibility to use own svg HOT 1
- demo no workey? HOT 1
- Parent Container dependent Styling HOT 4
- Ivy Distribution Error HOT 6
- Component theme should not replace forRoot theme HOT 3
- v13 support HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-skeleton-loader.