Angular. Введение в компоненты

Главная » Видеоуроки » JavaScript » Angular. Введение в компоненты
В этом уроке мы рассмотрим базовые принципы Angular компонентов — переменные и методы компонентов, интерполяция, события

Компоненты в Angular — это то, с чем взаимодействует пользователь: просматривает информацию и взаимодействует с ней (клики и пр.)
Компонент в Angular — это класс, который имеет свой шаблон и стили. Шаблоны, стили и другие настройки описываются в декораторе @Component. Шаблон компонента содержит html код с динамическими данными — публичными полями класса компонента. Такие данные в шаблоне интерполированы — имеют вид {{propertyName}}. 

Также в шаблонах часто используются события. Например, клик мыши (см пример кода и видео). Данные события обрабатываются публичными методами класса компонента. ООП не позволяет использовать protected и private поля и методы в шаблонах, так они могут использоваться только внутри класса.

Код урока (класс компонента)

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

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

  changeTitle(title: string) {
    this.title = title;
  }
}

Код урока (шаблон компонента)

<button (click)="changeTitle('button label')">{{title}}</button>   

6 комментариев

  1. Максим

    Здраствуйте, сделал домашку. Но не знаю куда скидывать, скидываю Вам сюда. Пока-что ничего сложного. Но знаю что потом пойдет жестяк и надо будет соображать и соображать над каждым уроком
    Вот ссылка на домашку https://stackblitz.com/edit/angular-ivy-cvwxcf?file=src/app/app.component.ts

    Надеюсь все норм, еще раз спасибо за Ваш труд.

    Ответить
  2. Камиль

    Здравствуйте, Максим. Спасибо за ваш интерес. Домашнее задание заключалось в создании счетчика (инкремента/декремента). По вашей ссылке я его не увидел.

    Ответить
      • Максим

        Ну, просто Вы понятно поясняете =) Спасибо Вам. Жду следующих уроков))))))

        Ответить

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *


Срок проверки reCAPTCHA истек. Перезагрузите страницу.

Pin It on Pinterest

Share This