меню

ngStyle динамические стили

Сформируем в конструкторе компонента варианты значений, в зависимости от которых назначим стиль backgroundColor у элемента.

\app\server\server.component.ts:

	
constructor() {
    this.serverStatus = Math.random() > 0.5 ? 'online' : 'offline';
}
	

constructor()- метод конструктор в TypeScript

\app\server\server.component.html:

	
<p [ngStyle]="{backgroundColor: getColor()}">
  {{ 'Server' }} id is {{ getServerID() }} and status is {{ serverStatus }}
</p>
	

Название директивы - ngStyle, квадратные скобки ипользуются для связывания.

\app\server\server.component.ts:

	
getColor() {
    return this.serverStatus === 'online' ? 'green' : 'red';
}
	

таким образом, директива ngStyle связывается с функцией, которая возвращает цвет для backgroundColor

Вместо {backgroundColor: getColor()} можно написать {'background-color': getColor()}. Это js object. Ключ - название свойства. Вариант с КэмелКейс ангуляровский синтаксис, но в кавычках можно вписать и традиционный css вариант написания.


Возможно, вам будет интересно

Навигация. Передача данных событиями

Навигация в Angular на основе событий. Передача данных между вложенными компонентами с помощью событий в Angular

Route передача статичных данных

Как передать статичные данные в компонент с помощью настроек роута.

Route. Защита роутера

Использование интерфейсов CanActivate и CanActivateChild для принятия решения об активации роутера

TypeScript, Bootstrap, Main.ts

TypeScript - это суперсет, расширяющий возможности JavaScript наличием типов, классов, интерфейсов и т.д. Браузер не умеет выполнять TypeScript файлы, по этому их нужно компилировать в JS.

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту