Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on February 3, 2023

 

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

 

 

TypeScript
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.

 

 

 

Recent Posts

  • Android Java Project to Merge Multiple PDF Documents From Gallery Using iTextPDF Library
  • Android Java Project to Detect System Hardware & System CPU Info & Display inside TextView Widget
  • Android Java Project to Integrate Google OAuth2 Login & Logout System & Save User Info in SharedPreferences
  • Android Java Project to Export Raw Text to PDF Document Using iTextPDF Library
  • Android Java Project to Export Images From Gallery to PDF Document Using iTextPDF Library
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme