Ngx Skeleton Loader

https://github.com/willmendesneto/ngx-skeleton-loader
Admin
Ngx Skeleton Loader is an Angular component that provides a transparent and easy way to integrate...
Tokens:4,000
Snippets:34
Trust Score:9.3
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Setup ngx-skeleton-loader Development Environment (Bash)

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/CONTRIBUTING.md

Provides the necessary bash commands to clone the ngx-skeleton-loader repository, navigate into the project directory, install dependencies using npm, and start the local development server. Requires Node.js v20.x.x+ and npm 10.x.x+.

```bash
git clone https://github.com/willmendesneto/ngx-skeleton-loader.git
cd ngx-skeleton-loader
npm install
npm start
```

--------------------------------

### Running Angular Demo Locally

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/README.md

Starts the local development server for the Angular demo application using the Angular CLI. Access the demo in your browser at http://localhost:4200.

```shell
npm start
```

--------------------------------

### Angular Component for CSS Theming Example

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/README.md

Provides the TypeScript code for an Angular component used as an example to demonstrate applying themes to ngx-skeleton-loader using component-level CSS.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'my-ngx-skeleton-loader-with-theming',
  templateUrl: './my-ngx-skeleton-loader-with-theming.component.html',
  styleUrls: ['./my-ngx-skeleton-loader-with-theming.component.css'],
})
export class MyNGXSkeletonLoaderWithThemingComponent {
  /* ... code goes here*/
}
```

--------------------------------

### Run ngx-skeleton-loader Test Suite (Bash)

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/CONTRIBUTING.md

Executes the test suite for the ngx-skeleton-loader project using the npm test command. This is a required step before submitting pull requests to ensure code quality and functionality.

```bash
npm test
```

--------------------------------

### Angular Component HTML Template for CSS Theming

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/README.md

Shows the HTML template for the example Angular component, demonstrating the ngx-skeleton-loader usage without the `[theme]` attribute when applying styles via component CSS.

```html
<!--
file: my-ngx-skeleton-loader-with-theming.component.html

As an example, it's not using themes via [theme] attributes.
-->

<ngx-skeleton-loader count="5" animation="pulse" />
```

--------------------------------

### Install NGX Skeleton Loader via NPM

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/README.md

Installs the ngx-skeleton-loader package as a project dependency using npm. This command adds the library to your project's package.json file and downloads it into the node_modules directory.

```shell
npm install ngx-skeleton-loader --save
```

--------------------------------

### Using NgxSkeletonLoader Component with Global and Local Themes (Angular HTML)

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/README.md

Provides HTML examples demonstrating how the `<ngx-skeleton-loader>` component behaves when global theme extension is enabled. It shows how components without local themes use the global theme, how local themes combine with global ones, and how local theme properties override global ones.

```html
<div class="item">
  <ngx-skeleton-loader />
  <!-- above line will produce a skeleton component using `height: 30px;`" -->
  <ngx-skeleton-loader [theme]="{background: 'blue'}" />
  <!-- above line will produce a skeleton component using `height: 30px; background: blue;`" -->
  <ngx-skeleton-loader [theme]="{height: '50px', background: 'red'}" />
  <!-- above line will produce a skeleton component using `height: 50px; background: red;`" -->
</div>

```

--------------------------------

### Using NgxSkeletonLoader Component with Global Defaults (Angular HTML)

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/README.md

Shows an example of the `<ngx-skeleton-loader>` component in HTML, illustrating how it inherits the global configuration set via `NgxSkeletonLoaderModule.forRoot()`, specifically showing the effect of `count`, `appearance`, and the globally configured `animation` and `loadingText`.

```html
<div class="item">
  <ngx-skeleton-loader count="5" appearance="circle" />
  <!-- above line will produce the rendering of 5 circles with the pulse animation and the aria-valuetext attribute set with "This item is actually loading..." -->
</div>

```

--------------------------------

### Checkout Stable Release Tag (Bash)

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/PUBLISHING_HOTFIX.md

Example command to checkout a specific stable release tag. This puts the repository in a detached HEAD state, which is the basis for creating the hotfix branch.

```bash
git checkout v1.1.0
```

--------------------------------

### Using NgxSkeletonLoader in Angular 17+ Deferrable Views (Angular HTML)

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/README.md

Shows an example of integrating the `<ngx-skeleton-loader>` component within an Angular 17+ `@defer` block, specifically using it as a `@placeholder` while the deferred content is loading.

```html
<div class="item">
  @defer {
    <my-item-view />
  } @placeholder (minimum 1000ms) {
    <ngx-skeleton-loader />
  }
</div>

