Angular is a TypeScript-based front-end framework developed by Google for building dynamic single-page applications. It provides a comprehensive solution that includes components, services, routing, and dependency injection out of the box, allowing developers to focus on application logic rather than wiring infrastructure. At the heart of every Angular app is the component, which is the fundamental building block. A component consists of a TypeScript class decorated with @Component(), an HTML template, optional CSS styles, and metadata such as selector, templateUrl, and styleUrls. The @Component() decorator marks a class as an Angular component and tells Angular how to process, instantiate, and use the component at runtime.
Data binding is the mechanism that connects the component class to the template. Angular supports four forms: interpolation using double curly braces for displaying values, property binding with square brackets to set element properties, event binding with parentheses to respond to user actions, and two-way binding using the banana-in-a-box syntax [(ngModel)] to keep the view and model in sync. Services are classes decorated with @Injectable() that encapsulate reusable business logic, data access, or utility functions. When provided at the root level with @Injectable({ providedIn: 'root' }), they become singletons shared across the application through dependency injection, where dependencies are passed into a class's constructor rather than instantiated by the class itself.
Angular organizes code into NgModules, which are classes decorated with @NgModule(). The declarations array registers components, directives, and pipes that belong to the current module, while imports brings in other NgModules whose exported classes are needed by templates in this module. Components expose lifecycle hooks that fire at specific moments: ngOnChanges when input properties change, ngOnInit once after the first ngOnChanges when input bindings are available and which is preferred over the constructor for fetching initial data, and ngOnDestroy just before Angular destroys the component, used for cleanup like unsubscribing from Observables to prevent memory leaks. Components communicate via @Input() for parent-to-child data flow, @Output() with EventEmitter for child-to-parent events, and @ViewChild or @ContentChild for direct references, where ViewChild queries the component's own template and ContentChild queries projected content.