How To Use Data-Balloon In Angular

Today we are going to discuss how to use data-balloon in the Angular 2/4 application.

Today we are going to discuss how to use data-balloon in the angular 2/4 application. You must know 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 applications, 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 stylish.
   

   // 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.