ng-click not working in font-awesome icon - javascript

I have added my demo to: this link When I click on thumbs up (comes from fontawesome) ng-click does not trigger and like count does not change. When I click to xyz, like count increases.
This is not working:
<i ng-click="LikeComment(comment)" class="far fa-thumbs-up"></i> {{comment.like}}
But this is working:
<i ng-click="LikeComment(comment)">xyz</i> {{comment.like}}

Try this:
<span ng-click="LikeComment(comment)"><i class="far fa-thumbs-up"></i></span>{{comment.like}}
OR, in case you are ok with a button
<button ng-click="LikeComment(comment)"><i class="far fa-thumbs-up"></i></button>{{comment.like}}

Font awesome turns it into a <svg> tag which doesn't seem to collaborate too well with the click handler. Try wrapping the <i> in a <div> like this
https://jsfiddle.net/wewekvkw/26/

Related

Change the color of a font awesome icon at a click event in Angular?

I am new to Angular and I am building a website with a wishlist for each item (star font awesome icon). My trouble is I am unable to understand how to use ngStyle to fill the icon color with yellow when a user wishes to add the item to their wishlist (when the click event happens).
This is a par of my HTML code with the click event:
<div id="wishlist" (click)="addToWishList(item)"><i class="fa fa-star-o fa-2x" aria-hidden="true"></i></div>
The addToWishList(item) function is defined in my component and is working as expected. I did try to provide the color in ngStyles attribute in <div> however, it sets the color beforehand rather than on the click event.
Any help will be greatly appreciated. Thanks!
Using ngStyle:
<i
class="fa fa-star-o fa-2x"
aria-hidden="true"
[ngStyle]="{ color: THE_CONDITION_YOU_HAVE ? YOUR_NEEDED_COLOR : '' }"
></i>
Using [style.color]:
<i
class="fa fa-star-o fa-2x"
aria-hidden="true"
[style.color]="THE_CONDITION_YOU_HAVE ? YOUR_NEEDED_COLOR : ''"
></i>
Note that nowadays, Angular team recommends you to use style bindings rather than NgStyle as per documented here:
The NgStyle directive can be used as an alternative to direct [style] bindings. However, using the preceding style binding syntax without NgStyle is preferred because due to improvements in style binding in Angular, NgStyle no longer provides significant value, and might eventually be removed in the future.
So if you have this item you are displaying as an object, and is predefined with an interface or a class somewhere, you can go ahead to your item interface/class and add a parameter (Say for example you call it selected)
Now in your template you have to make the following adjustment
<div id="wishlist" (click)="addToWishList(item)">
<i [ngStyle]="{ color: item.selected ? yourColor : '' }" class="fa fa-star-o fa-2x" aria-hidden="true"></i>
</div>
The addToWishList() function would go something like this
addToWishList(item: Item) {
this.item.selected = !this.item.selected;
//Your code here
}
this would actually enable you to toggle the status of the item, so a click would add it to whishlist, another click would remove it from whishlist (As a style), and extra proccessing is required to remove it actually from the whishlist array.

How to toggle one of many links with icons using JavaScript

I have several dynamically created links which rendered as buttons and the buttons texts are replaced with icons. I need to toggle one of the link button icons when clicked. The method that I am using is not working out. See code below: I do not want to use JQuery at this time unless it’s within a function.
<a class="button" onclick="command('removeFormat');" title="Remove Format"><i class="fas fa-eraser"></i></a>
<a class="button" onclick="command('fullScreen');" title="Full Screen"><i class="fas fa-expand"></i></a>
<a class="button" onclick="doToggleView();" title="Source"><i class="fa fa-code"></i></a>
<a class="button" onclick="submitForm();" title="Save"><i class="far fa-save"></i></a>
//JS
function command(cmd){
if(cmd == 'fullScreen'){
$(".fa-expand").toggleClass('fa-expand fa-compress');
}else{
$(".fa-compress").toggleClass('fa-compress fa-expand');
}
}
I also try using the following codes:
$("i").toggleClass('fa-compress fa-expand');
$("a .button").find("i").toggleClass('fa-expand fa-compress');
This is the fix to resolve the issue.
function command(cmd){
$('i.fas').toggleClass('fa-expand fa-compress');
}

