angular-typing-animator

Angular 13 Typing Animator - Directive

Usage

• Install node_module angular-typing-animator

$ npm install angular-typing-animator --save

• Import TypingAnimatorModule to your AppModule

import { NgModule } from '@angular/core'
import { BrowserModule  } from '@angular/platform-browser'

import { AppComponent } from './app.component';
import { TypingAnimatorModule } from 'angular-typing-animator'

@NgModule({
  imports: [
    BrowserModule,
    TypingAnimatorModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule {}

• Use it in your template

<span typingAnimator 
      [sentences]="['This is my sentence', 'Here is another sentence']">
</span>

Stackblitz Example: (https://angular-typing-animator.stackblitz.io)

Stackblitz Code Example: (https://stackblitz.com/edit/angular-typing-animator)

Documentation

Properties

/**
 * @property {string[]} required sentences, enter an array of strings (must not be null)
 */
sentences!: '',

/**
 * @property {number} typeSpeed, type speed in milliseconds (Default is 50)
 */
typeSpeed: 50,

/**
 * @property {number} deleteSpeed, delete speed in milliseconds (Default is 30)
 */
typeSpeed: 30,

/**
 * @property {number} startDelay, time before typing starts in milliseconds (Default is 0)
 */
startDelay: 0,

/**
 * @property {boolean} showCursor, set this to false to hide cursor (Default is true)
 */
showCursor: true,


/**
 * All typing is complete and returns the word that was compeleted
 * @event TypingAnimation#onComplete
 */
onComplete: (): string => {},

/**
 * All typing is deleted and returns the word that was deleted
 * @event TypingAnimation#onDeleted
 */
onDeleted: (): string => {},