Angular. Introduction to components
Today we’ll consider basics of Angular components – template params and methods, interpolation, events
Angular components are what the user interacts with: see data and interacts with it (clicks etc).
Angular component is class, which has its own template and styles. Template, styles and also other settings are described in @Component decorator. Component template contains html code with dynamic data – public class fields. This fields are are interpolated and look like {{propertyName}}
Also in templates different events are used. For example mouse click (see video and code example).
This events are handled by public component class methods. OOP doesn’t let use protected and private fields and methods in templates, because it can use only inside the class.
Code lesson (component class)
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;
}
}
Code lesson (component template)
<button (click)="changeTitle('button label')">{{title}}</button>
0 Comments