How to integrate Typed.js with Angular 2?

Question

I would make a typewriter effect in angular 2 using Typedjs

As indicated on the site page , I installed the package with npm number:

npm install typed.js

Then I added this code to my component:

import Typed from 'typed.js';// not sure if it the right way 

and

ngOnInit() {


    var typed = new Typed(".element", {
        strings: ["This is a JavaScript library", "This is an ES6 module"],
        smartBackspace: true // Default value
    });
}

Then in my html file:

<div id="typed-strings">
    <p>Typed.js is an <strong>Awesome</strong> library.</p>
    <p>It <em>types</em> out sentences.</p>
</div>
<span id="typed"></span>

I get this error:

/home/haddad/projects/siteperso/src/app/slide-presentation/slide-presentation.component.ts (18,21): Cannot find name 'Typed'.

PS: I am open to any other proposal that does the same work as Typed.js and works with angular 2/4

Answer 1

Try changing importto import Typedfrom the module typed.jsas follows:

import { Typed } from 'typed.js';

Answer 2

You need to change your import to import * as Typed from 'typed.js';

Answer 3

"new Typed" , : :

import Typed from 'typed.js/src/typed.js';

Answer 4

typed.js

npm install typed.js --save

typed.js component.ts

import Typed from 'typed.js';

ngOnInit() component.ts

const options = {
     strings: ['Innovation.', 'Discovery.'],
     typeSpeed: 100,
     backSpeed: 100,
     showCursor: true,
     cursorChar: '|',
     loop: true
};

const typed = new Typed('.typed-element', options);

Create an HTML element to display typed.js output

<span class="typed-element">Fsfsfsfsfs</span>  

Please refer to https://github.com/vishalhulawale/angular/tree/master/integrations/typedJS