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
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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.