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.