What's the problem
There was a missing prop to set the position of fa-layers-counter.
The position options are: fa-layers-bottom-left, fa-layers-bottom-right, fa-layers-top-left and fa-layers-top-right.
It was possible to have access to these positions through [classes]="['fa-layers-bottom-left']", but input should be a better solution and more comfortable to the user.
Why we should fix it
It should be fixed because it is a new and necessary feature to the user, who is going to be able now to set a position in its fa-layers-counter component in the easiest way.
How I fixed it
First of all, I created an @Input() position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'; in the FaLayersCounterComponent.
This input should be like this in fa-layers-counter component, e.g: [position]="'bottom-left'"
The curious thing about this input is it needs to be in the span tag inside fa-layers-counter component. Otherwise, the position input wasn't working correctly. The span tag isn't visible in the HTML file, it is an inner HTML child in the component.
So, the build params function looks like this:
if (this.classes != null) {
classes.push(...this.classes);
}
if (this.position != null) {
classes.push(`fa-layers-${this.position}`);
}
this.classes is an array inside the params variable, it is needed to have all the classes that we user wants and push the new ones for the position.
Next, for a visual demonstration, I added native HTML select so the user can be able to choose and select one position and see how it works.
Finally, I did my unit test, I ran yarn lint and yarn test and everything was working fine.
Here is a video to show the visual demonstration and functionality:
Solves #309
What's the problem There was a missing prop to set the position of
fa-layers-counter. The position options are:fa-layers-bottom-left,fa-layers-bottom-right,fa-layers-top-leftandfa-layers-top-right. It was possible to have access to these positions through[classes]="['fa-layers-bottom-left']", but input should be a better solution and more comfortable to the user.Why we should fix it It should be fixed because it is a new and necessary feature to the user, who is going to be able now to set a position in its
fa-layers-countercomponent in the easiest way.How I fixed it First of all, I created an
@Input() position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';in the FaLayersCounterComponent. This input should be like this in fa-layers-counter component, e.g:[position]="'bottom-left'"The curious thing about this input is it needs to be in thespantag insidefa-layers-countercomponent. Otherwise, the position input wasn't working correctly. Thespantag isn't visible in the HTML file, it is an inner HTML child in the component. So, the build params function looks like this:this.classesis an array inside theparamsvariable, it is needed to have all the classes that we user wants and push the new ones for the position. Next, for a visual demonstration, I added native HTMLselectso the user can be able to choose and select one position and see how it works. Finally, I did my unit test, I ranyarn lintandyarn testand everything was working fine.Here is a video to show the visual demonstration and functionality:
https://user-images.githubusercontent.com/78670199/147312875-9cead2cb-34a6-46c0-abe7-9b9b75b8ba18.mov
Thank you, feel free to tell me anything.