Within my Angular application, I have a reusable button component in the login.component.html and login.component.ts files. This button is linked to a function called myFunction, with the button's name being passed as a label:
<app-my-btn (onClick)="myFunction($event)" [label]="label"></app-my-btn>
The logic for handling the button click event is defined within the my-btn.component.ts file using @Input() and @Output(), which triggers this.onClick.emit(event);. The styling for the button is maintained in the my-btn.component.scss.
I am currently exploring ways to pass additional style elements such as color and icon from the login.component.ts file, where specific functions and button names are set.
Ultimately, my goal is to generate multiple buttons with distinct functions, colors, icons, and names while retaining the consistent design provided by the single my-btn.component.scss component.
If anyone has any insights or suggestions on how to achieve this, your guidance would be greatly appreciated.