Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shiv-source/ngx-typed2
An Angular Typing Animation Library.
https://github.com/shiv-source/ngx-typed2
angular ngx-typed2 typed-js
Last synced: 23 days ago
JSON representation
An Angular Typing Animation Library.
- Host: GitHub
- URL: https://github.com/shiv-source/ngx-typed2
- Owner: shiv-source
- License: mit
- Created: 2024-03-27T18:13:39.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2024-03-27T18:18:49.000Z (9 months ago)
- Last Synced: 2024-11-06T19:18:03.339Z (about 1 month ago)
- Topics: angular, ngx-typed2, typed-js
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ngx-typed2
- Size: 121 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-typed2 - An Angular Typing Animation Library. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-typed2 - An Angular Typing Animation Library. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-typed2 - An Angular Typing Animation Library. (Table of contents / Third Party Components)
README
# ngx-typed2
[](https://github.com/shiv-source/ngx-typed2/pulls)
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)
## Installation
You can install ngx-typed2 via npm:
```bash
npm install ngx-typed2
```
You can install ngx-typed2 via yarn:
```bash
yarn add ngx-typed2
```
You can install ngx-typed2 via pnpm:
```bash
pnpm add ngx-typed2
```
## Usage
### Import the Module
Import the `NgxTypedJsModule` into your Angular module:
```typescript
import { NgxTypedJsModule } from 'ngx-typed2';
@NgModule({
imports: [
NgxTypedJsModule
]
})
export class AppModule { }
```
### Use in the Component
Use the `ngx-typed2` component in your Angular templates:
```html
```
### Available Inputs
| 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. |
### Available Outputs
| 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. |
### Available Methods
| 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. |
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Contact
- **Author:** Shiv Kumar
- **Website:** [https://shivkumar.me](https://shivkumar.me)
- **Email:** [[email protected]](mailto:[email protected])
- **Issue Tracker:** [GitHub Issues](https://github.com/shiv-source/ngx-typed2/issues)