Как лучше всего добавить класс к компоненту на основе свойства ввода?

Question

Я пытаюсь создать пользовательский компонент кнопки и на основе свойства, мне нужно добавить определенный класс c, например:

<mybutton primary>Primary button</mybutton>

Необходимо добавить к этому компоненту этот класс:

.primary {
   background-color: green;
}

Я ищу любую идею или руководство, как я могу это сделать

Answer 1

Добавьте входное свойство className в mybutton и передайте значение.

@Input() className: string;

И привяжите значение в своем шаблоне mybutton

<<code>div [class] ="className" >Some text</div>

Answer 2

1. Если вам нужно установить класс в элементе хоста вашего компонента

Добавьте ниже к вашему mybutton компоненту:

import { Component, OnInit, Input, HostBinding } from '@angular/core';

...

@Input()
@HostBinding('class')
color = "primary"

Это примет значение через color input и установите класс ведущего элемента компонента в качестве переданного значения. (значение по умолчанию первичное)

Когда вам нужно установить класс для элемента внутри вашего компонента

@Input()
color = 'primary';

<button [ngClass]="color">
   <ng-content></ng-content>
</button>

Это передаст имя класса через вход color и установит класс элемента button через ngClass.

Примечание :

Также, если вы хотите отобразить текст между селекторами компонентов (например, Primary button в вашем вопросе), вы необходимо добавить:

<ng-content></ng-content>

в свой mybutton компонент html.

Демо :

https://stackblitz.com/edit/custom-attributes