Фул Стэк — программист — Страница 28 — Программирование на Всем!

05.02.201905.02.2019

Двусторонняя привязка данных — ngModel

В app.module.ts импортируем модуль @angular/forms (1) В imports прописываем добавленный модуль (2)

...
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms'; (1)
...

@NgModule({
  declarations: [
    AppComponent,
    DateComponent
  ],
  imports: [
    ...,
    FormsModule (2)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
...

05.02.201905.02.2019

Click. Отслеживание событий

<button (click)="myEvent($event)">(1)
  Event
</button>

export class DateComponent implements OnInit {
  constructor() {

  }

  myEvent(event) { // (2)
    console.log(event);
  } 
...

В шаблоне для элемента button добавляем событие click (1), которое при помощи одностороннего бандинга, может обрабатываться в классе компонента (2).

05.02.201905.02.2019

Структурная директива ngFor

Позволяет перебрать в шаблоне элементы массива

export class DateComponent implements OnInit {
  // создаем массив
  items = ["Angular", "React", "Vue", "NodeJS"]; // (1)
  constructor() {

  }
...

 <ul>(2)
   <li *ngFor="let item of items; let i = index">{{i+1}} {{item}}</li> (3)
 </ul>

В компоненте создаем переменную items (1). В шаблоне создаем список в котором объявляем директиву ngFor (2), которая выполняет роль forEach JavaScript’a. В переменную i специально передаем текущий индекс элемента. Далее (3) выводим результат.

05.02.201905.02.2019

Привязка данных

Существует несколько формы привязки данных:

привязка значения к DOM (односторонняя привязка)

Шаблон *.html

// пример интерполяции
<p>
  Hello {{message}}
</p>

*.ts — файл компонента

 
export class DateComponent implements OnInit {
  message: string = "World";
  constructor() { }
  ...
}

05.02.201908.02.2019

Компоненты Angular

Все компоненты хранятся в папке src/app

*.ts — «корневой» компонент

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'appcode pw';
}