NGXUI

https://ngxui.com/docs
Admin
NGXUI is a collection of standalone UI components, blocks, and templates for Angular projects,...
Tokens:49,329
Snippets:291
Trust Score:4.3
Update:1 year ago
Show doc for...
Tokens:
Raw
### Installation

Source: https://ngxui.com/docs/swapy

Provides instructions on how to install the ngx-swapy library and its dependencies.

```APIDOC
## Installation

### Description
Follow these steps to install the necessary packages for using the ngx-swapy component in your Angular project.

### Method
N/A (Installation)

### Endpoint
N/A (Installation)

### Parameters
N/A

### Installation Steps
1. **Install Dependencies**:
   ```bash
   npm install @omnedia/ngx-swapy swapy
   ```

2. **Import the Library into your Component**:
   ```typescript
   import { NgxSwapyComponent } from '@omnedia/ngx-swapy';

   @Component({
     selector: 'app-component',
     standalone: true,
     imports: [NgxSwapyComponent],
     // ... other configurations
   })
   export class AppComponent {}
   ```

### Request Example
N/A

### Response
N/A

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### NgxSpotlight Installation

Source: https://ngxui.com/docs/spotlight

Instructions on how to install the @omnedia/ngx-spotlight package using npm.

```APIDOC
## Installation

### Description
To use the NgxSpotlight component, you need to install the `@omnedia/ngx-spotlight` package. Follow these steps to add it to your project.

### Method
N/A (Installation)

### Endpoint
N/A (Installation)

### Parameters
N/A (Installation)

### Request Example
```bash
npm install @omnedia/ngx-spotlight
```

### Response
N/A (Installation)
```

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

### Installation

Source: https://ngxui.com/docs/dark-veil

Instructions for installing the Ngx-Dark-Veil library and its dependencies.

```APIDOC
## Installation

### Description
Follow these steps to install the `@omnedia/ngx-dark-veil` package and its required dependencies.

### Method
Installation Command

### Endpoint
N/A (Package Installation)

### Parameters
None

### Request Example
```bash
npm install @omnedia/ngx-dark-veil ogl
```
```

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

### Installation

Source: https://ngxui.com/docs/lava-lamp

Instructions for installing the NgxLavaLamp library and its dependencies.

```APIDOC
## Installation

### Description
Follow these steps to install the `@omnedia/ngx-lava-lamp` library and the `ogl` dependency in your Angular project.

### Steps

1.  **Install Dependencies**:
    ```bash
    npm install @omnedia/ngx-lava-lamp ogl
    ```

2.  **Import into Component**:
    Import `NgxLavaLampComponent` into your Angular component's imports array.

    ```typescript
    import { NgxLavaLampComponent } from '@omnedia/ngx-lava-lamp';

    @Component({
      selector: 'app-component',
      standalone: true,
      imports: [NgxLavaLampComponent],
      // ... other component configurations
    })
    export class AppComponent { }
    ```

3.  **Use in Template**:
    Use the `om-lava-lamp` tag in your component's HTML template.

    ```html
    <om-lava-lamp></om-lava-lamp>
    ```
```

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

### Installation and Import

Source: https://ngxui.com/docs/particles

Instructions on how to install the ngx-particles library and import it into an Angular component.

```APIDOC
## Installation and Import

### Description
This section provides the steps required to install the `@omnedia/ngx-particles` library using npm and then import the `NgxParticlesComponent` into your Angular application.

### Method
N/A (Installation)

### Endpoint
N/A (Installation)

### Parameters
N/A

### Request Example
N/A (Installation)

### Response
#### Success Response (200)
N/A (Installation)

#### Response Example
N/A (Installation)

### Installation Steps
1. **Install the dependency:**
   ```bash
   npm install @omnedia/ngx-particles
   ```

2. **Import the Library into your Component:**
   * **Component TypeScript:**
     ```typescript
     import { Component } from '@angular/core';
     import { NgxParticlesComponent } from '@omnedia/ngx-particles';

     @Component({
       selector: 'app-component',
       standalone: true,
       imports: [NgxParticlesComponent],
       templateUrl: './component.component.html',
       styleUrl: './component.component.scss'
     })
     export class AppComponent {}
     ```
   * **Component HTML:**
     ```html
     <om-particles> YOUR CONTENT </om-particles>
     ```
```

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

### Installation

Source: https://ngxui.com/docs/cryptic-text

Instructions for installing the @omnedia/ngx-cryptic-text package.

```APIDOC
## Installation

### Description
Install the Ngx Cryptic Text library using npm.

### Method
npm install

### Endpoint
N/A

### Parameters
None

### Request Example
```bash
npm install @omnedia/ngx-cryptic-text
```

### Response
#### Success Response
- The package will be downloaded and installed in your project's node_modules directory.

