ngx-typewriter v0.0.3

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">

   ---

   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

Options

List of properties in the options object

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)#