Angular 14 T-Writer.js Library Example to Type Text With Complex Effects & Animations in Browser Using TypeScript

Welcome folks today in this blog post we will be using the t-writer.js library in angular 14 to type text with complex effects and animations using typescript in browser. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new angular project using the below command as shown below

ng new t-writer.js

cd sampleproject

And after that you need to install the below libraries using the below command as shown below

npm i t-writer.js

And after that you will see the below directory structure of the angular app as shown below

And now we need to go to app.component.html file and copy paste the following code

app.component.html

<h1 class="tw" #tw></h1>

1	<h1 class="tw" #tw></h1>

As you can see in the above html code we have the heading in which we have assigned the reference or id to it. So now we can access this reference inside the typescript code as shown below

And now we need to go to app.component.ts file and copy paste the following code

app.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import Typewriter from 't-writer.js';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular';
  @ViewChild('tw') typewriterElement;

  ngOnInit() {
    const target = this.typewriterElement.nativeElement

    const writer = new Typewriter(target, {
      loop: true,
      typeColor: 'red'
    })

    writer
      .type(`KANE WILLIAMSON IS THE CAPTAIN OF NEW ZEALAND`)
      .rest(5000)
      .start()

  }
}

import { Component, OnInit, ViewChild } from '@angular/core';

import Typewriter from 't-writer.js';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

name = 'Angular';

@ViewChild('tw') typewriterElement;

ngOnInit() {

const target = this.typewriterElement.nativeElement

const writer = new Typewriter(target, {

loop: true,

typeColor: 'red'

})

writer

.type(`KANE WILLIAMSON IS THE CAPTAIN OF NEW ZEALAND`)

.rest(5000)

.start()

}

As you can see in the above typescript code we are using the viewchild to get the reference of the h1 and then inside the ngOnInit() we are initializing the typewriter effect and inside we are passing the reference of the html element and then we are passing the options we are passing the loop parameter and also we are passing the textColor of the animation. And then we are using the type() method to type the text and then we are using the start() method to type the text as shown below.