#### Response Example
(Terminal output indicating successful installation)
```

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

### NPM Installation Command

Source: https://ngxui.com/docs/gridpattern

The command to install the ngx-gridpattern library using npm.

```bash
npm install @omnedia/ngx-gridpattern
```

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

### Install NgxRetroGrid

Source: https://ngxui.com/docs/retro-grid

Installs the NgxRetroGrid library using npm. This is the first step to integrate the component into your project.

```bash
npm install @omnedia/ngx-retro-grid
```

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

### Installation and Import

Source: https://ngxui.com/docs/background-beams

Instructions for installing the library and importing the NgxBackgroundBeamsComponent into an Angular module or component.

```APIDOC
## Installation and Import

### Description
Steps to install the `@omnedia/ngx-background-beams` package and import the necessary component into your Angular project.

### Installation
```bash
npm install @omnedia/ngx-background-beams
```

### Import
#### .component.ts
```typescript
import { NgxBackgroundBeamsComponent } from "@omnedia/ngx-background-beams";

@Component({
  selector: 'app-component',
  standalone: true,
  imports: [NgxBackgroundBeamsComponent],
  // ... other component configurations
})
export class AppComponent {}
```

#### .component.html
```html
<om-background-beams> YOUR CONTENT </om-background-beams>
```
```

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

### Angular Component Setup for ngx-gridpattern

Source: https://ngxui.com/docs/gridpattern

Demonstrates the basic setup of an Angular component, importing the NgxGridpatternComponent and configuring its template and styles.

```typescript
import { NgxGridpatternComponent } from '@omnedia/ngx-gridpattern';

@Component({
  selector: 'app-component',
  standalone: true,
  imports: [NgxGridpatternComponent],
  templateUrl: './component.component.html',
  styleUrl: './component.component.scss'
})
export class AppComponent {}
```

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

### Install ngx-border-beam using npm

Source: https://ngxui.com/docs/border-beam

This command installs the ngx-border-beam package from npm, making it available for use in your Angular project. Ensure you have Node.js and npm installed.

```bash
npm install @omnedia/ngx-border-beam
```

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

### Install ngx-halo Dependency

Source: https://ngxui.com/docs/halo

Instructions for installing the ngx-halo package using npm. This is the first step to integrate the component into a project.

```bash
npm install @omnedia/ngx-halo
```

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

### Installation of ngx-particles

Source: https://ngxui.com/docs/particles

Instructions for installing the ngx-particles library using npm. This is the first step to integrating the particles functionality into an Angular project.

```bash
npm install @omnedia/ngx-particles
```

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

### Installation and Import

Source: https://ngxui.com/docs/retro-grid

Instructions for installing the @omnedia/ngx-retro-grid package and importing the NgxRetroGridComponent into your Angular module or component.

```APIDOC
## Installation

1. **Install Dependency**
   ```bash
   npm install @omnedia/ngx-retro-grid
   ```

2. **Import Component**
   Import `NgxRetroGridComponent` into your Angular component or module:
   ```typescript
   import { NgxRetroGridComponent } from '@omnedia/ngx-retro-grid';

   @Component({
     selector: 'app-your-component',
     standalone: true,
     imports: [NgxRetroGridComponent],
     // ... other component configurations
   })
   export class YourComponent {}
   ```

3. **Usage in Template**
   Use the component in your HTML template:
   ```html
   <om-retro-grid> Your Content Here </om-retro-grid>
   ```
```

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

### Basic NgxHighlighter Usage Example

Source: https://ngxui.com/docs/highlighter

A minimal example demonstrating the basic integration of NgxHighlighter in an Angular HTML template. It shows how to wrap content with the `<om-highlighter>` tag.

```html
<om-highlighter> YOUR CONTENT </om-highlighter>
```

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

### Install ngx-lightning Dependency

Source: https://ngxui.com/docs/lightning

Command to install the ngx-lightning library using npm. This is the first step before using the component in an Angular project.

```bash
npm install @omnedia/ngx-lightning
```

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

### NPM Installation for ngx-marquee

Source: https://ngxui.com/docs/marquee

This command installs the ngx-marquee library using npm, making it available for use in your Angular project. Ensure you have Node.js and npm installed. After installation, the component can be imported into your Angular modules or components.

```bash
npm install @omnedia/ngx-marquee
```

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

### Installation of ngx-steel-beams and Three.js

Source: https://ngxui.com/docs/steel-beams

Instructions for installing the necessary npm packages for the ngx-steel-beams component and its dependency, Three.js. This command downloads and installs both libraries into the project's node_modules directory.

```bash
npm install @omnedia/ngx-steel-beams three
```

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

### Install NgxFade Dependency

Source: https://ngxui.com/docs/fade

This command installs the NgxFade library using npm. Ensure you have Node.js and npm installed on your system.

```bash
npm install @omnedia/ngx-fade
```

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

### Install ngx-light-rays and ogl

Source: https://ngxui.com/docs/light-rays

Installs the necessary dependencies for the ngx-light-rays library and its peer dependency ogl using npm.

```bash
npm install @omnedia/ngx-light-rays ogl
```

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

### Install ngx-spotlight

Source: https://ngxui.com/docs/spotlight

Installs the ngx-spotlight package using npm. This is the first step to integrate the spotlight component into your Angular project.

```bash
npm install @omnedia/ngx-spotlight
```

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

### Installation and Import

Source: https://ngxui.com/docs/shine-border

Steps to install the ngx-shine-border library and import the component into your Angular module or component.

```APIDOC
## Installation

