Angular Framework

Angular is a TypeScript-based front-end framework developed by Google for building dynamic, single-page applications (SPAs). It provides a comprehensive solution including components, services, routing, and dependency injection out of the box.

A component is the fundamental building block of an Angular application. It consists of:A TypeScript class decorated with @Component()An HTML templateOptional CSS stylesMetadata such as selector, templateUrl, and styleUrls

The @Component() decorator marks a class as an Angular component and provides metadata that tells Angular how to process, instantiate, and use the component at runtime. Key properties include:selector – the custom HTML tagtemplateUrl – path to the HTML templatestyleUrls – array of stylesheets

Data binding is a mechanism that connects the component class to the template. Angular supports four forms:Interpolation: {{ expression }}Property binding: [property]="expression"Event binding: (event)="handler()"Two-way binding: [(ngModel)]="property"

A service is a class decorated with @Injectable() that encapsulates reusable business logic, data access, or utility functions. Services are typically singletons when provided at the root level and are shared across components via dependency injection.

Dependency injection is a design pattern where Angular's DI system creates and delivers dependencies (usually services) to classes that request them. Instead of a class creating its own dependencies, they are injected via the constructor:
constructor(private myService: MyService) {}

The @Injectable() decorator marks a class as available for Angular's dependency injection system. Setting @Injectable({ providedIn: 'root' }) registers the service as a singleton at the application root level, enabling tree-shaking.

An NgModule is a class decorated with @NgModule() that organizes related code into cohesive blocks. Key metadata properties:declarations – components, directives, pipesimports – other modules neededproviders – servicesbootstrap – root component

declarations registers components, directives, and pipes that belong to the current module.
imports brings in other NgModules whose exported classes are needed by templates in this module. For example, importing FormsModule to use ngModel.

Lifecycle hooks are methods that Angular calls at specific moments in a component's life. Key hooks in order:ngOnChanges() – input property changesngOnInit() – after first ngOnChangesngDoCheck() – custom change detectionngAfterViewInit() – after view initializesngOnDestroy() – before component is destroyed

ngOnInit() is a lifecycle hook called once after the first ngOnChanges(). It is used for component initialization logic such as fetching data from a service. It is preferred over the constructor for initialization because input bindings are available at this point.

ngOnDestroy() is called just before Angular destroys the component. It is used for cleanup tasks such as:Unsubscribing from ObservablesDetaching event handlersStopping timers with clearInterval()This prevents memory leaks.