Onclick for dynamically created elements using jquery

Onclick event is just not working for me. When mouse in over some div, I dynamically insert some icons using .html() function, and want to set onclick on that icons but i can't. I also tried setting click listener for the static enclosing div (jquery .on('click', ..) function) or for the whole page but it's no use, as if those icons just swallow the click event... Any ideas?
<div id="rating" class="pull-right rating-box clearfix">
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</div>
Here is html
I have tried a lot of way of doing, but here is the latest thing i tried
$(document).ready(function()
{
//some code
$('#rating').html(/* some combination of <i class="fa fa-star"></i>'s */);
$('#rating').on('click', 'i', function() { });
});
Use the .append() method instead:
$('#rating').empty();
$('#rating').append(/* some combination of <i class="fa fa-star"></i>'s */);
$('#rating').on('click', 'i', function() { });
jsFiddle
See jquery .html() vs .append() for more information.

How to change jquery button icon

I have a button right this:
<button type="submit" class="btn blue pull-right" id="RequestNewPwd">
Submit <i class="m-icon-swapright m-icon-white"></i>
</button>
With a text and an icon. I'm trying to change the text and the icon like via javascript like this:
$("#RequestNewPwd").button({
label: "Sent",
icons: {
primary: "m-icon-swapleft m-icon-white",
}
})
But it does not work. I also tried:
$("#RequestNewPwd").text('Submit <i class="m-icon-swapright m-icon-white"></i>');
And it prints the html code like text. This works:
$("#RequestNewPwd").text('Submit');
But I need to show also the icon. Could someone help me? Thank you!
As you are appending html,you need to use .html() instead of .text():
$("#RequestNewPwd").html('Submit <i class="m-icon-swapright m-icon-white"></i>');
You have to use .html() to render the string into html elements.
Try,
$("#RequestNewPwd").html('Submit <i class="m-icon-swapright m-icon-white"></i>');

How to specify classes using Jquery

I have created a simple toggle show and hide.
I have a problem though when duplicating the classes.
My toggle works but when I duplicate the containers and press the trigger it shows all containers not just the one.
I have tried to adjust my code using the (this).find function but its not working. can someone show me where i am going wrong?
<!--SHARE-->
<i class="fa fa-share"></i>Share
<div class="show-share-box">
<div class="share-this-wrap">
<a href="#" data-toggle="tooltip" class="share-popup share-btn" title="Share on Facebook">
<i class="fa fa-facebook"></i>
<div class="meta-share-wrap">
<span class="shot-social-count">4</span>
</div>
</a>
<a href="#" data-toggle="tooltip" class="share-popup share-btn" title="Share on Twitter">
<i class="fa fa-twitter"></i>
<div class="meta-share-wrap">
<span class="shot-social-count">6</span>
</div>
</a>
</div>
</div><!--end share box-->
My code that works.
$(".share-trigger").click(function(e){
e.preventDefault();
$(".show-share-box").slideToggle('slow');
})
My code that is not working - here i have tried to add the (this function)
$(".share-trigger").click(function(e){
e.preventDefault();
$(this).find('.show-share-box').slideToggle('slow');
})
Thanks a bunch!!
Next will select all .show-share-box so using the first in the next set should do the trick.
$(".share-trigger").click(function(e){
e.preventDefault();
//$(".show-share-box").slideToggle('slow');
$(this).next(".show-share-box").first().slideToggle('slow');
})
the problem is you are selecting <a> element as $(this) and finding inside ('.show-share-box') which is sitting outside your <a>
you can use .next() or directly use class to toggle
Jsfiddle: http://jsfiddle.net/FtgN4/2/
$(".share-trigger").click(function (e) {
e.preventDefault();
$('.show-share-box').slideToggle("slow", function () {
// animation complete
});
})
Should be:
$(this).next('.show-share-box').slideToggle('slow');
$(this).find('.show-share-box').slideToggle('slow');
$(this) --> refers to the current element which is .share-trigger in your case
$(this).find('.show-share-box') means find the .show-share-box inside .share-trigger
your code not working as there is no element .show-share-box inside .share-trigger
Updated after OP updated question.
.next()
$(this).next('.show-share-box').slideToggle('slow');

Categories