1. **Install Dependencies**
```bash
npm install @omnedia/ngx-shine-border
```

2. **Import the Library**

   **In your Component (.component.ts):**
   ```typescript
   import { NgxShineBorderComponent } from '@omnedia/ngx-shine-border';

   @Component({
     selector: 'app-your-component',
     standalone: true,
     imports: [NgxShineBorderComponent],
     // ... other component configurations
   })
   export class YourComponent {}
   ```

   **In your Module (.module.ts) (if not using standalone components):**
   ```typescript
   import { NgModule } from '@angular/core';
   import { NgxShineBorderComponent } from '@omnedia/ngx-shine-border';

   @NgModule({
     declarations: [
       // ... your components
     ],
     imports: [
       NgxShineBorderComponent,
       // ... other modules
     ],
     exports: [
       NgxShineBorderComponent
     ]
   })
   export class YourModule {}
   ```
```

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

### Install ngx-flickering-grid

Source: https://ngxui.com/docs/flickering-grid

Installs the ngx-flickering-grid dependency using npm. This is the first step to using the component in an Angular project.

```bash
npm install @omnedia/ngx-flickering-grid
```

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

### Install ngx-faulty-terminal

Source: https://ngxui.com/docs/faulty-terminal

Installs the necessary dependencies for the ngx-faulty-terminal library using npm.

```bash
npm install @omnedia/ngx-faulty-terminal ogl
```

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

### NgxHighlighter Installation Command

Source: https://ngxui.com/docs/highlighter

The npm command to install the NgxHighlighter and its required dependency, rough-notation. This step is crucial before integrating the component into an Angular project.

```bash
npm install @omnedia/ngx-highlighter rough-notation
```

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

### Install ngx-tracing-beam Dependency

Source: https://ngxui.com/docs/tracing-beam

Installs the ngx-tracing-beam library using npm. This is the first step to integrate the tracing beam into your Angular project.

```bash
npm install @omnedia/ngx-tracing-beam
```

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

### Install ngx-lava-lamp and ogl

Source: https://ngxui.com/docs/lava-lamp

Installs the necessary npm packages for the ngx-lava-lamp component and its dependency, ogl.

```bash
npm install @omnedia/ngx-lava-lamp ogl
```

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

### Installation Command for ngx-orb

Source: https://ngxui.com/docs/orb

This command installs the necessary dependencies, ngx-orb and ogl, using npm. These libraries are required for the animated interactive orb functionality.

```bash
npm install @omnedia/ngx-orb ogl
```

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

### Install ngx-aurora

Source: https://ngxui.com/docs/aurora

Installs the ngx-aurora package using npm. This is the first step to integrate the library into your Angular project.

```bash
npm install @omnedia/ngx-aurora
```

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

### NgxRipple Component Example

Source: https://ngxui.com/docs/ripple

Provides an example of how to use the NgxRipple component with custom properties and styling.

```APIDOC
## Example Usage

**Component Template (.component.html):**
```html
<om-ripple
  [rippleBorderColor]="'rgba(255, 255, 255, 0.7)'"
  [rippleColor]="'rgba(174, 174, 174, 0.54)'"
  styleClass="custom-ripple"
>
  <div class="content">
      <h1>
          Ripple
      </h1>
  </div>
</om-ripple>
```

**Component Styles (.component.scss):**
```scss
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 450px;

  h1 {
    font-size: 4rem;
    font-weight: bold;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(
      to bottom,
      #fff 0,
      rgba(255, 255, 255, 0.1) 95%
    );
  }
}
```

**Global Styles (e.g., global-style.scss):**
```scss
.custom-ripple > .om-ripple-background {
  transform: scale(1.3);
}
```
```

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

### Example Usage with Properties

Source: https://ngxui.com/docs/gridpattern

An example demonstrating how to use the NgxGridpattern component with specific property values for grid and gradient colors.

```APIDOC
## Example Usage

**component.html**
```html
<om-gridpattern
    [gridColor]="'rgb(66,66,66)'"
    [gradientColor]="'rgb(15, 15, 15)'"
>
  <div class="content">
      <h1>
          Gridpattern
          <om-neon-underline></om-neon-underline>
      </h1>
  </div>
</om-gridpattern>
```

