Counter with Lifecycle Hooks - Angular Typing CST Test
Loading…
Counter with Lifecycle Hooks — Angular Code
Shows use of Angular lifecycle hooks ngOnInit and ngOnDestroy in a counter component.
import { Component, OnInit, OnDestroy } from '@angular/core';
@Component({
selector: 'app-lifecycle-counter',
template: `
<div>
<h2>Counter: {{ count }}</h2>
<button (click)="increment()">+</button>
<button (click)="decrement()">-</button>
</div>
`
})
export class LifecycleCounterComponent implements OnInit, OnDestroy {
count = 0;
ngOnInit() { console.log('Counter initialized'); }
ngOnDestroy() { console.log('Counter destroyed'); }
increment() { this.count++; }
decrement() { this.count--; }
}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.