Welcome folks today in this blog post we will be using the typed.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 sampleproject
cd sampleproject
And after that you need to install the below libraries using the below command as shown below
npm i ngx-typed-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 2 3 4 5 6 7 |
<ngx-typed-js [strings]="['Bananas are awesome', 'Nobody can argue this fact.','New Zealand','India']" [loop]="true" [shuffle]="true" [typeSpeed]="40" > <h1 class="typing"></h1> </ngx-typed-js> |
As you can see in the above html code we have the ngx-typed-js directive and inside this we are providing the multiple strings to be typed in the form of an array of strings and then we have some options such as the loop option which is boolean value so that this typing animation will be running forever. And then we have the shuffle option to randomize the order of strings when typing and then we also have the option of controlling the speed of the typing animation.