**component.scss**
```scss
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 450px;

  h1 {
    z-index: 1;
    font-size: 6rem;
    font-weight: bold;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(
      to bottom,
      #fff 0,
      rgba(53, 53, 53) 95%
    );
  }
}
```
```

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

### NPM Installation for Swapy Dependencies

Source: https://ngxui.com/docs/swapy

Command to install the necessary Swapy libraries using npm. This includes the core Angular component and potentially other related packages.

```bash
npm install @omnedia/ngx-swapy swapy
```

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

### Install ngx-gradient-text

Source: https://ngxui.com/docs/gradient-text

Installs the ngx-gradient-text library using npm. This is the first step to integrate the gradient text functionality into your Angular project.

```bash
npm install @omnedia/ngx-gradient-text
```

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

### Install ngx-timeline Dependency

Source: https://ngxui.com/docs/timeline

This code snippet shows the npm command to install the ngx-timeline library, which is a necessary step before using the timeline component in an Angular project.

```bash
npm install @omnedia/ngx-timeline
```

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

### Project Installation with npm

Source: https://ngxui.com/docs/split-text

Instructions for installing the ngx-split-text library and its peer dependency GSAP using npm. This step is required before integrating the library into an Angular project.

```bash
npm install @omnedia/ngx-split-text gsap
```

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

### Install ngx-shine-border via npm

Source: https://ngxui.com/docs/shine-border

Command to install the ngx-shine-border package using npm. This is the first step to include the library in your project.

```bash
npm install @omnedia/ngx-shine-border
```

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

### Install ngx-silk and three.js Dependencies

Source: https://ngxui.com/docs/silk

Command to install the necessary npm packages for ngx-silk and its peer dependency three.js.

```bash
npm install @omnedia/ngx-silk three
```

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

### Install ngx-cryptic-text Package

Source: https://ngxui.com/docs/cryptic-text

Installs the ngx-cryptic-text library using npm, making it available for use in your Angular project.

```bash
npm install @omnedia/ngx-cryptic-text
```

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

### Install ngx-fuzzy-text Package

Source: https://ngxui.com/docs/fuzzy-text

Provides the npm command to install the @omnedia/ngx-fuzzy-text package, which is the first step in integrating the fuzzy text component into your project.

```bash
npm install @omnedia/ngx-fuzzy-text
```

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

### Install ngx-neon-underline Package

Source: https://ngxui.com/docs/neon-underline

This command installs the necessary package for the neon underline component. Ensure you have npm or yarn available.

```bash
npm install @omnedia/ngx-neon-underline
```

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

### Install ngx-vortex

Source: https://ngxui.com/docs/vortex

Installs the ngx-vortex package using npm. This is the first step to using the vortex effect in your Angular application.

```bash
npm install @omnedia/ngx-vortex
```

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

### NgxLightning Component Usage

Source: https://ngxui.com/docs/lightning

Demonstrates how to install and use the NgxLightning component in an Angular application.

```APIDOC
## Installation

1. **Install Dependencies**
```bash
npm install @omnedia/ngx-lightning
```

2. **Import the Library**

   **component.ts**
   ```typescript
   import { NgxLightningComponent } from '@omnedia/ngx-lightning';

   @Component({
     selector: 'app-component',
     standalone: true,
     imports: [NgxLightningComponent],
     templateUrl: './component.component.html',
     styleUrl: './component.component.scss'
   })
   export class AppComponent { }
   ```

   **component.html**
   ```html
   <om-lightning></om-lightning>
   ```

3. **Configure Preferences**
   Customize the lightning animation using the available properties (see Props section).

## Props

| Prop         | Type    | Default     | Description                                                   |
|--------------|---------|-------------|---------------------------------------------------------------|
| hue          | number  | 230         | Hue value for lightning color (in degrees).                   |
| xOffset      | number  | 0           | Horizontal offset of the lightning arc.                       |
| speed        | number  | 1           | Animation speed of the lightning.                             |
| intensity    | number  | 1           | Brightness/intensity of the lightning.                        |
| size         | number  | 1           | Size/scale of the lightning animation.                        |
| flashTimeOut | number  | undefined   | Milliseconds between flashes. If undefined, animation is continuous. |
| transparent  | boolean | false       | If true, canvas background is transparent.                    |
| styleClass   | string  | undefined   | Custom CSS class for styling.                                 |

```

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

### Install ngx-noise Package

Source: https://ngxui.com/docs/noise

Installs the ngx-noise package using npm. This is the initial step to use the noise overlay component in an Angular project.

```bash
npm install @omnedia/ngx-noise
```

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

### Installation Command for ngx-dark-veil

Source: https://ngxui.com/docs/dark-veil

The npm command to install the ngx-dark-veil library and its peer dependency 'ogl'. This is the initial step required before integrating the library into your project.

```bash
npm install @omnedia/ngx-dark-veil ogl
```

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

### Angular Component Setup with NgxSwapy

Source: https://ngxui.com/docs/swapy

Demonstrates how to import and use the NgxSwapyComponent in an Angular application. This setup includes importing the component and defining its selector and template.

```typescript
import { NgxSwapyComponent } from '@omnedia/ngx-swapy';

@Component({
  selector: 'app-component',
  standalone: true,
  imports: [NgxSwapyComponent],
  templateUrl: './component.component.html',
  styleUrl: './component.component.scss'
})
export class AppComponent {}
```

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

### Angular Component Setup for NgxHighlighter

Source: https://ngxui.com/docs/highlighter

Demonstrates how to import and use the NgxHighlighterComponent in an Angular application. This setup includes importing the component and declaring it within the application's standalone component.

```typescript
import { NgxHighlighterComponent } from "@omnedia/ngx-highlighter";

