Option to change the color of fab button easily

[GustavoCostaW]

Thx @leonardovff for the issue, what you think about @Input [color] property?

in ngc-float-button and ngc-float-item-button components?

[leonardovff]

@GustavoCostaW I think that it is great. But I have a deliberation. We can think in a solution for everythings about style. For exemple: In my webapp, the float button is small in comparison with others components and I need to personalize the button with a largest dimension.

[GustavoCostaW]

@leonardovff you can customize with /deep/ selector to provide a dynamic stylesheet, eg:

 ngc-float-button /deep/ .content {
  margin-right: 55px; /* the space between the content and the button */
}

ngc-float-button /deep/ .fab-toggle,
ngc-float-button /deep/ .fab-item,
ngc-float-button /deep/ .content {
  transform: scale(1.1); /* 1.2, 1.3... */
} 

I think that is the best way because each developer needs a specific customization and adding many @Input properties is unfeasible. With css the developer can customize for your necessitation, what you think about it?

[leonardovff]

@GustavoCostaW the problem is: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep The use of /deep/, >>>, and ::ng-deep is deprecated

[GustavoCostaW]

@leonardovff Interesting, I will investigate how I can make this soon if you have any idea let me know.

[duck-nukem]

@leonardovff @GustavoCostaW what about an Input() class?: string so you can pass a custom CSS class name, and use that to set up the styling - and it will get added to the element directly, no need to use ::ng-deep?

[Marshal27]

I accomplished this with the following changes to the compiled code in ngc-float-button.component.js

1. delete background: #dd0031; from fab-toggle class.
2. add [style.background]=\"color\" after <a class=\"fab-toggle\" in template.
3. on line# 161 I added 'color': [{ type: Input },],

now just use <ngc-float-button color="whatever color you like here">

[GustavoCostaW]

@leonardovff @kreatemore @xxNoxiouSxx check the 1.2.0 version.