How to use data-balloon in angular 2?

Today we are going to discuss that how to use data-balloon in the angular 2/4 application. You must know that why we are using data-balloon in our application and what kind of features it is going to provide to us. For this click on this link and check out its features. 

It is easy to use in simple HTML application, but we have a problem to use this in the angular 2/4 application. In the angular 2/4 we can't use this as it is as shown in the above article. For this, we need to create a directive and use that under our application. I am going to explain, how to create directive and how to use this in the application.

Step by step information:

1. Create a new TS file or use an existing file to create the directive and copy the below code. In this code, you will find that we are going to set only two properties as dynamic, following the same method you can add other properties and make it more styling.

// This directive is to use to add the hover message using data-balloon

@Directive({

selector: '[dataBalloon]'

})

export class DataBalloonDirective implements OnChanges {

@Input('databalloonProperty') tooltipText: any;

@Input('databalloonpos') position: any;

constructor(private el: ElementRef) {

}

ngOnChanges(changes) {

if (this.tooltipText) {

$(this.el.nativeElement).attr({

"data-balloon": this.tooltipText,

"data-balloon-pos": this.position,

"data-balloon-length":"fit"

});

}

}

}

2. Add that directive in your app-common module or on your page where you want to use this. 

3.  <span class="text-capitalize"  

dataBalloon databalloonProperty="{{username}}" databalloonpos="up"> 

4.Run the application and check the results. 

Enjoy it !!!!