We Keep Coding

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 click one button that exists two times with same name?

I try to click a button named .red and the problem is that there are two buttons with same name so Cypress does not know which of them to click with command cy.get('.red').click()
Originally I thought I have to access my class before trying to click the button.
How can I use below code to click "red trash icon"?
<div class="one wide column">
<div class="ui vertical right floated buttons">
<a class="ui basic button" role="button" href="/admin/assignments/edit/37">
<i aria-hidden="true" class="cog icon"></i>
</a>
<button class="ui basic button">
<i aria-hidden="true" class="red trash icon"></i>
</button>
</div>
</div>

The Cypress .get() command accepts complex selector arguments. So if you wanted to trigger a click on an element that has red, trash and icon classes, you could do the following:
cy.get('.red.trash.icon').click()

The red trash icon is the <i> element of inside the button, not the button itself.
You should perform click on the button itself:
cy.get('.button').click()
And if there is more than one button with the selector you have set you can give it a specific class or a specific id:
<button id="whatever">...
cy.get('#whatever').click()
Notice the use of # for ids instead of the dot . as a class selector.

The problem is you're using a too broad CSS selector.
You could either set a unique ID html attribute to your button and find it with cy.get('#your-id') or you could make a more specific CSS selector.
For example you could select the last button with .red class like this
cy.get('button.red:last-of-type')
or the first one line this
cy.get('button.red:first-of-type')
or the X element using something like button.red:nth-of-type() { ... }

As recommended in the Cypress documentation, you should add a custom data-cy attribute instead of using generic selectors

can't find gentelella-master fa-chevron-up icon

My question is about Gentelella Alela template
In this HTML page, there is an icon with class="fa fa-chevron-up" that displays an icon to close the panel (See HTML code at line: 294). When the panel is closed, another icon image should appear to re-open the panel again but I can't find it in the HTML page.

its a CSS you will not found it in your HTML
but you can reach the style at this file:
[url..]/assest/template/vendors/font-awesome/css/font-awesome.min.css

The "magic" is somewhere in the custom(.min).js
$(".collapse-link").on("click",function(){
...
t.toggleClass("fa-chevron-up fa-chevron-down")
there is a click handler that changes the class from fa-chevron-up to fa-chevron-down and back again every time you click.

Thank you guys for your help.
In fact, I did a big mistake! I changed the "fa fa-chevron-up" icon to a Bootstrap glyphicon (in HTML line 249)! In fact, if you change that icon name in HTML to a "Bootstrap glyphicon" the provided javascript will not display the "fa-chevron-down" icon!
Thank you.

Apply icon styling on md-button

I am using ng2-material library (built on top of angular2). The documentation and demos are clearly out dated and not updated as per the new angular 2 release. However, having made the necessary adjustments so far, I want a menu icon inside a button which is located on the toolbar of the page. I am able to load the material icon of menu, but still cannot give it a button-icon styling. This is how I am doing it:
<button md-button class="md-icon-button" aria-label="Settings">
<i class="mdclass-dark material-icons" md-icon >menu</i>
</button>
This is giving the menu icon the styling, that of a button, rather than that of an md-icon.. Can someone please let me know how to do that?

use md-icon-button directive instead of md-button.
and you can also use <md-icon> element instead of <i> to display material icons.
<button md-icon-button aria-label="Settings">
<md-icon>menu</md-icon>
</button>

Click button(s) copy to clipboard using jQuery

I've a situation where a user need to copy (click copy-to-clipboard icon) a link, however I've multiple dynamic links on a single page.
I've found the solution on the following post but I don't know a way to pass clicked icon ID to function as parameter and get the link copied to clipboard.
Click button copy to clipboard using jQuery
<i class="fa fa-link pull-right" id"copyToClipboard1"></i>
<i class="fa fa-link pull-right" id"copyToClipboard2"></i>
<i class="fa fa-link pull-right" id"copyToClipboard3"></i>
I went through the following post here in order to pass element ids to the function but no use as I just started crawling on jQuery path.
jQuery passing element ID into jquery statement?
Thanks in advance.
I don't have enough rep point therefore posting a new question [duplicate].