Рубрика: angular

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

export class DateComponent implements OnInit {
  constructor() {

  }

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

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

Читать далее «Click. Отслеживание событий»

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

...
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> 

Читать далее «Директива ngif»

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

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) выводим результат.

Читать далее «Структурная директива ngFor»

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

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

Шаблон *.html

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

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

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

 

Читать далее «Привязка данных»

Все компоненты хранятся в папке 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';
}

 

• *.css — стили компонента
• *.html — шаблон компонента

Дополнительные параметры компонента можно узнать тут

Все объекты которые начинаются с @, например @Component или @NgModule — это декораторы.

Читать далее «Компоненты Angular»

Требуется уставновить:

• nodejs
• git
• npm install -g @angular/cli

Создание простого приложения

ng new my-app

где my-app имя приложения

После окончания создания переходим в папку и выполняем команду

cd my-app
ng serve -o

Читать далее «Запуск первого приложения»