меню

Селекторы

Селектор компонента находится в метаинформации @Component в файле *.component.ts.

Он работает так же как и css селекторы:

  • selector: 'app-servers' - элемент
  • selector: '.app-servers' - класс
  • selector: '[app-servers]' - data атрибут

В шалоне должно быть соответственно:

 
<app-servers></app-servers>
<div class='app-servers'></div>
<div app-servers></div>
 

Databinding

Датабиндинг (Databinding, связывание данных) - это коммуникация между TypeScript (бизнес логикой) и шаблоном (html).

Строковая интерполяция

app\server\server.component.ts:

  
export class ServerComponent {
  serverId: number = 10;
  serverStatus: string = 'offline';
}
  

Возможность указать тип переменной - особенность TypeScript, это не обязательно делать всегда.

app\server\server.component.html:

  
{{ 'Server' }} id is {{serverId}} and status is {{ serverStatus }}
  

{{ 'Server' }}, {{serverId}}, {{ serverStatus }} - будут интерполированы в строки.

Интерполяция функции

app\server\server.component.ts:

  
getServerID() {
    return this.serverId;
}
 

app\server\server.component.html:

 
{{ getServerID() }}
 

Property Binding (Связывание свойств)

Добавим в компонент \app\servers\servers.component.ts переменную disallowNewServer и конструктор:

  
export class ServersComponent implements OnInit {
  allowNewServer = false;
  constructor() {
    setTimeout(
    () => {
      this.allowNewServer = true;
    }, 
    2000);
  }
  ngOnInit() {
  }
}
 

Стрелочный синтаксис () => {} позволяет использовать внешний this, так как не создает свой собственный.

В шаблоне \app\servers\servers.component.html:

  
<button class="btn btn-primary" [disabled]="!allowNewServer">Add Server</button>
  

[disabled]="!allowNewServer" Связывает атрибут disabled с переменной компонента allowNewServer. Символ ! Инвертирует булевое значение.

Связывание свойств и строковая интерполяция

Вывод текста в шаблоне: {{ variable }}

Вывод html свойства: [innerText]="variable"


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

Observable. Subscribe и Unsubscribe

Stream и работа с Observable в Angular. Пример отписки в ngOnDestroy()

Формы. Реактивный подход.

Работа с формами. Реактивный подход (Reactive).

ng-content

Использование тега ng-content и размещения верстки из шаблона в теге вызова компонента в Angular

Компонент и данные

В данном руководстве пойдет речь о селекторе, Databinding, интерполяции, связывание свойств и многом другом.

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

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

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

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

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

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

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