```

--------------------------------

### Using ngx-skeleton-loader with extendsFromRoot Theme

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/CHANGELOG.md

Demonstrates how the `ngx-skeleton-loader` component combines the global theme configured via `NgxSkeletonLoaderModule.forRoot()` with local `[theme]` bindings when `extendsFromRoot` is enabled. Shows examples where local themes override or extend the global theme.

```html
<!--
  // ... E.G: App is using this configuration below

  NgxSkeletonLoaderModule.forRoot({
    theme: {
      // Enabliong theme combination
      extendsFromRoot: true,
      // ... list of CSS theme attributes
      height: '30px',
    },
  }),
-->

<div class="item">
  <ngx-skeleton-loader></ngx-skeleton-loader>
  <!-- above line will produce a skeleton component using `height: 30px;`" -->
  <ngx-skeleton-loader [theme]="{background: 'blue'}"></ngx-skeleton-loader>
  <!-- above line will produce a skeleton component using `height: 30px; background: blue;`" -->
  <ngx-skeleton-loader [theme]="{height: '50px', background: 'red'}"></ngx-skeleton-loader>
  <!-- above line will produce a skeleton component using `height: 50px; background: red;`" -->
</div>
```

--------------------------------

### Configure NGX Skeleton Loader in Angular Standalone App

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/README.md

Provides the ngx-skeleton-loader service with optional global configuration (theme) in an Angular standalone application's app.config.ts. This setup makes the skeleton loader available throughout the application.

```typescript
// app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideNgxSkeletonLoader } from 'ngx-skeleton-loader';

export const appConfig: ApplicationConfig = {
  providers: [
    provideNgxSkeletonLoader({
      theme: {
        extendsFromRoot: true,
        height: '30px',
      },
    }),
  ]
};
```

--------------------------------

### Running Project Tests

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/README.md

Provides commands to execute the project's test suite. Use 'npm test' to run tests once, or 'npm run tdd' to run tests in watch mode for continuous testing during development.

```shell
npm test
```

```shell
npm run tdd
```

--------------------------------

### Applying ngx-skeleton-loader Theme with Dot-Notation CSS

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/README.md

Illustrates using the `[theme]` attribute with dot-notation for CSS properties (like `height.px`) and numeric values, similar to Angular's built-in `[style]` directive.

```html
<!--
Note that we are using a combination of styles and [style] inside theme object,
having `height.px` receiving a number and `background-color` receiving a HEX Color
-->
<div style="background: #FF0001; padding: 10px;">
  <ngx-skeleton-loader
    count="5"
    [theme]="{ 
      'height.px': 50,
      'background-color': '#992929'
    }"
  />
</div>
```

--------------------------------

### Applying ngx-skeleton-loader Theme via Component CSS

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/README.md

Demonstrates applying custom styles to the ngx-skeleton-loader component using component-level CSS and the `:host >>>` selector, along with a warning about potential issues with this approach.

```css
/* file: `my-ngx-skeleton-loader-with-theming.component.css`
 * 
 * You can find more details about `:host` at
 * Angular Component Style Docs https://angular.io/guide/component-styles#host
 */
:host >>> ngx-skeleton-loader .skeleton-loader {
  border-radius: 5px;
  height: 50px;
  background-color: #992929;
  border: 1px solid white;
}
```

--------------------------------

### Publishing the Library

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/README.md

Uses the 'np' package via npx to publish a new version of the library. Specify the version type (patch, minor, or major). The command includes flags to prevent yarn usage and cleanup, and specifies the distribution directory.

```shell
npx np <patch|minor|major> --no-yarn --no-cleanup --contents=dist/ngx-skeleton-loader
```

--------------------------------

### Clone Repository and Fetch Updates (Bash)

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/PUBLISHING_HOTFIX.md

Commands to clone the ngx-skeleton-loader repository, navigate into the directory, and fetch all branches and tags from the remote origin.

```bash
git clone https://github.com/willmendesneto/ngx-skeleton-loader.git
cd ngx-skeleton-loader
git fetch --all
```

--------------------------------

### Configuring NgxSkeletonLoaderModule for Theme Extension (Angular TypeScript)

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/README.md

Illustrates how to configure `NgxSkeletonLoaderModule.forRoot()` with a global `theme` object that includes `extendsFromRoot: true`, enabling the combination of global theme styles with local theme inputs on individual components.

```typescript
...
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
...

@NgModule({
  declarations: [
    YourAppComponent
  ],
  imports: [
    ...
    NgxSkeletonLoaderModule.forRoot({
      theme: {
        // Enabliong theme combination
        extendsFromRoot: true,
        // ... list of CSS theme attributes
        height: '30px',
      },
    }),
    ...
  ],
  providers: [],
  bootstrap: [YourAppComponent]
})

