Динамическое добавление класса к <span>, равному значению поля / свойства

Question

Я все еще новичок в Angular, так что терпите меня.

У меня есть TagComponent, который содержит Color-enum и имеет один такой цвет, как свойство / поле. Я хочу, чтобы Angular автоматически добавил этот цвет как класс, чтобы семантический пользовательский интерфейс мог форматировать этот цвет.

Как я могу это сделать? Я пробовал ng-class, но он не принимает ng-class = "{{tag? .Color}}".

// tag.model.ts

export class Tag {
    private _color: Tag.Color;
    private _name: string;

    constructor(color: Tag.Color, name: string){
        // checking name.length in the form!
        this._name = name;
        this._color = color;
    }

    get color() : Tag.Color {
        return this._color;
    }

    get name() : string {
        return this._name;
    }

}
export module Tag{
    export enum Color{
        Red,
        Orange,
        Yellow,
        Olive,
        Green,
        Teal,
        Blue,
        Violet,
        Purple,
        Pink,
        Brown,
        Grey
    }
}

// tag.component.html

<p class="ui pointing basic label">{{marker?.name}}</p>

Answer 1

Вы могли бы что-то вроде этого:

<p class="ui pointing basic label" [style.color]="marker.color">{{marker?.name}}</p>

Дополнительные примеры смотрите здесь: https://alligator.io/angular/style-binding-ngstyle-angular/

P.S. ngClass используется для условного применения классов CSS. Например, [ngClass]="{ 'colorClass': marker.name === 'bob'}" означает, что если условие marker.name === 'bob' равно true, тогда применяется класс CSS colorClass.

---

Основываясь на комментарии ниже, это более актуальное решение.

<p [class]="'ui pointing basic label ' + marker.color">{{marker?.name}}</p>