ngx-typed2 is an Angular library designed to seamlessly integrate Typed.js functionalities into Angular applications, compatible with both Single Page Applications (SPA) and Server-Side Rendering (SSR)
You can install ngx-typed2 via npm:
npm install ngx-typed2You can install ngx-typed2 via yarn:
yarn add ngx-typed2You can install ngx-typed2 via pnpm:
pnpm add ngx-typed2Import the NgxTypedJsModule into your Angular module:
import { NgxTypedJsModule } from 'ngx-typed2';
@NgModule({
imports: [
NgxTypedJsModule
]
})
export class AppModule { }Use the ngx-typed2 component in your Angular templates:
<ngx-typed2
[strings]="['Hello', 'World']"
typeSpeed="50"
backSpeed="30"
[loop]="false"
[showCursor]="true"
cursorChar="|"
[autoInsertCss]="true"
></ngx-typed2>| Input | Type | Default | Description |
|---|---|---|---|
| strings | string[] | [] | Array of strings to be typed out sequentially. |
| stringsElement | string | undefined | String element to be typed out. |
| typeSpeed | number | 100 | Typing speed (in milliseconds per character). |
| startDelay | number | undefined | Delay before typing starts (in milliseconds). |
| backSpeed | number | 100 | Backspacing speed (in milliseconds per character). |
| smartBackspace | boolean | undefined | Enable smart backspacing for natural typing effects. |
| shuffle | boolean | undefined | Enable random string selection. |
| backDelay | number | 500 | Delay between characters during backspacing. |
| fadeOut | boolean | undefined | Enable fade-out effect. |
| fadeOutClass | string | undefined | CSS class for fade-out effect. |
| fadeOutDelay | number | 500 | Delay before fade-out (in milliseconds). |
| loop | boolean | true | Control looping of typing animation. |
| loopCount | number | undefined | Specify the number of loop counts. |
| showCursor | boolean | undefined | Toggle cursor visibility. |
| cursorChar | string | undefined | Customize cursor appearance. |
| autoInsertCss | boolean | undefined | Automatically insert Typed.js CSS. |
| attr | string | undefined | Additional attributes. |
| bindInputFocusEvents | boolean | undefined | Bind input focus events. |
| contentType | string | undefined | Specify content type (e.g., 'html', 'text'). |
| cursorColor | string | undefined | Customize cursor color. |
| ngClass | string | undefined | Apply custom classes. |
| Output | Event Emitted Data | Description |
|---|---|---|
| onBeginEvent | Typed | Triggered when typing begins. |
| onCompleteEvent | Typed | Triggered when typing completes. |
| preStringTypedEvent | { arrayPos: number, self: Typed } | Triggered before a string is typed. |
| onStringTypedEvent | { arrayPos: number, self: Typed } | Triggered after a string is typed. |
| onLastStringBackspacedEvent | Typed | Triggered when the last string is backspaced. |
| onTypingPausedEvent | { arrayPos: number, self: Typed } | Triggered when typing is paused. |
| onTypingResumedEvent | { arrayPos: number, self: Typed } | Triggered when typing resumes after being paused. |
| onResetEvent | Typed | Triggered when typing is reset. |
| onStopEvent | { arrayPos: number, self: Typed } | Triggered when typing is stopped. |
| onStartEvent | { arrayPos: number, self: Typed } | Triggered when typing starts for a particular string. |
| onDestroyEvent | Typed | Triggered when the ngx-typed2 instance is destroyed. |
| Method | Description |
|---|---|
| start() | Initiates the typing animation. |
| stop() | Pauses the typing animation. |
| reset() | Resets the typing animation to its initial state. |
| toggle() | Toggles between starting and stopping the typing animation. |
| destroy() | Stops the typing animation and cleans up any resources used. |
This project is licensed under the MIT License - see the LICENSE file for details.
- Author: Shiv Kumar
- Website: https://shivkumar.me
- Email: hello@shivkumar.me
- Issue Tracker: GitHub Issues