A customizable Angular Skeleton is a placeholder to display instead of the actual content.
npm install @ruc-lib/skeletonbash
npm install @uxpractice/ruc-lib
`
$3
If you only need the Skeleton component:
For Angular 15:
`bash
npm install @ruc-lib/skeleton@3.2.0 @angular/material@^15.0.0 @angular/cdk@^15.0.0
`
For Angular 16:
`bash
npm install @ruc-lib/skeleton@3.2.0 @angular/material@^16.0.0 @angular/cdk@^16.0.0
`
For Angular 17:
`bash
npm install @ruc-lib/skeleton@4.0.0 @angular/material@^17.0.0 @angular/cdk@^17.0.0
`
For Angular 18:
`bash
npm install @ruc-lib/skeleton@4.0.0 @angular/material@^18.0.0 @angular/cdk@^18.0.0
`
For Angular 19:
`bash
npm install @ruc-lib/skeleton@4.0.0 @angular/material@^19.0.0 @angular/cdk@^19.0.0
`
For Angular 20:
`bash
npm install @ruc-lib/skeleton@4.0.0
`
> Note: When installing in Angular 15-19 apps, you must specify the matching @angular/material and @angular/cdk versions to avoid peer dependency conflicts. Angular 20 will automatically use the correct versions.
Version Compatibility
Please ensure you install the correct version of @ruc-lib/skeleton based on your Angular version.
| Angular Version | Compatible @ruc-lib/skeleton Version |
|--------------------|--------------------------------------------|
| 15.x.x | npm install @ruc-lib/skeleton@^3.2.0 |
| 16.x.x | npm install @ruc-lib/skeleton@^3.2.0 |
| 17.x.x | npm install @ruc-lib/skeleton@^4.0.0 |
| 18.x.x | npm install @ruc-lib/skeleton@^4.0.0 |
| 19.x.x | npm install @ruc-lib/skeleton@^4.0.0 |
| 20.x.x | npm install @ruc-lib/skeleton@^4.0.0 |
Usage
$3
In your Angular component file (e.g., app.component.ts), import the RuclibSkeletonComponent:
`typescript
import { Component } from '@angular/core';
// For Complete Library
import { RuclibSkeletonComponent } from '@uxpractice/ruc-lib/skeleton';
// For Individual Package
import { RuclibSkeletonComponent } from '@ruc-lib/skeleton';
@Component({
selector: 'app-root',
imports: [RuclibSkeletonComponent],
templateUrl: './app.component.html',
})
export class AppComponent {
// Component code here
}
`
$3
In your component's template, use the input.
`html
`
API Reference
$3
| Input | Type | Description |
|----------------|--------------------|----------------------------------------------|
| rucInputData | skeletonData | The main configuration object for the component. |
| customTheme | string | An optional CSS class for custom theming. |
$3
This is the main configuration object for the progress bar.
| Property | Type | Description |
|-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------|
| shape | 'rectangle' \| 'rounded-rectangle' \| 'square' \| 'circle' \| 'triangle' \| 'arrow-left' \| 'arrow-right' \| 'arrow-up' \| 'arrow-down' \| 'loader' | The Shape of the Skeleton . |
| width | string | To set the width of skeleton not applicable to loader. |
| height | string | To set the height of skeleton not applicable to loader. |
| borderRadius | string | To set the borderRadius of skeleton not applicable to loader bar. |
| class | string | To set a custom class of skeleton not applicable to loader . |
| tooltip | boolean | If true, displays the tooltip labels. |
| tooltipText | string | To set a tooltip text of skeleton not applicable to loader. |
| tooltipPosition | 'above' \| 'below' \| 'left' \| 'right' | To set a tooltip position of skeleton not applicable to loader. |
| isLoader | boolean | true , fasle when loader shape is selected labels. |
| loaderPosition | 'page' \| 'section' \| 'inline' \| 'newline' | Loader Position labels. |
| loaderCustomText | string | loader custom text. |
| loaderSpinnerLogoUrl | string | loader image if user want. |
Example Configuration
Here's an example of how to configure the Skeleton in your component's TypeScript file.
`typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
skeletonData = {
shape: 'circle',
width: "50px",
height: "50px",
borderRadius: '',
class: '',
tooltip: false,
tooltipText : '',
tooltipPosition: '',
isLoader: false
};
}
``