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