@Component({
  selector: 'app-component',
  standalone: true,
  imports: [NgxHighlighterComponent],
  templateUrl: './component.component.html',
  styleUrl: './component.component.scss'
})
export class AppComponent {}
```

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

### Install ngx-connection-beam via npm

Source: https://ngxui.com/docs/connection-beam

Instructions for installing the ngx-connection-beam library using npm. This is the first step to integrate the connection beam functionality into an Angular project.

```bash
npm install @omnedia/ngx-connection-beam
```

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

### Install ngx-typewriter

Source: https://ngxui.com/docs/typewriter

Installs the ngx-typewriter package using npm. This is the first step to integrate the typewriter effect into your Angular application.

```bash
npm install @omnedia/ngx-typewriter
```

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

### Install ngx-background-beams

Source: https://ngxui.com/docs/background-beams

Installs the ngx-background-beams package using npm. This is the first step to using the background beams component in your Angular project.

```bash
npm install @omnedia/ngx-background-beams
```

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

### Install ngx-ripple Dependency

Source: https://ngxui.com/docs/ripple

Installs the ngx-ripple library using npm. This is the first step to using the ripple component in your Angular project.

```bash
npm install @omnedia/ngx-ripple
```

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

### Install ngx-shiny-text using npm

Source: https://ngxui.com/docs/shiny-text

Installs the ngx-shiny-text library, a dependency required for implementing the shimmering text effect in your Angular project.

```bash
npm install @omnedia/ngx-shiny-text
```

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

### Basic ngx-gridpattern Usage in HTML

Source: https://ngxui.com/docs/gridpattern

A minimal example of how to include the om-gridpattern component in an HTML template.

```html
<om-gridpattern> YOUR CONTENT </om-gridpattern>
```

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

### Install ngx-lamp Dependency

Source: https://ngxui.com/docs/lamp

Installs the ngx-lamp package using npm. This is the first step to using the Lamp component in your Angular project.

```bash
npm install @omnedia/ngx-lamp
```

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

### Basic ngx-particles Integration

Source: https://ngxui.com/docs/particles

A minimal example showing the import and usage of the `<om-particles>` component in an Angular HTML template, with a placeholder for custom content.

```html
<om-particles> YOUR CONTENT </om-particles>
```

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

### Install ngx-word-morph

Source: https://ngxui.com/docs/word-morph

Installs the ngx-word-morph library using npm. This is the first step to integrate the word morphing component into your Angular project.

```bash
npm install @omnedia/ngx-word-morph
```

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

### Configured ngx-ripple Component Example

Source: https://ngxui.com/docs/ripple

Illustrates how to configure the om-ripple component with various properties like rippleBorderColor, rippleColor, and styleClass. This example also includes content within the ripple container.

```html
<om-ripple
  [rippleBorderColor]="'rgba(255, 255, 255, 0.7)'"
  [rippleColor]="'rgba(174, 174, 174, 0.54)'"
  styleClass="custom-ripple"
>
  <div class="content">
      <h1>
          Ripple
      </h1>
  </div>
</om-ripple>
```

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

### Basic Usage of ngx-marquee Component

Source: https://ngxui.com/docs/marquee

This example demonstrates the fundamental usage of the om-marquee component. It shows how to import the component and then use it in the HTML template by wrapping the content that needs to be scrolled within the `<om-marquee>` tags. This is a simplified example, and further customization can be achieved by passing properties to the `om-marquee` element.

```html
<om-marquee> YOUR CONTENT </om-marquee>
```

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

### Install ngx-floodlight Dependency

Source: https://ngxui.com/docs/floodlight

Command to install the ngx-floodlight package using npm. This is the initial step required before using the component in an Angular project.

```bash
npm install @omnedia/ngx-floodlight
```

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

### NgxAurora Component Usage

Source: https://ngxui.com/docs/aurora

This section details how to install and import the NgxAurora component into your Angular application, along with examples of its HTML template usage.

```APIDOC
## Installation

1. Install the following dependencies:
```bash
npm install @omnedia/ngx-aurora
```

2. Import the Library into your Component:

   **component.ts**
   ```typescript
   import { NgxAuroraComponent } from '@omnedia/ngx-aurora';

   @Component({
     selector: 'app-component',
     standalone: true,
     imports: [NgxAuroraComponent],
     templateUrl: './component.component.html',
     styleUrl: './component.component.scss'
   })
   export class AppComponent {}
   ```

   **component.html**
   ```html
   <om-aurora> YOUR CONTENT </om-aurora>
   ```

3. Configure the Library to your preferences.
```

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

### Angular Component Setup with World Map

Source: https://ngxui.com/docs/map

Defines an Angular component that utilizes the NgxMapComponent. It imports the necessary module and defines an array of 'dots' with start and end coordinates for map connections.

```typescript
import { Component } from '@angular/core';
import { NgxMapComponent } from '@omnedia/ngx-map';

interface Dot {
  start: { lat: number; lng: number };
  end: { lat: number; lng: number };
}