export class YourAppComponent {}

```

--------------------------------

### Changelog Entry Format (Markdown)

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/PUBLISHING_HOTFIX.md

Template for adding an entry to the CHANGELOG.md file to document the hotfix. It includes the new version number, date, and a description referencing the issue number.

```markdown
## [x.y.z] - YYYY-MM-DD
### Fixed
- [#issue-number] Description of the hotfix.
```

--------------------------------

### Importing and Configuring NgxSkeletonLoaderModule Globally (Angular TypeScript)

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/README.md

Demonstrates how to import `NgxSkeletonLoaderModule` using `forRoot()` in an Angular NgModule to make it available application-wide and set global default configuration options like animation and loading text.

```typescript
...
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
...

@NgModule({
  declarations: [
    YourAppComponent
  ],
  imports: [
    ...
    NgxSkeletonLoaderModule.forRoot({ animation: 'pulse', loadingText: 'This item is actually loading...' }),
    ...
  ],
  providers: [],
  bootstrap: [YourAppComponent]
})

export class YourAppComponent {}

```

--------------------------------

### Push Hotfix Branch and Tags (Bash)

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/PUBLISHING_HOTFIX.md

Commands to push the newly created hotfix branch and the version tag (created by 'npm version patch') to the remote repository.

```bash
git push origin hotfix/<issue-key>
git push origin --tags
```

--------------------------------

### Applying ngx-skeleton-loader Theme with Dashed-Case CSS

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/README.md

Shows how to apply custom CSS styles to the ngx-skeleton-loader component using the `[theme]` attribute, passing an object with dashed-case CSS property names and string values.

```html
<!--
If you need to change all the background wrapper
you need to apply the style changes on the 
`ngx-skeleton-loader` component wrapper
-->

<div style="background: #FF0001; padding: 10px;">
  <ngx-skeleton-loader
    count="5"
    [theme]="{ 
      'border-radius': '5px',
      height: '50px',
      'background-color': '#992929',
      border: '1px solid white'
    }"
  />
</div>
```

--------------------------------

### Create and Switch to Hotfix Branch (Bash)

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/PUBLISHING_HOTFIX.md

Command to create a new branch named 'hotfix/<issue-key>' based on the current detached HEAD state (the checked-out stable tag) and immediately switch to this new branch.

```bash
git checkout -b hotfix/<issue-key>
```

--------------------------------

### Importing NgxSkeletonLoaderModule with forRoot() in Angular

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/CHANGELOG.md

Illustrates how to import and configure the NgxSkeletonLoaderModule using the `forRoot()` method within an Angular application's root module (e.g., AppModule). This is the recommended way to include the module in your application.

```javascript
import { NgModule } from '@angular/core';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
// ... list of other app dependencies

import { AppComponent } from './app.component';
// ... list of other app components/modules

