Search code examples
cssangulartypescriptangular-componentsreusability

Attach color style and design element to Angular reusable component

I have reusable component button in Angular application on login.component.html with login.component.ts attaching button name with label and function event:

<app-my-btn (onClick)="myFunction($event)" [label]="label"></app-my-btn>

with @Input() and @Output() this.onClick.emit(event); in my-btn.component.ts with own style in my-btn.component.scss.

I'm trying to figure out, how to pass style elements like color and icon from login.component.ts where I'm have specific function and button name.

In result I'm trying to get two buttons with different function, color, icons and names, but the same design from single component my-btn.component.scss

Any guide or advice would be helpful

Solution

  • Well, the best way is to define certain SCSS classes in your my-btn-component.scss and then pass the class name to the component.

    TS

    // when an input arrives, the class gets replaced and the HTML immediately updates
@Input() currentClass: string = "default-style";

    HTML

    <app-my-btn (onClick)="myFunction($event)" [label]="label" [class]="currentClass"></app-my-btn>