Is there a way to directly call an element in Angular when using an enum to organize component styles? Instead of writing multiple ng class expressions or dynamically passing them to the element call.
button-types.ts
export enum ButtonTypes {
Primary = 'button-primary',
Secondary = 'button-secondary',
Terciary = 'button-terciary',
IconButton = 'button-icon',
}
bo-button.component.html
<button [ngClass]="type">
<i [ngClass]="icon"></i>
{{ label }}
</button>
bo-button.componrny
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ButtonTypes } from './shared/button-types';
@Component({
selector: 'lib-bo-button',
templateUrl: './bo-button.component.html',
styleUrls: ['./bo-button.component.scss']
})
export class ButtonComponent implements OnInit {
@Input() public type: ButtonTypes;
@Input() public icon: string;
@Input() public label: string;
@Input() public arrow: string;
constructor() {
}
ngOnInit() {
}
}