@NgModule({
  declarations: [AppComponent],
  imports: [NgxSkeletonLoaderModule.forRoot()],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

```

--------------------------------

### Using ngx-skeleton-loader with different animations (HTML)

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/CHANGELOG.md

Demonstrates how to apply different animation types ('false', 'progress', 'pulse') to the ngx-skeleton-loader component using the 'animation' input attribute. The 'progress' animation is the default if the attribute is not provided.

```HTML
<div class="item">
  <!-- Disables the animation -->
  <ngx-skeleton-loader animation="false"></ngx-skeleton-loader>
  <!-- Uses `progress` as animation -->
  <ngx-skeleton-loader animation="progress"></ngx-skeleton-loader>
  <ngx-skeleton-loader></ngx-skeleton-loader>
  <!-- Uses `pulse` as animation -->
  <ngx-skeleton-loader animation="pulse"></ngx-skeleton-loader>
</div>
```

--------------------------------

### Bump Patch Version (Bash)

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/PUBLISHING_HOTFIX.md

Uses npm's version command to increment the patch version number according to semantic versioning. This updates the version in package.json and automatically creates a corresponding Git tag.

```bash
npm version patch
```

--------------------------------

### Use NGX Skeleton Loader Component in HTML Template

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/README.md

Demonstrates how to use the ngx-skeleton-loader component in an HTML template. The 'count' property specifies the number of skeleton elements, and 'appearance' defines their shape (e.g., 'circle').

```html
<div class="item">
  <ngx-skeleton-loader count="5" appearance="circle" />
</div>
```

--------------------------------

### Configuring NgxSkeletonLoaderModule via forRoot() in Angular

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/CHANGELOG.md

This snippet demonstrates how to configure the NgxSkeletonLoaderModule globally within your Angular application's root module using the `forRoot()` method. You can pass an object to set default values for properties like `appearance` and `count`.

```TypeScript
@NgModule({
  // ...
  imports: [NgxSkeletonLoaderModule.forRoot({ appearance: 'circle', count: 3 })],
  // ...
})
```

--------------------------------

### Setting loadingText for ngx-skeleton-loader in HTML

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/CHANGELOG.md

This HTML snippet shows how to use the `loadingText` attribute on the `ngx-skeleton-loader` component. This attribute sets the WAI-ARIA `aria-valuetext` for accessibility purposes, providing a custom text like "Please wait ..." instead of the default "Loading...".

```HTML
<!-- Passing loading text to be used as WAI-ARIA `aria-valuetext` -->
<!-- In this case, it will render the component using "Please wait ..." -->
<!-- Otherwise, it defaults to "Loading..." -->
<div class="skeleton-with-specific-loading-text">
  <ngx-skeleton-loader loadingText="Please wait ..."></ngx-skeleton-loader>
</div>
```

--------------------------------

### Configuring ngx-skeleton-loader Animation

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/README.md

Demonstrates various ways to set the animation type for the ngx-skeleton-loader component using the `animation` attribute, including disabling it with string or boolean values and applying built-in animations like `progress` and `pulse`.

```html
<!--
If you need to change all the background wrapper
you need to apply the style changes on the 
`ngx-skeleton-loader` component wrapper
-->
<div class="item">
  <!-- Disables the animation -->
  <ngx-skeleton-loader animation="false" />
  <!-- Disables the animation, but receiving boolean value from binding -->
  <!-- Via binding it can receive `false` (boolean), "false" (string), or any other animation type -->
  <ngx-skeleton-loader [animation]="classAttributeWithBooleanFalseValue" />
  <!-- Uses `progress` as animation -->
  <ngx-skeleton-loader animation="progress" />
  <ngx-skeleton-loader />
  <!-- Uses `pulse` as animation -->
  <ngx-skeleton-loader animation="pulse" />
</div>
```

--------------------------------

### Configuring ngx-skeleton-loader Animation in HTML

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/CHANGELOG.md

Demonstrates various ways to control the animation of the ngx-skeleton-loader component using the `animation` attribute. It shows how to disable animation using the string 'false' or a boolean binding, and how to specify different animation types like 'progress' or 'pulse'.

```html
<div class="item">
  <!-- Disables the animation -->
  <ngx-skeleton-loader animation="false"></ngx-skeleton-loader>
  <!-- Disables the animation, but receiving boolean value from binding -->
  <!-- Via binding it can receive `false` (boolean), "false" (string), or any other animation type -->
  <ngx-skeleton-loader [animation]="classAttributeWithBooleanFalseValue"></ngx-skeleton-loader>
  <!-- Uses `progress` as animation -->
  <ngx-skeleton-loader animation="progress"></ngx-skeleton-loader>
  <ngx-skeleton-loader></ngx-skeleton-loader>
  <!-- Uses `pulse` as animation -->
  <ngx-skeleton-loader animation="pulse"></ngx-skeleton-loader>
</div>
```

--------------------------------

### Iterating and Conditional Rendering in Angular Template

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.html

This code iterates over an `items()` collection using the `@for` control flow. Inside the loop, it checks if the `appearance()` value is 'custom-content' using the `@if` control flow and conditionally renders content within that block. It also initializes local variables `appearanceValue` and `animationValue` using `@let`.

```Angular Template
@let appearanceValue = appearance(); @let animationValue = animation(); @for (item of items(); track item) {

@if (appearanceValue === 'custom-content') { }

}
```

--------------------------------

### Import NGX Skeleton Loader Module in Angular NgModule

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/README.md

Imports the NgxSkeletonLoaderModule into an Angular NgModule. This step is necessary for applications using the NgModule structure to make the <ngx-skeleton-loader> component available within the module's declared components.

```typescript
...
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
...

@NgModule({
  declarations: [
    YourAppComponent
  ],
  imports: [
    ...
    NgxSkeletonLoaderModule,
    ...
  ],
  providers: [],
  bootstrap: [YourAppComponent]
})

export class YourAppComponent {}

```

--------------------------------

### Disabling ngx-skeleton-loader animation (HTML)

Source: https://github.com/willmendesneto/ngx-skeleton-loader/blob/main/CHANGELOG.md

Shows how to disable the animation of the ngx-skeleton-loader component by setting the 'animation' input attribute to the string value 'false'. This explicitly turns off the loading animation.

```HTML
<div class="item">
  <ngx-skeleton-loader animation="false"></ngx-skeleton-loader>
</div>
```
Tokens:
Raw