@Real-Typer/Angular

An Angular component that gives the effect of typing for texts

Install

npm install @real-typer/angular

Adding To App

import RealTyperModule

import { RealTyperModule } from "@real-typer/angular";

add to app.module.ts in imports array

@NgModule({
  declarations: [],
  imports: [
    RealTyperModule
  ],
  providers: [],
  bootstrap: []})

Quick Start:

After adding the component to your module list, you can simply use it with "real-typer" tags

<real-typer [strings]="'Hello World'"></real-typer>

You can either pass a string or an array of strings.

Customization

the following properties can be customized.

<real-typer
  [strings]="['Hello','World','From','Real-Typer']"
  [cursorCharacter]="'|'"
  [cursorBlink]="true"
  [typeSpeed]="100"
  [deleteSpeed]="50"
  [holdDelay]="1500"
  [pauseDelay]="1000"
  [startDelay]="0"
  [delete]="true"
  [deleteLastString]="true"
  [loop]="true"
  [loopHold]="1500"
  [loopStartIndex]="0"
  [callback]="functionName"
  [callbackArgs]="{}"
  [developerMode]="true"
  [styles]="{'background-color': 'black', 'color':'white'}"
  (callBackOutput)="callBackOutputHandler($event)"
>
</real-typer>

Interface

Inputs:

strings : string | string[] : (default: Undefined) : Strings to be type, this value can be passed both as an string or an array of strings

cursorCharacter : string : (default: "|")          : value for the cursor symbol. put "" for no cursor

cursorBlink (default: true)                        : whether to blink the cursor or not

typeSpeed : number : (default: 100)                : the speed at which the characters are written

deleteSpeed : number : (default: 50)               : the speed at which the characters are deleted

holdDelay : number : (default: 1500)               : the amount of delay before starting to delete

pauseDelay : number : (default: 1000)              : the amount of delay before starting the next string

startDelay : number : (default: 0)                 : the amount of delay before starting to type since the call of method

delete : boolean : (default: true)                 : whether to delete the string or not

deleteLastString : boolean : (default: true)       : whether to delete the last string or not (only happens if 'delete' is true)

loop : boolean : (default: true)                   : whether to loop or not

loopHold : number : (default: 1500)                : the amount of pause before repeating the cycle

loopStartIndex : number : (default: 0)             : Index of the string that the loop will start from the second cycle and on

callback : Function : (default: null)              : callback function that will run after each cycle

callbackArgs : any : (default: null)               : argument that will be passed to the callback function

developerMode : boolean : (default: false)         : logs errors in the console for debugging [recommend for development]

styles : css object : (default: {})                : css styles if form of javascript object

Outputs:

callBackOutput : any                               : Once the callback function is finished, it will emit the output as an event

@Real-Typer/Angular

Author: Cyrus Mobini

Licensed under the MIT license. http://www.opensource.org/licenses/mit-license.php

Copyright 2023 Cyrus Mobini