CODEWITHSUNDEEP
javascriptangulartypescriptangularjs-directive
brinch
brinch

Reputation: 2614

How to embed javascript component in Angular 2 app?

In my Angular 2 application, I would like to embed this "tags input component" which is written in plain Javacsript:

https://github.com/yairEO/tagify

What would be the correct way to include/embed it in my typescript?

Here is a snippet of my files, where I'd like for the component to appear:

enter image description here

I'm at a beginner's level with Angular 2 and Typescript, but I hope my question makes sense.

Upvotes: 1

Views: 2569

Answers (1)

anshuVersatile
anshuVersatile

Reputation: 2068

Add these in your index.html file

<script src="jQuery.tagify.js"></script>
<link rel="stylesheet" type="text/css" href="tagify.css">

add following in your component where you want to use tagify

declare var Tagify:any;

for example

import { Component } from '@angular/core';
declare var Tagify:any;
@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

then add tagify logic in ngAfterViewInit at your component for example

export class AppComponent implements AfterViewInit  { 
  name = 'Angular'; 
  ngAfterViewInit() {
    var input = document.querySelector('input[name=tags]'),
    tagify = new Tagify( input );
  }

}

Upvotes: 2

Related Questions