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

13 comments:

Unknown said...
This comment has been removed by a blog administrator.
Unknown said...
This comment has been removed by a blog administrator.
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.

TrCodex said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Unknown said...
This comment has been removed by a blog administrator.
for ict 99 said...

great

Angular 5 Resources

| Angular 5 Training in Chennai.

mary Brown said...
This comment has been removed by a blog administrator.
Kanye Co Jamila said...
This comment has been removed by a blog administrator.
Lovable vicky said...




Nice infromation
Selenium Training In Chennai
Selenium course in chennai
Selenium Training
Selenium Training institute In Chennai
Best Selenium Training in chennai
Selenium Training In Chennai

Lovable vicky said...





Rpa Training in Chennai
Rpa Course in Chennai
Rpa training institute in Chennai
Best Rpa Course in Chennai
uipath Training in Chennai
Blue prism training in Chennai

Data Science Training In Chennai
Data Science Course In Chennai
Data Science Training institute In Chennai
Best Data Science Training In Chennai

Lovable vicky said...


Python Training In Chennai
Python course In Chennai
Protractor Training in Chennai
jmeter training in chennai
Loadrunner training in chennai