Counter with Two-Way Binding - Angular Typing CST Test
Loading…
Counter with Two-Way Binding — Angular Code
Demonstrates two-way binding with [(ngModel)] in an Angular counter component.
import { Component } from '@angular/core';
@Component({
selector: 'app-counter-ngmodel',
template: `
<div>
<h2>Counter: <input [(ngModel)]="count" type="number"></h2>
<button (click)="increment()">+</button>
<button (click)="decrement()">-</button>
<button (click)="reset()">Reset</button>
</div>
`
})
export class CounterNgModelComponent {
count: number = 0;
increment() { this.count++; }
decrement() { this.count--; }
reset() { this.count = 0; }
}Angular Language Guide
Angular is a platform and framework for building client-side web applications using HTML, CSS, and TypeScript. Developed by Google, it is designed for building single-page applications (SPAs) with rich user interfaces and reactive features.
Primary Use Cases
- ▸Single-page applications (SPAs)
- ▸Enterprise web apps with complex UIs
- ▸Progressive Web Apps (PWAs)
- ▸Dynamic dashboards and admin panels
- ▸Cross-platform web applications with Angular Universal
Notable Features
- ▸Component-based architecture
- ▸Two-way data binding
- ▸Dependency injection
- ▸TypeScript support and static typing
- ▸Reactive programming with RxJS
Origin & Creator
Originally created in 2010 as AngularJS by Misko Hevery and maintained by Google; rewritten as Angular (2+) in 2016.
Industrial Note
Angular is widely used in enterprise-grade web applications, dashboards, and SPAs where maintainability, tooling, and structured architecture are important.