@Component({
  selector: 'app-component',
  standalone: true,
  imports: [NgxMapComponent],
  templateUrl: './component.component.html',
  styleUrl: './component.component.scss'
})
export class AppComponent {
  dots: Dot[] = [
    {
      start: {
        lat: 64.2008,
        lng: -149.4937,
      }, // Alaska (Fairbanks)
      end: {
        lat: 34.0522,
        lng: -118.2437,
      }, // Los Angeles
    },
    // ... more dots
  ];
}
```

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

### Angular Component Integration (TypeScript)

Source: https://ngxui.com/docs/glitch-text

Demonstrates how to import and use the NgxGlitchTextComponent within an Angular application. This example shows the basic setup for integrating the component into a standalone Angular component.

```typescript
import { NgxGlitchTextComponent } from '@omnedia/ngx-glitch-text';

@Component({
  selector: 'app-component',
  standalone: true,
  imports: [NgxGlitchTextComponent],
  templateUrl: './component.component.html',
  styleUrl: './component.component.scss'
})
export class AppComponent {}
```

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

### Angular Component Setup for Word Morph

Source: https://ngxui.com/docs/word-morph

Demonstrates how to import and use the NgxWordMorphComponent in an Angular application. It includes the necessary import, component setup, and template usage.

```typescript
import { NgxWordMorphComponent } from '@omnedia/ngx-word-morph';

@Component({
  selector: 'app-component',
  standalone: true,
  imports: [NgxWordMorphComponent],
  templateUrl: './component.component.html',
  styleUrl: './component.component.scss'
})
export class AppComponent {}
```

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

### Angular Component Setup for ngx-marquee

Source: https://ngxui.com/docs/marquee

This snippet shows the basic setup of an Angular component, importing and declaring the NgxMarqueeComponent. It's a standalone component, making it easy to use in different parts of an application. No specific inputs or outputs are shown here, but the template would contain the actual marquee implementation.

```typescript
import { NgxMarqueeComponent } from '@omnedia/ngx-marquee';

@Component({
  selector: 'app-component',
  standalone: true,
  imports: [NgxMarqueeComponent],
  templateUrl: './component.component.html',
  styleUrl: './component.component.scss'
})
export class AppComponent {}
```

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

### Ngx Flickering Grid Component Usage

Source: https://ngxui.com/docs/flickering-grid

Demonstrates how to install and use the NgxFlickeringGridComponent in an Angular application. Includes installation instructions, component import, and template usage with customization of props like squareSize.

```APIDOC
## Installation

1. Install the following dependencies:
```bash
npm install @omnedia/ngx-flickering-grid
```

2. Import the Library into your Component:
```typescript
import { NgxFlickeringGridComponent } from '@omnedia/ngx-flickering-grid';

@Component({
  selector: 'app-component',
  standalone: true,
  imports: [NgxFlickeringGridComponent],
  templateUrl: './component.component.html',
  styleUrl: './component.component.scss'
})
export class AppComponent {}
```

3. Configure the Library to your preferences.

## Props

| Prop          | Type   | Default | Description                                                                          |
|---------------|--------|---------|--------------------------------------------------------------------------------------|
| squareSize    | string | 4       | Size of each square in pixels. Defaults to 4px.                                      |
| gridGap       | string | 6       | Gap between the squares in pixels. Defaults to 6px.                                  |
| flickerChance | number | 0.3     | Probability of squares flickering, represented as a value between 0 and 1. Defaults to 0.3. |
| color         | string | '#6B7280' | The color of the grid squares. Accepts any valid CSS color value. Defaults to '#6B7280'.   |
| maxOpacity    | number | 0.3     | Maximum opacity level of the squares. Accepts a value between 0 and 1. Defaults to 0.3.   |
| styleClass    | string | undefined | Custom CSS class to apply to the `.om-flickering-grid` container.                   |

### Example Usage

```html
<om-flickering-grid [squareSize]="6" [gridGap]="8" [flickerChance]="0.5" [color]="'#FF0000'" [maxOpacity]="0.5" styleClass="custom-grid">
    <div class="content">
        <h1>Flickering Grid Example</h1>
    </div>
</om-flickering-grid>
```

### CSS for Content (Example)

```scss
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 450px;

  h1 {
    font-size: 6rem;
    font-weight: bold;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(
      to bottom,
      #fff 0,
      rgba(53, 53, 53) 95%
    );
  }
}

.custom-grid {
  border: 2px solid blue;
}
```

```

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

### Install ngx-word-pullup Dependency

Source: https://ngxui.com/docs/word-pullup

Installs the necessary ngx-word-pullup package using npm. This is the first step to integrating the text animation component into your Angular project.

```bash
npm install @omnedia/ngx-word-pullup
```

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

### NgxGridpattern Component Usage

Source: https://ngxui.com/docs/gridpattern

Demonstrates how to install and import the NgxGridpattern component into an Angular application and its basic usage in a template.

```APIDOC
## Installation

1. Install the following dependencies:
```npm
npm install @omnedia/ngx-gridpattern
```

2. Import the Library into your Component:

   **component.ts**
   ```typescript
    import { NgxGridpatternComponent } from '@omnedia/ngx-gridpattern';

    @Component({
      selector: 'app-component',
      standalone: true,
      imports: [NgxGridpatternComponent],
      templateUrl: './component.component.html',
      styleUrl: './component.component.scss'
    })
    export class AppComponent {}
   ```

   **component.html**
   ```html
    <om-gridpattern> YOUR CONTENT </om-gridpattern>
   ```

