Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/avivharuzi/ngx-skeleton
Angular placeholder preview component before the content is loaded
https://github.com/avivharuzi/ngx-skeleton
anuglar skeleton typescript
Last synced: about 2 months ago
JSON representation
Angular placeholder preview component before the content is loaded
- Host: GitHub
- URL: https://github.com/avivharuzi/ngx-skeleton
- Owner: avivharuzi
- License: mit
- Created: 2019-09-07T15:17:54.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-09-23T18:34:38.000Z (over 1 year ago)
- Last Synced: 2024-11-12T03:36:07.761Z (about 2 months ago)
- Topics: anuglar, skeleton, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ngx-skeleton
- Size: 3.05 MB
- Stars: 9
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-skeleton
Angular placeholder preview component before the content is loaded.
  
## Environment Support
- Angular 6+
- Server-side Rendering
## Compatibility
Versions compatibility list:
| ngx-skeleton | Angular |
| ------------ | ------------- |
| 16.x.x | 16.x.x |
| 15.x.x | 15.x.x |
| 14.x.x | 14.x.x |
| 13.x.x | 13.x.x |
| 12.x.x | 12.x.x |
| 11.x.x | 11.x.x |
| 1.x.x | 6.xx - 10.x.x |
## Installation
```sh
npm i ngx-skeleton
```
OR
```sh
yarn install ngx-skeleton
```
## Demo
[Demo page](https://avivharuzi.github.io/ngx-skeleton)
## Usage
Import `NgxSkeletonModule` into the current module's imports:
```ts
import { NgxSkeletonModule } from 'ngx-skeleton';
imports: [
// ...
NgxSkeletonModule,
],
```
You can also import `NgxSkeletonComponent` as standalone component:
```ts
import { NgxSkeletonComponent } from 'ngx-skeleton';
@Component({
standalone: true,
imports: [NgxSkeletonComponent],
// ...
})
export class MyComponent {}
```
Use in your components (this is code example from demo page):
```html
{{ movie.title }}
{{ movie.date }}
```
## API
### Inputs
| Input | Type | Default |
| ----------------- | ---------------------- | ----------------------- |
| `animate` | boolean | `true` |
| `backgroundColor` | string | `'rgba(0, 0, 0, 0.08)'` |
| `borderRadius` | number | string | `0` |
| `height` | number | string | `'100%'` |
| `margin` | number | string | `0` |
| `variant` | `'rect'` or `'circle'` | `'rect'` |
| `width` | number | string | `'100%'` |
# License
[MIT](LICENSE)