Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/SkyZeroZx/ngx-typed-writer
A Native Angular 2+ Typing Animation Library , Angular Universal Friendly
https://github.com/SkyZeroZx/ngx-typed-writer
angular angular-universal angular-universal-friendly based-typedjs ngx ngx-typed-writer nx typejs-angular typescript typping-animation
Last synced: 23 days ago
JSON representation
A Native Angular 2+ Typing Animation Library , Angular Universal Friendly
- Host: GitHub
- URL: https://github.com/SkyZeroZx/ngx-typed-writer
- Owner: SkyZeroZx
- Created: 2023-07-27T04:21:01.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-06T02:30:43.000Z (about 1 year ago)
- Last Synced: 2024-05-07T12:21:01.683Z (7 months ago)
- Topics: angular, angular-universal, angular-universal-friendly, based-typedjs, ngx, ngx-typed-writer, nx, typejs-angular, typescript, typping-animation
- Language: TypeScript
- Homepage: https://skyzerozx.github.io/ngx-typed-writer/
- Size: 995 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-angular - ngx-typed-writer - A Native Angular 2+ Typing Animation Library (Angular SSR and Angular Universal Friendly). (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-typed-writer - A Native Angular 2+ Typing Animation Library (Angular SSR and Angular Universal Friendly). (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-typed-writer - A Native Angular 2+ Typing Animation Library (Angular SSR and Angular Universal Friendly). (Table of contents / Third Party Components)
README
# NgxTypedWriter | Angular
Angular component for typing text animation . Angular SSR and Universal ( previous Angular 16 ) Friendly.
Based in [Typed.JS](https://github.com/mattboldt/typed.js)
Rewriter native for Angular
# DEMO
See a [live demo](https://skyzerozx.github.io/ngx-typed-writer)
## Versions
Latest version available for each version of Angular
| ngx-facebook-messenger | Angular |
| ---------------------- | ----------- |
| 1.0.0 - 1.2.0 | 16.xx 17.xx |
| 1.3.0 | 17.x 18.xx |
## Basic Usage
Typing a list of strings with tipping text efect
```html
```
## Fade Out Effect
Typing a list of strings with fade out effect enable `fadeOut` and configure `fadeOutDelay`
```html
```
## Shuffled
Randomized typing list of string with enable `shuffle`
```html
strings with',
'2 Some HTML',
'3 Chars × ©'
]"
[shuffle]="true"
[isHTML]="true"
[backSpeed]="20"
[typeSpeed]="30"
>
```
## Smart BackSpace
In the following example emable `smartBackspace`, this would only backspace the words after "My List of strings :"
```html
HTML'
]"
[isHTML]="true"
[smartBackspace]="true"
[backSpeed]="20"
[typeSpeed]="30"
>
```
# Usage
## Install
`npm install ngx-typed-writer`
## Import into Module
```typescript
import { NgxTypedWriterModule } from 'ngx-typed-writer';
@NgModule({
imports: [
...,
NgxTypedWriterModule
],
declarations: [...],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
# API
# Inputs
| Input | Type | Description |
|----------------|------------|-----------------------------------------------------------------------------|
| strings | `string[]` | An array of strings to be typed. |
| typeSpeed | `number` | The speed at which the strings are typed, in milliseconds. |
| startDelay | `number` | The delay before the first string is typed, in milliseconds. |
| backSpeed | `number` | The speed at which the strings are back-spaced, in milliseconds. |
| smartBackspace | `boolean` | When use smart backspace, which means that the typing will stop
when the next string starts with the same characters as the current string. |
| shuffle | `boolean` | Whether to shuffle the strings before typing them. |
| backDelay | `number` | The delay before the back-spacing starts, in milliseconds. |
| isHTML | `boolean` | Whether the strings contain HTML. |
| fadeOut | `boolean` | Whether the component should fade out after each string is typed. |
| loop | `boolean` | When you activate the loop, the list of strings loops infinitely with the typing animation. |
| showCursor | `boolean` | Whether to show a cursor while the component is typing. |
| cursorChar | `string` | The character to use for the cursor. |
| fadeOutDelay | `number` | The delay before the component starts to fade out, in milliseconds. |
# Outputs
| Output | Description |
|--------------|--------------------------------------------------------------------------------------|
| destroy | Emitted when the component is destroyed. |
| initTyped | Emitted when the first string is typed. |
| completeLoop | Emitted when the last string is typed and the component loops back to the beginning. |