3. Configure the Library to your preferences.
```

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

### NgxFuzzyTextComponent Usage

Source: https://ngxui.com/docs/fuzzy-text

Demonstrates how to install and use the NgxFuzzyTextComponent in an Angular application, including importing and basic configuration.

```APIDOC
## Installation

1. Install the following dependencies:
```
npm install @omnedia/ngx-fuzzy-text
```

2. Import the Library into your Component:

   .component.ts
   ```typescript
    import { NgxFuzzyTextComponent } from '@omnedia/ngx-fuzzy-text';

    @Component({
      selector: 'app-component',
      standalone: true,
      imports: [NgxFuzzyTextComponent],
      templateUrl: './component.component.html',
      styleUrl: './component.component.scss'
    })
    export class AppComponent {}
   ```

   .component.html
   ```html
   <om-fuzzy-text [text]="'Fuzzy Text'"></om-fuzzy-text>
   ```

## Props

Prop| Type| Default| Description  
---|---|---|---
text |  string |  required |  The string to display with the fuzzy effect.   
baseIntensity |  number |  0.15 |  Intensity of the effect when idle.   
hoverIntensity |  number |  0.3 |  Intensity of the effect on hover/touch.   
enableHover |  boolean |  true |  Enables hover effect.   
fuzzRange |  number |  30 |  Max horizontal pixel displacement per line.   
styleClass |  string |  undefined |  Additional class for custom styling.   

## Example Usage

```html
<om-fuzzy-text
  [text]="'404'"
  [baseIntensity]="0.18"
  [hoverIntensity]="0.5"
  [enableHover]="true"
  [fuzzRange]="30"
  styleClass="custom-fuzzy"
></om-fuzzy-text>
```
```

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

### NgxRipple Component Usage

Source: https://ngxui.com/docs/ripple

Demonstrates how to install the NgxRipple library and import the component into an Angular application.

```APIDOC
## Installation

1. **Install Dependencies**
   ```bash
   npm install @omnedia/ngx-ripple
   ```

2. **Import the Library**
   In your Angular component:
   ```typescript
   import { NgxRippleComponent } from '@omnedia/ngx-ripple';

   @Component({
     selector: 'app-component',
     standalone: true,
     imports: [NgxRippleComponent],
     // ... other configurations
   })
   export class AppComponent {}
   ```

3. **Basic Usage in Template**
   ```html
   <om-ripple> YOUR CONTENT </om-ripple>
   ```
```

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

### NgxSplitText Component Usage

Source: https://ngxui.com/docs/split-text

Demonstrates how to use the NgxSplitText component in an Angular application, including installation and import steps.

```APIDOC
## NgxSplitText Component Usage

### Description
This section covers the installation and basic usage of the NgxSplitText component within an Angular project.

### Installation

1.  **Install Dependencies**:
    ```bash
    npm install @omnedia/ngx-split-text gsap
    ```

2.  **Import the Library**:
    Import `NgxSplitText` into your Angular component.

    **File: .component.ts**
    ```typescript
    import { NgxSplitText } from '@omnedia/ngx-split-text';

    @Component({
      selector: 'app-component',
      standalone: true,
      imports: [NgxSplitText],
      templateUrl: './component.component.html',
      styleUrl: './component.component.scss'
    })
    export class AppComponent {}
    ```

3.  **Use in Template**:
    Utilize the `om-split-text` directive in your component's HTML template.

    **File: .component.html**
    ```html
    <om-split-text [text]="'Split Text!'"></om-split-text>
    ```

### Props

The `om-split-text` component accepts the following properties to configure the animation:

| Prop             | Type                    | Default                | Description                                                        |
| :--------------- | :---------------------- | :--------------------- | :----------------------------------------------------------------- |
| text             | string                  | required               | Text content to animate.                                           |
| splitType        | 'chars' | 'words' | 'lines' | chars  | How to split up the text.                                          |
| delay            | number                  | 50                     | Delay between each split element's animation in ms.                |
| duration         | number                  | 2                      | Animation duration of each element in seconds.                     |
| ease             | string                  | elastic.out(1, 0.3)    | GSAP ease string.                                                  |
| from             | OmFromToOptions         | { opacity: 0, y: 20 }  | The initial animation state.                                       |
| to               | OmFromToOptions         | { opacity: 1, y: 0 }   | The final animation state.                                         |
| animateOnlyOnce  | boolean                 | false                  | If the animation should only play once or every time it gets into view. |
| onLetterAnimationComplete | event                | undefined              | Event emitted when the last element finished animating.            |
| styleClass       | string                  | undefined              | A custom CSS class to apply to the .om-aurora container for additional styling. |

### Example Usage with Props

**File: .component.html**
```html
<om-split-text 
  [text]="'Animated Text Example'"
  [splitType]="'words'"
  [duration]="1.5"
  [ease]="'power2.out'"
  [from]="{ opacity: 0, y: 30 }"
  [to]="{ opacity: 1, y: 0 }"
  [animateOnlyOnce]="true"
  (onLetterAnimationComplete)="handleAnimationComplete()"
  styleClass="my-custom-class"
></om-split-text>
```

