Tuesday, 8 August 2017

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 !!!!

9 comments:

Unknown said...
This comment has been removed by a blog administrator.
Safal Trading said...

fantastic post regarding "How to use data-balloon in angular 2?"


Mcx Gold Tips Free Trial

Dhana Chandra said...
This comment has been removed by the author.
Dhana Chandra said...

This data-balloon element useful for me, it's helping for my projects, AngularJs is Most Demand JavaScript Framework, so developer Join Best AngularJs Training Institute and do step by step projects to become an Expert.

TR Codex said...

Bleach Vs Naruto, one of the most famous fighting games in the world, has a new update to you! In this version of Bleach Vs Naruto 3.0 which is the same as the other updates, you will fight against maintaining SonnatTAT Bleach Vs In Naruto 3.0, we hope you have a good time with good fun.

amira reda said...
This comment has been removed by a blog administrator.
Kanchan Mishra said...

awesome and excellent post about "How to use data-balloon in angular 2?"

NIOS Admission 2018
NIOS on Demand Exam

for IT the said...

great

Angular 5 Resources

| Angular 5 Training in Chennai.

mary Brown said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me..
I am a regular follower of your blog. Really very informative post you shared here.
Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai .
or Javascript Training in Chennai.
Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai