A complete, batteries-included framework from Google. Angular brings components, two-way binding, dependency injection and a CLI-driven build into one opinionated platform.
Angular's "banana-in-a-box" syntax [(ngModel)] binds an input to a component property in both directions. Type to see it update.
Welcome, stranger!
// app.component.ts @Component({ selector: 'app-root', template: ` <input [(ngModel)]="name"> <p>Welcome, {{ name || 'stranger' }}!</p> ` }) export class AppComponent { name = ''; }
The *ngFor structural directive stamps out one element per item in a collection. Add and remove tasks below.
<li *ngFor="let task of tasks; let i = index"> {{ i + 1 }}. {{ task }} <button (click)="remove(i)">×</button> </li>
Wrap an event name in parentheses to bind it. Here a counter increments through (click) calling a component method.
<button (click)="addItem()">Add to cart</button> <span>Items: {{ items }}</span> // component addItem() { this.items++; }
Angular's killer feature: a @Injectable service holds shared logic, and components inject it through their constructor. Both badges read the same injected counter service.
@Injectable({ providedIn: 'root' }) export class CounterService { count = 0; increment() { this.count++; } } @Component({ ... }) export class HeaderComponent { constructor(public counter: CounterService) {} }
[(ngModel)] two-way binding, *ngFor lists, event binding and a shared injectable service) because Angular needs a CLI build step. Every code block shows the real Angular component & template source. The shared CSS shell provides page styling.