**File: .component.ts**
```typescript
import { Component } from '@angular/core';
import { NgxSplitText } from '@omnedia/ngx-split-text';

@Component({
  selector: 'app-component',
  standalone: true,
  imports: [NgxSplitText],
  templateUrl: './component.component.html',
  styleUrl: './component.component.scss'
})
export class AppComponent {
  handleAnimationComplete() {
    console.log('Animation complete!');
  }
}
```
```

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

### Install ngx-number-ticker

Source: https://ngxui.com/docs/number-ticker

Installs the ngx-number-ticker package using npm. This is the first step to integrate the component into your Angular project.

```bash
npm install @omnedia/ngx-number-ticker
```

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

### Install ngx-galaxy and ogl dependencies

Source: https://ngxui.com/docs/galaxy

Installs the necessary npm packages for the ngx-galaxy component and its WebGL dependency, ogl.

```bash
npm install @omnedia/ngx-galaxy ogl
```

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

### Basic ngx-halo Usage

Source: https://ngxui.com/docs/halo

A minimal example of using the om-halo component in an HTML template. It shows the basic tag structure without any specific input properties.

```html
<om-halo> YOUR CONTENT </om-halo>
```

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

### Install ngx-word-rotation Package

Source: https://ngxui.com/docs/word-rotation

This command installs the ngx-word-rotation package using npm, making it available for use in your Angular project.

```bash
npm install @omnedia/ngx-word-rotation
```

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

### Install ngx-starry-sky

Source: https://ngxui.com/docs/starry-sky

Installs the ngx-starry-sky package using npm. This is the first step to integrate the starry sky background into your Angular application.

```bash
npm install @omnedia/ngx-starry-sky
```

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

### Install ngx-meteors Dependency

Source: https://ngxui.com/docs/meteors

Installs the ngx-meteors library using npm. This is the first step to integrate the meteor effects into your Angular project.

```bash
npm install @omnedia/ngx-meteors
```

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

### ngx-halo Component Usage

Source: https://ngxui.com/docs/halo

Demonstrates basic integration and usage of the om-halo component with custom sizing and content.

```APIDOC
## Component Integration

### Description
Integrate the `om-halo` component into your Angular application to create a visually appealing halo effect. This example shows how to set the `haloSize` and place custom content within the halo.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Component Properties (Props)
- **haloSize** (string) - Optional - '300px' - A string defining the halo's size.

### Request Example
```html
<om-halo [haloSize]="'150px'">
  <div class="content">
    <h1>
      A NICE TOUCH
      <om-neon-underline></om-neon-underline>
    </h1>
  </div>
</om-halo>
```

### Response
N/A (Component Usage)

### Response Example
N/A (Component Usage)
```

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

### Angular Component Setup with ngx-aurora

Source: https://ngxui.com/docs/aurora

Demonstrates how to import and use the NgxAuroraComponent in an Angular standalone component. It includes the necessary import and component configuration.

```typescript
import { NgxAuroraComponent } from '@omnedia/ngx-aurora';

@Component({
  selector: 'app-component',
  standalone: true,
  imports: [NgxAuroraComponent],
  templateUrl: './component.component.html',
  styleUrl: './component.component.scss'
})
export class AppComponent {}
```

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

### Install ngx-circular-text using npm

Source: https://ngxui.com/docs/circular-text

Provides the npm command to install the @omnedia/ngx-circular-text package, which is a required dependency for using the circular text component.

```bash
npm install @omnedia/ngx-circular-text
```

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

### NgxHighlighter Component Usage

Source: https://ngxui.com/docs/highlighter

Demonstrates how to import and use the NgxHighlighter component in an Angular application.

```APIDOC
## NgxHighlighter Component Usage

### Description
This section shows how to install the NgxHighlighter library and import the component into your Angular module or component.

### Method
Component Import and Usage

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
// In your Angular component's .ts file
import { NgxHighlighterComponent } from "@omnedia/ngx-highlighter";

@Component({
  selector: 'app-your-component',
  standalone: true,
  imports: [NgxHighlighterComponent],
  templateUrl: './your-component.component.html',
  styleUrl: './your-component.component.scss'
})
export class YourComponent {}
```

```html
<!-- In your Angular component's .html file -->
<om-highlighter> YOUR CONTENT </om-highlighter>
```

### Response
#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

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

### Basic Usage of om-spotlight

Source: https://ngxui.com/docs/spotlight

Shows the basic structure for using the om-spotlight component in an HTML template. Content placed inside the om-spotlight tags will be highlighted.

```html
<om-spotlight> YOUR CONTENT </om-spotlight>
```

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

### NPM Installation Command

Source: https://ngxui.com/docs/scrollbar

The command to install the ngx-scrollbar library using npm. This is the first step in integrating the scrollbar functionality into a project.

```bash
npm install @omnedia/ngx-scrollbar
```
Tokens:
Raw