Александр Краснов — Страница 27 — Фул Стэк

05.02.201906.02.2019

NgStyle,NgClass. Динамическая стилизация компонентов

ngClass — позволяет определить набор классов которые применяются к элементу

<div [ngClass]="{class1: true}"> (1)
    <h1>Hello World!!!</h1>
    <p [ngClass]="{class2: true}">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam cupiditate
        voluptates sed voluptate a dolores
        ipsa dignissimos in nam cumque consequuntur, iste dolore? Voluptatum reiciendis doloremque eligendi
        dignissimos, iusto deleniti.</p>
</div>

.class1{
    color: red;
}

.class2{
    color: yellow;
}

Применение стилей для элемента осуществляется при помощи директивы ngClass, которой присваивается объект в виде строки «{class1:true}». Где class1 — имя класса, а параметр true — нужно применять класс или нет.

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

Директива ngif

Предназначен для обработки условий. На примере ниже показано применение для установки видимости компонента.

...
loggedIn: boolean = true; // (1)
...

<div *ngIf="loggedIn"> (2)
  <p>Logged in.</p>
</div>

Объявляем переменную в классе компонента (1). В разметке объявляем директиву ngIf присваиваем ей значение переменной (2).

Как и любой логический оператор, ngIf может использовать отрицание (3).

<div *ngIf="!loggedIn"> (3)
  <p>Logged in.</p>
</div>

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';
}