Text animation in Angular using Ngx-Teximate

In this article, we learn how to text animation in angular. In this article, we create examples set by step. First, we need to install Angular CLI. To install CLI run the below command.

npm install -g @angular/cli

After installing the Angular CLI let’s create the first project for creating text animation.

ng new text-animation

it will generate a bunch of files with project “text-animation”. now we need to go into the folder and then run the code.

cd text-animation

Second step, we need to install modules “ngx-teximate” and “ng-animate” for text animation. below command need to run in the command prompt

npm install -S ngx-teximate ng-animate

After installing the module we need to import it into the main module file “app.module.js” add below code in the file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TeximateModule } from 'ngx-teximate';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule, // Add this only in the root module
    TeximateModule,
  ],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

After adding a module to the main file then we can use it in our component. Let’s add the below code in the component file

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { TextAnimation } from 'ngx-teximate';
import { fadeInDown } from 'ng-animate';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
  name = 'Angular Example For Teximate';

  enterAnimation: TextAnimation = {
    animation: fadeInDown,
    delay: 50,
    type: 'letter',
  };
}

After adding code in the component let’s add the below code in our component “app.component.html” file.

<div class="container mt-5">
  <h2>
    <teximate #teximate [text]="name" [enter]="enterAnimation"></teximate>
  </h2>

  <button class="btn btn-primary" (click)="teximate.enterPlayer.play()">
    Play
  </button>
</div>

Output

Below is the full embeded code for text animation in angular. you can easily used in your application.
Example