### 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 ``` ``` -------------------------------- ### 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 YOUR CONTENT ``` ``` -------------------------------- ### 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 YOUR CONTENT ``` ``` -------------------------------- ### 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 Your Content Here ``` ``` -------------------------------- ### 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 `` tag. ```html YOUR CONTENT ``` -------------------------------- ### 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

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

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 ``` 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 YOUR CONTENT ``` -------------------------------- ### 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 `` component in an Angular HTML template, with a placeholder for custom content. ```html YOUR CONTENT ``` -------------------------------- ### 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

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 `` tags. This is a simplified example, and further customization can be achieved by passing properties to the `om-marquee` element. ```html YOUR CONTENT ``` -------------------------------- ### 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 YOUR CONTENT ``` 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

Flickering Grid Example

 ``` ### 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 YOUR CONTENT ``` 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 ``` ## 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 ``` ``` -------------------------------- ### 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 YOUR CONTENT ``` ``` -------------------------------- ### 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 ``` ### 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 ``` **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 YOUR CONTENT ``` -------------------------------- ### 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

A NICE TOUCH

``` ### 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 YOUR CONTENT ``` ### 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 YOUR CONTENT ``` -------------------------------- ### 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 ```