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>
Здраствуйте, сделал домашку. Но не знаю куда скидывать, скидываю Вам сюда. Пока-что ничего сложного. Но знаю что потом пойдет жестяк и надо будет соображать и соображать над каждым уроком
Вот ссылка на домашку https://stackblitz.com/edit/angular-ivy-cvwxcf?file=src/app/app.component.ts
Надеюсь все норм, еще раз спасибо за Ваш труд.
Здравствуйте, Максим. Спасибо за ваш интерес. Домашнее задание заключалось в создании счетчика (инкремента/декремента). По вашей ссылке я его не увидел.
я забыл сохранить проект, извините. Вот сейчас, там все должно быть https://stackblitz.com/edit/angular-ivy-cvwxcf?file=src/app/app.component.ts
Спасибо, Максим. Отличная работа
Ну, просто Вы понятно поясняете =) Спасибо Вам. Жду следующих уроков))))))
Максим, обязательно