How To implement lib Typed.js in your Project using Angular..! Quick Tutorial

HOW TO MAKE A COOL ANIMATION USING TYPED.JS?
to see what i’m talking about just visite typed website https://mattboldt.com/demos/typed-js/ Let’s Go

M.Khalil ANEBDOUR
2 min readSep 15, 2019

First step is install the lib:

install the package using a package manager in this case i use npm, in your ligne commande tap:

npm install — save ngx-typed-js

Install is done.

second step is add the module:

In your app.module.ts file you have to add NgxTypedJsModule module to your app and add it to your imports array in the object of @NgModule,

import {NgxTypedJsModule} from ‘ngx-typed-js’;

It looks like this.

The final step in your .html file:

now everything is set you can go to your html file in this case app.component.html and place this angular tag:

<ngx-typed-js [strings]=”[‘I\’m Programmer’, ‘IOS/Android Developer’,’Freelancer’, ‘Photographer’]” backDelay=”500" loop=”true”>

<h1 class=”typing”></h1>

</ngx-typed-js>

I also add some parameters like backDelay witch means 500 ms to start repeating and loop equal to true if what it to not stop.

Conclusion:

I hope you enjoy reading this article and if have any question please make sure contact me on social media Facebook Instagram LinkedIn Twitter or send me an e-mail m.khalil.anebdour@gmail.com, I would like to talk with you Thanks!!

--

--

M.Khalil ANEBDOUR

Financial market R&D engineer, Eager to learn new things. ✌🏼