Angular 1: What Is Angular? Your First Standalone Component
easy⏱ 5 mincourseangular
Standalone components: no NgModule required
Modern Angular components declare standalone: true and list whatever they depend on directly in an imports array — no NgModule wiring needed. A component decorated with @Component({...}) pairs a selector (the HTML tag other templates use to render it), a template (inline or in a separate file), and the class itself, which holds the component's state and logic.
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-counter',
standalone: true,
template: `<button (click)="count.update(c => c + 1)">{{ count() }}</button>`,
})
export class CounterComponent {
count = signal(0);
}
The class is the component's brain
Everything the template needs — data, methods, computed values — lives as members on the component class. Angular creates one instance of the class per rendered component and evaluates the template against that instance, so count in the template refers to this.count on the class.
Build ProfileCard
Declare a views field with signal(0), and a button whose (click) handler calls this.views.update(v => v + 1). Show the view count in the template with {{ views() }}.