Для использования приведенных материалов и разработки виджетов необходимо выполнение следующих условий:
Под виджетом понимается специальный angular-компонент, предназначенный для отображения параметров платформы.
Платформа берет на себя предоставление виджету данных по параметрам, разработчику необходимо лишь представление для отображения параметров.
Для установки проекта необходимо выполнить следующие шаги:
Для создания нового виджета widget-example необходимо в каталоге web-widget-container\src\app\widgets создать папку widget-example.
В созданную папку необходимо добавить следующие файлы: widget.example.ts - код виджета; widget.example.html - шаблон виджета; widget.example.scss - стили виджета.
Для того, чтобы виджет отображался в среде разработки необходимо добавить импорт виджета в файле src/app/widget.include.ts
import WidgetExample from './widgets/widget-example/widget.example';
export const widgetLibrary = new WidgetLibrary([
{name: 'WidgetExample', package: WidgetExample},
Написать содержание виджета в соответствии с … по написанию виджета.
Выполнить команду „„npm run start““. Загрузить в браузере http://localhost:4210/?widget=WidgetExample, где вы можете проверить отображение виджета, исправить возможные ошибки. В среде разработки необходимо <настроить внешний вид> отображения нужных параметров.
Разработанный виджет необходимо собрать и разместить в магазин виджетов. Для этого необходимо выполнить следующие шаги.
Сборка выполняется командой „„sh build.sh example““. После ее успешного выполнения в папке dist будет размещен код виджета, а в папке build zip архив, готовый для загрузки в магазин.
Перейдите на страницу магазина и создайте виджет, для чего на странице списка виджетов нажмите кнопку Add widget. В диалоге добавления виджета заполните поля названия и описания виджета, так чтобы было понятно его назначение и содержание, и нажмите кнопку Add widget в диалоговом окне.
Если обновляется версия уже существующего виджета, то шаг 2 следует пропустить.
В открывшемся диалоговом окне укажите файл, полученный на первом шаге инструкции данного раздела и нажмите кнопку Upload.
После загрузки архива вы перейдете на страницу с примером работы виджета. В этот момент релиз еще не является опубликованным и недоступен у других пользователей. Для публикации виджета необходимо указать какие изменения сделаны и нажать на кнопку Public.
Теперь виджет доступен для установки в приложении.
Для проверки работы виджета в приложении нужно выполнить следующие действия.
Войдите в личный кабинет платформы INSPARK и перейдите в раздел WIDGET STORE/ All widgets. В списке виджетов найдите размещенный ввиджет и нажмите кнопку Get widget (Update to N, если было обновление ранее опубликованного виджета). После этого виджет можно размещать на панель виджетов (дашборд).
Перейдите в раздел Dashboard. На странице отобразится список доступных дашбордов. Для проверки работы виджета его необходимо разместить на новом или существующем дашборде. Чтобы создать дашборд, необходимо в правом верхнем углу страницы нажать кнопку + Dashboard. На странице создания дашборда введите название дашборда и рубрику каталога, к которому он будет привязан, после чего нажмите кнопку Add dashboard.
Выберите созданный или уже имеющийся дашборд и на открывшейся странице нажмите кнопку + Widget. На выбора виджета отыщите нужный и на панели справа увидите его изображение.
Нажмите кнопку Next и на следующей странице настройте параметры отображения виджета на дашборде: укажите заголовок виджета; флажок «FLOATING HEADER» указывает, что заголовок будет скрыт, если на него не будет наведен указатель; а также отображаемые в виджете параметры.
При указании параметра сначала выбирается объект из подрубрик рубрики дашборда, а затем - параметр для этого объекта. Также для параметра можно указать заголовок.
После выполнения перечисленных действий проверьте работу созданного виджета в приложении платформы INSPARK.
Рекомендации по разметке компонента
При размещении элементов html виджета рекомендуется применять классы разметки из _mixins.scss, o_grid, c_grid, c_table и другие.
Правила локализации виджета
Для того чтобы добавить поддержку локали в виджет, необходимо обозначить текст, который будет переводиться.
{{ 'text' | translate }}import {_} from '@inspark/widget-common/interface'; _('text')В экземпляр WidgetPackage необходимо добавить строку, включающую файлы переводоа виджетов ` locales: [{code: „en“, file: require(„./i18n/en.json“)}, {code: „ru“, file: require(„./i18n/ru.json“)}] ’
Далее, в коде виджета в классе компонента описать ресурс:
media = {
img: require('./media/energy.jpg')
};
Затем описанный ресурс можно использовать в шаблоне:
<img width="100px" height="100px" [src]="media.img" alt="Электроэнергия">
При написания виджетов важно определить природу поведения выводимых данных и их представление. Для этого используются две основные структуры данных enum PARAM_TYPE (тип параметра), ITEM_TYPE (тип элемента):
В интерфейсах тип параметра представлен в виде „„enum PARAM_TYPE““
export enum PARAM_TYPE {
'signal' = 1, // сигнальный параметр (например 0/1, true/false)
'value' = 2, // мгновенное значение параметра
'increment' = 3, // параметр, значение которого идет нарастающим итогом
// Типы, необрабатываемые сервисом
'custom_string' = 11, // Любой текст
'custom_archer' = 12, // Тип https://archer.graphics/ Дает возможность загрузить SVG и JSON
'custom_external' = 13, // Загрузка параметров через внешний файл
'custom_file' = 14, // Загрузка любых файлов
'custom_json' = 15, // Текст, который будет распарсен как JSON
}
| Тип | Применение | Описание |
|---|---|---|
| signal | Датчики включения, сигнализация | Сигнальный тип параметра (включен, выключен) принимает значение 0 или 1 |
| value | Датчики значений | Мгновенное значение параметра (температура, влажность, вольтаж) |
| increment | Любые счетчики | Параметр, значение которого идет нарастающим итогом (потребление воды, энергии, счетчик посетителей) |
Для описания типа элемента следует использовать „„enum ITEM_TYPE““.
export enum ITEM_TYPE {
'single' = 1, // Одно значение
'series' = 2, // Ряд данных (например график)
'events' = 3, // Лента событий (структура с описанием события)
'sysinfo' = 4, // Системная информация о состоянии контроллеров
'interval' = 5, // Значение на заданном интервале (min, max, avg и т.д.)
'table' = 6 // Таблица значений параметров
}
TEM_TYPE.
В зависимости от типа элемента в виджет, в переменную values, будет передан разный набор данных, которые описываются как интерфейсы (см. таблицу).
| Тип элемента | Описание | Интерфейс |
|---|---|---|
| ITEM_TYPE.single | Единичные значения параметров | ItemSingle |
| ITEM_TYPE.series | Ряды данных | ItemSeries |
| ITEM_TYPE.events | Лента событий | EventValues |
| ITEM_TYPE.sysinfo | Системная информация | SystemInfo |
| ITEM_TYPE.interval | Значения параметров на заданном интервале | ItemInterval |
| ITEM_TYPE.table | Таблица значений параметров | ItemTable |
| ITEM_TYPE.custom | Поле не требующее обработки сервера | ItemCustom |
Как мы видим в названиях есть различия между EventValues и другими типами. Это обусловлено тем, что events отличается по формату и способу получения данных от сервиса.
Интерфейсы ItemSingle, ItemSeries, ItemInterval, ItemCustom и ItemTable наследуются от одного интерфейса IWidgetParam и содержат в себе следующие поля:
| Поле | Тип | Задается разработчиком | Задается в конфигураторе | Описание |
|---|---|---|---|---|
| id | number | - | - | Идентификатор параметра в сервисе |
| device | IWidgetDeviceParam | - | + | Информация об объекте, контроллере, параметре, зоне и состоянии параметра |
| widgetId | number | - | + | Идентификатор виджета |
| refName | string | + | - | Уникальный идентификатор параметра в пределах виджета |
| itemType | ITEM_TYPE | + | - | Тип элемента |
| title | string | + | - | Заголовок(назначение элемента) |
| config | ParamConfig | - | + | Настройки параметра |
| viewConfig | IWidgetParamConfig | - | + | Настройки отображения |
| borders | Border[] | - | - | Границы значений |
| dashboardLink | - | + | Ссылка на дашборд | |
| isEditing | boolean | - | - | Поле редактируется |
| canEditable | boolean | - | - | Значение можно изменить вручную |
| icons | { falsevalue: string; none: string; success: string; warning: string; error: string; }; | - | - | Сет иконок для параметра |
Кроме общих полей, представленных выше, каждый интерфейс, в зависимости от типа элемента, содержит свои собственные данные. Ниже представлено их описание.
Единичные значения параметров
export interface ItemSingle extends IWidgetParam {
value: any;
data: SingleValue;
}
В поле data содержатся следующие данные:
Описание типа SingleValue
| Поле | Тип | Описание |
|---|---|---|
| locked | boolean | |
| manually | boolean | |
| date | number | Время последнего изменения значения |
| value | number | Значение параметра |
| state | ParamState | Состояние значения |
Для быстро доступа к значению параметра в виджете в поле value копируется значение из data.value
Значения параметров на заданном интервале
Сам интерфейс выглядит так
export interface ItemInterval extends IWidgetParam {
value: any;
data: IntervalValue;
}
Описание типа IntervalValue
| Поле | Тип | Описание |
|---|---|---|
| percent | number | Значение в процентах для relative и increment |
| min | number | Минимальное значение на интервале absolute |
| max | number | Максимальное значение на интервале absolute |
| date | number | Время последнего изменения значения |
| value | number | Значение параметра |
| switchCount | number | Количество переключений за выбранный период |
| state | ParamState | Состояние значения |
| beginInterval | number | Дата начала интервала |
| endInterval | number | Дата окончания интервала |
Для интервального типа также существуют различные типы значений. Формат данных никак не влияет, однако само значение считается по-разному.
| Тип | Тип параметра | Описание |
|---|---|---|
| absolute | value, increment | Вернет среднее значение на интервале |
| increment | increment | Вернет сумму всех значений на интервале |
| signal | signal | Вернет количество переключений |
Ряды данных
export interface ItemSeries extends IWidgetParam {
value: any;
data: SeriesValue;
}
Описание типа SeriesValue
В зависимости от типа графика тип SeriesValue может быть SeriesCandleValue или SeriesLineValue.
export type SeriesValue = Array<SeriesCandleValue | SeriesLineValue>;
Формат данных:
export interface SeriesCandleValue {
close: number;
high: number;
low: number;
open: number;
timestmp: number;
}
// Все остальные графики
export interface SeriesLineValue {
value: number;
timestmp: number;
}
Лента событий
Лента событий это особый тип данных, так как в отличии от остальных типов не использует конкретные параметры на конкретных объектах. Значение содержит только два поля config и data
| Поле | Тип | Описание |
|---|---|---|
| config | ParamConfigEvents | Настройки, заданные при конфигурировании виджета |
| data | rowList: Array < EventValue > | Массив данных |
Сам интерфейс выглядит так
export interface EventValues {
data: {
rowList: Array<EventValue>;
};
config: ParamConfigEvents;
}
Ниже в таблице описаны значения для EventValue
| Поле | Тип | Описание |
|---|---|---|
| shortname | string | Тип возвращаемых событий |
| serialnumber | string | Список и относительное расположение выдаваемых атрибутов |
| eventid | number | Список и относительное расположение заголовков выдаваемых атрибутов |
| name | string | Максимальное количество выдаваемых строк в ленте |
| timestmp | number | Идентификаторы объектов |
| msg | string | Идентификаторы объектов |
export interface EventValue {
shortname: string;
serialnumber: string;
eventid: number;
name: string;
timestmp: number;
msg: string;
}
Настройки ленты событий ParamConfigEvents
| Поле | Тип | Описание |
|---|---|---|
| lineType | number | Тип возвращаемых событий |
| attrList | string[] | Список и относительное расположение выдаваемых атрибутов |
| titleList | string[] | Список и относительное расположение заголовков выдаваемых атрибутов |
| size | number | Максимальное количество выдаваемых строк в ленте |
| objectIds | string[] | Идентификаторы объектов |
| eventIds | string[] | Идентификаторы событий |
| commands | string[] | Идентификаторы команд |
Таблица значений параметров
export interface ItemTable extends IWidgetParam {
values: TableValues;
}
export type TableValues = Array<Array<ItemSingle>>;
Важная часть данных, необходимых для рендеринга табличных данных находится во „„viewConfig““, который является полем интерфейса IWidgetParam. „„viewConfig““ является типом IWidgetParamConfig
export interface IWidgetParamConfig {
formatValue?: string;
view?: string;
rows?: number;
cols?: number;
rowsName?: string[];
colsName?: string[];
visibleRow?: boolean;
visibleCol?: boolean;
}
Описание полей
| Поле | Тип | Описание |
|---|---|---|
| formatValue | string | Форматирование строки по правилам функции sprintf + возможно указать hh:mm:ss для отображения времени |
| view | number | Выбранный тип отображения поля (массив вариантов указывается при описании WidgetParam) |
| rows | number | Количество строк в таблице |
| cols | number | Количество столбцов в таблице |
| rowsName | string[] | Заголовки строк в таблице |
| colsName | string[] | Заголовки столбцов в таблице |
| visibleRow | boolean | Отображаются ли заголовки строк в таблице |
| visibleCol | boolean | Отображаются ли заголовки столбцов в таблице |
Произвольный тип параметра
export interface ItemCustom extends IWidgetParam {
value: string;
}
Тип параметра, обозначающий, что введенные данные в поле конфигуратора, будут сохранены в настройках параметра и доступны в виджете как текст.
При редактировании параметра пользователю отображается текстовое поле textarea.
Пример:
Описание параметра в виджете:
const PARAMS: WidgetParams = {
text: {
title: 'Текст',
item_type: ITEM_TYPE.custom,
param_type: PARAM_TYPE.custom_string,
},
};
В конфигураторе задаем значение: Hello world!
В виджете можно получить значение через: values.text.value
Тип параметра, обозначающий, что введенные данные будут распарсены функцией JSON.parse() и будут доступны в виджете как JSON объект.
При редактировании параметра пользователю отображается текстовое поле textarea, а ниже него отображается тот JSON, который будет доступен в виджете. В случае задания неправильного JSON, параметр будет равен пустому объекту {}
Пример:
Описание параметра в виджете:
const PARAMS: WidgetParams = {
status: {
title: 'Статусы',
item_type: ITEM_TYPE.custom,
param_type: PARAM_TYPE.custom_json,
},
};
В конфигураторе задаем значение: {«foo»:«bar»}
В виджете можно получить значение через: values.status.value.foo
Тип предназначен для работы с Archer файлами.
При экспортировании файлов из редактора Archer файлов создается два файла. SVG - со схемой и JSON с описанием параметров.
В конфигураторе виджетов для управления типом параметра custom_archer будет доступна загрузка двух файлов SVG и JSON. JSON файл после загрузки будет преобразован в список параметров, которые можно будет указать стандартным способом, как если бы это были PARAM_TYPE.value
В виджете данные JSON файла будут доступны в параметры values.archer. А SVG и JSON файл, в values.archer.files (values.archer.files.svg и values.archer.files.json соответственно)
Данные тип параметра предназначен для расширения списка параметров, с помощью загружаемого JSON файла. Формат JSON файла должен соответствовать типу входных параметров в виджете (WidgetParams). Это значит, что описание типов в файле JSON должно быть точно такое же, как и в описании параметров виджета. Единственное исключение, составляет описание типов параметра, которые должны быть описаны как строка. Пример показан ниже.
Данные код:
const PARAMS: WidgetParams = {
battery: {
title: _('Battery'),
item_type: ITEM_TYPE.single,
param_type: PARAM_TYPE.value,
items: {
charge: {title: _('Charge')},
temperature: {title: _('Temperature')}
}
},
};
Должен быть преобразован в:
{
"battery": {
"title": "Battery",
"item_type": "single",
"param_type": "value",
"items": {
"charge": {"title": "Charge"},
"temperature": {"title": "Temperature"}
}
}
}
При таком описании параметра
const PARAMS: WidgetParams = {
system: {
title: 'Система',
item_type: ITEM_TYPE.custom,
param_type: PARAM_TYPE.custom_external,
},
};
и в случае загрузке в него JSON файла, указанного выше
В виджете данные будут доступны по цепочке values.system.battery.charge.value и values.system.battery.temperature.value
При использовании этого типа вы можете загрузить любой файл(практически, есть ограничение сервиса) и впоследствии его использовать в виджете
К примеру, при таком описании
const PARAMS: WidgetParams = {
image: {
title: 'Изображение',
item_type: ITEM_TYPE.custom,
param_type: PARAM_TYPE.custom_file,
},
};
Файл будет доступен в коде виджета по цепочке values.image.files.file
Очень важно понимать как правильно описываются входные параметры виджета, потому что именно на основе этих данных виджет конфигурируется и получает данные из сервиса. Основной структурой, для описания входных параметров является WidgetParams.
Общий интерфейс параметра WidgetParams:
export interface WidgetParam {
title: string; // Название, которое будет отображено при конфигурировании виджета. Можно локализовать при использовании внутри _('')
item_type: ITEM_TYPE; // Тип данных (Описаны выше)
param_type?: PARAM_TYPE; // Тип параметра (Описаны выше)
items?: WidgetParamsChildren | WidgetArrayParam[]; // Дочерние элементы
views?: string[]; // Варианты представлений параметра
available?: any[]; // Ограничение для генератора случайных чисел
}
Описание полей параметра
| Параметр | Описание |
|---|---|
| title | Заголовок, который будет использован в конфигураторе виджета, для пояснения блока данных |
| item_type | Тип данных ITEM_TYPE |
| param_type | Тип параметра PARAM_TYPE |
| items | Дочерние элементы входного параметра. Может быть либо массивом входных параметров, либо объектом |
| available | Массив ограничений значений. Используется только в среде разработки. Позволяет задать допустимые значения, например при массиве [0,1] значения параметра будут только 0 или 1 |
| max | Максимальное количество элементов массива (только если текущий объект массив) |
Рекомендуется, для описания набора параметров, участвующих в виджете использовать интерфейс InputParameters. Интерфейс InputParameters тесно связана с описание интерфейса WidgetParams. Фактически InputParameters показывает в каком виде данные будут переданы виджету, а WidgetParams говорит сервису, какие данные и в каком виде требуются.
Пример использования:
interface InputParameters {
signal: {
config: ParamConfigSingle,
items: Array<ItemSingle>
};
}
const PARAMS: WidgetParams = {
signal: {
title: _('Список сигнальных значений'),
item_type: ITEM_TYPE.single,
items: [{
param_type: PARAM_TYPE.signal,
max: 8,
}]
}
};
В InputParameters используются структуры данных ParamConfigSingle, ParamConfigInterval, ParamConfigSeries, ParamConfigEvents, ParamConfigCustom, которые описывают атрибуты, при конфигурировании виджета пользователем.
export interface ParamConfigSingle {
valueType: number;
}
| Параметр | Описание |
|---|---|
| valueType | Тип VALUE_TYPE |
export interface ParamConfigInterval {
dailyRange: string;
stateMap: boolean;
valueType: number;
duration: SeriesDuration;
count: number;
}
| Параметр | Описание |
|---|---|
| dailyRange | Время в течении дня 0:00-24:00 |
| stateMap | Включена ли карта состояний ( Сама карта доступна в item.data.states) |
| valueType | Тип VALUE_TYPE |
| duration | „day“,„week“, „month“ |
| count | Сдвиг назад относительно текущей даты |
export interface ParamConfigSeries {
duration?: SeriesDuration;
count?: number;
charttype?: ChartTypes;
generator?: boolean;
}
| Параметр | Описание |
|---|---|
| dailyRange | Время в течении дня 0:00-24:00 |
| stateMap | Включена ли карта состояний ( Сама карта доступна в item.data.states) |
| valueType | Тип VALUE_TYPE |
| duration | „day“,„week“, „month“ |
| count | Сдвиг назад относительно текущей даты |
export interface ParamConfigEvents {
attrList?: string[];
titleList?: string[];
size?: number;
objectIds?: string[];
eventIds?: string[];
commands?: string[];
}
| Параметр | Описание |
|---|---|
| attrList | Массив выбранных атрибутов |
| titleList | Массив названий столбцов |
| size | Количество записей в журнале |
| objectIds | Массив объектов |
| eventIds | Массив событий |
| commands | Массив команд |
export interface ParamConfigCustom {
value?: string;
type?: ParamConfigCustomType;
}
export enum ParamConfigCustomType {
'string',
}
| Параметр | Описание |
|---|---|
| value | Текстовое значение |
| type | Тип параметра |
Параметры можно описать как массивом так и объектом. Отличия между ними в описании параметра items.
При указании item_type и param_type только в родительском объекте все дочерние элементы его наследуют.
Следующие две записи равны
const PARAMS: WidgetParams = {
signal: {
item_type: ITEM_TYPE.single,
param_type: PARAM_TYPE.signal,
items: [{
max: 8,
}]
}
};
const PARAMS: WidgetParams = {
signal: {
items: [{
item_type: ITEM_TYPE.single,
param_type: PARAM_TYPE.signal,
max: 8,
}]
}
};
Описание InputParameters должно выглядеть так
interface InputParameters {
signal: {
config: ParamConfigSingle,
items: Array<ItemSingle>
};
}
В данном случае данные, которые получит виджет будут такими:
values.signal = [ItemSingle, ItemSingle, ItemSingle]
interface InputParameters {
battery: {
charge: ItemSingle
temperature: ItemSingle
status: ItemSingle
};
}
const PARAMS: WidgetParams = {
battery: {
title: _('Battery'),
item_type: ITEM_TYPE.single,
param_type: PARAM_TYPE.value,
items: {
charge: {title: _('Charge')},
temperature: {title: _('Temperature')},
status: {title: _('Status'), available: [1, 2, 3, 7, 9]},
}
},
}
Виджет получит:
values.battery = { charge: ItemSingle, temperature: ItemSingle, status:temperature: ItemSingle};
Для сборки и правильного функционирования виджета в системе, файл виджета должен вернуть структуру WidgetPackage
const component: WidgetPackage = {
template: require('./widget.html'),
component: new Widget(),
params: PARAMS,
size: {'sm': {'x': 0, 'y': 0, 'w': 3, 'h': 6}, 'lg': {'x': 0, 'y': 0, 'w': 5, 'h': 7}, 'mobile': {'x': 0, 'y': 0, 'w': 2, 'h': 7}},
styles: require('./widget.scss'),
locales: [{code: 'en', file: require('./i18n/en.json')}, {code: 'ru', file: require('./i18n/ru.json')}]
};
export default component;
| Свойства | Назначение |
|---|---|
| template | Содержимое шаблона виджета. Можно использовать функцию require(<путь к файлу шаблона>), либо строку |
| component | Экземпляр класса виджета |
| size | Размеры виджета по умолчанию для разных размеров экранов |
| styles | Стили виджета. Можно использовать функцию require(<путь к файлу стилей>), либо строку |
| locales | Массив с файлами для локализации виджета |
| needPicture | Использует ли виджет изображение |
Для правильной подсветки кода в среде разработки используется конструкция WidgetComponentContainer
Шаблон виджета будет передан именно классу-контейнеру.
Описание параметров и методов WidgetComponentContainer, которые можно использовать в шаблоне виджета
| Параметр | Назначение |
|---|---|
| values | Данные от сервиса, представленные согласно описаным параметрам |
| component | Объект, которые содержит функции и данные вашего виджета, описанного в классе //Widget// |
| theme | Текущая тема SiteTheme.dark, SiteTheme.light |
| pictureId | Идентификатор изображения. Можно использовать в шаблоне через pipe <img[src]=«pictureId makePictureUrl»/> |
| CHART_TYPES | Enum Типы графиков |
| VALUE_TYPE | Enum Типы значений |
Методы, которые можно использовать в виджете
| Методы | Назначение |
|---|---|
| openWindow(url) | Открывает модальное окно |
| urlExport() | Возвращает ссылку на экспорт данных виджета |
| paramCancel(par:WidgetItem) | Отменяет редактирование параметра |
| paramEdit(par:WidgetItem) | Переводит параметр в редактируемое состояние |
| paramSave(par:WidgetItem) | Сохраняет новое значение |
В этот класс можно разместить любую логику вашего виджета. Ниже представлены методы, которые вызываются контейнером виджета
| Методы | Назначение |
|---|---|
| onInit() | Вызывается при инициализации компонента |
| onDestroy() | Вызывается при уничтожении компонента |
| onUpdate(values) | Вызывается при обновлении данных |
| onResize(width, height) | Вызывается при любом изменении размеров виджета |
Параметры, доступные в компоненте виджета
| Параметры | Назначение |
|---|---|
| width | Ширина виджета в пикселях |
| height | Высота виджета в пикселях |
Все переменные, методы из этого класса доступны в виджете через переменную component
widget.my.ts
class Widget extends WidgetComponent {
isCompact: boolean = false;
toggleCompact() {
this.isCompact = !this.isCompact;
}
}
widget.my.html
<div *ngIf="component.isCompact">Compact</div>
<button (click)="component.toggleCompact()">Toggle compact</button>
Для удобства разработки и сокращения количества ошибок в среде разработки все структуры соответствуют реальным. Для правильной работы IDE используется функция-декоратор Component, эмулирующая работу функции Component из Angular, а также специальный класс-контейнер class WidgetContainer extends WidgetComponentContainer.
@Component({
templateUrl: './widget.my.html',
})
class WidgetContainer extends WidgetComponentContainer {
values: InputParameters;
component = new Widget();
}