ngx-typewriter

ngx-typewriter

A small angular library for textwriter effect with styling.

DEMO

Installation

npm i ngx-typewriter 

Setup

import {NgxTypewriterModule} from "ngx-typewriter";  
  
@NgModule({  
declarations: [ ... ],  
imports: [  ...,  
NgxTypewriterModule  
],  
providers: [],  
bootstrap: []  
})  
export class MyModule { }  

Usage

1. You have to add tp-writer component with the options and the selector.

   <tp-writer class="messages" [selector]="'twp'" [options]="options"></tp-writer>
   ---
   NOTE: If selector is not provided the default selector will be 'tpw', if you are planning to add multiple tpwriter components you have to provide the selector to differentiate. 
   

2. Define the options

   public options: TPWInterface = { 
       textList: ['ngx-typewriter'], 
       speed: 80,    
       loop: true,    
       delay: 200,  
   }
   

3. If you want to make changes (like adding text, change speed, activate/deactivate looping...) you have to call NgxTypewriterService in the constructor then get the TPW instance by the selector.

    import {NgxTypewriterService, TPW, TPWInterface} from "ngx-typewriter";
   
    export class MyComponent {
   
        public options: TPWInterface = { 
             textList: ['ngx-typewriter'], 
             speed: 80,    
            loop: true,    
            delay: 200,  
        }
        constructor(private typewriterService: NgxTypewriterService) {}
    
        addText() {  
          const tpw: TPW = this.typewriterService.getTPW('tpw');  
          tpw.speed = 200;  
          await tpw.addText('adding another text');  
        }
    }

Component Properties

Property	Type	Default	Description
options	TPWInterface	undefined	List of options of the typewiter effect
selector	string	'tpw'	The select is a unique id useful in the case of the existing of multiple typewriting components
marker	string	`'	'`

Options

List of properties in the options object

Property	Type	Default	Description
textList	string[]	[]	List text to be displayed
speed	string	70	speed of writing
loop	boolean	false	set to true f you want to shoe the effect if loop
delay	number	1000	delay between phrases
classList	{[className: string]: {[cssProperty: string]: string}}	{}	List of CSS classes to be set in the text with #tpw-key(word, class:class-name)#

Functions

Call TPW instance

constructor(private typewriterService: NgxTypewriterService) {}
const tpw: TPW = this.typewriterService.getTPW('tpw');  

Add text

await tpw.addText('adding another text');  

Add css class

const slyle = {  
  'color': 'red',  
  'font-weight': 'bold'  
}  
tpw.addClass('my-class', slyle)

Update options properties

You have the call TPW instance the you will have access to the properties

Example: Update the loop to true

const tpw: TPW = this.typewriterService.getTPW('tpw');  
tpw.loop = true;

Styling

To style words in the text you have to use a special syntax in the text which pretty is easy to use, all you have to do is to add #tpw-key(text, color:red, font-weight:bold)#, this "function" should have the text as the first parameter then you can add the list of styles or classes.

Using CSS classes: you Only have to set the class name with the key class #tpw-key(text, class:my-class)#