Angular is a TypeScript-based front-end framework developed by Google to build dynamic single-page web applications.

Angular is used to build structured, scalable, and dynamic web applications with reusable components, routing, services, and form handling.

A component is the basic building block of an Angular application. It controls a part of the user interface.

• TypeScript class
• HTML template
• CSS or SCSS styles
• Decorator metadata

A module is used to organize related components, directives, pipes, and services into one unit.

TypeScript is a superset of JavaScript that adds types, classes, interfaces, and other features. Angular uses it for better code structure and maintainability.

Data binding is the process of connecting data between the component class and the HTML template.

• Interpolation
• Property binding
• Event binding
• Two-way data binding

Interpolation is used to display component data in the template using double curly braces like {{ value }}.

Two-way data binding connects the component and template both ways. It is commonly used with [(ngModel)].

A directive is used to add behavior or modify the structure and appearance of elements in the DOM.

• Component directives
• Structural directives
• Attribute directives

*ngIf is used for conditional rendering. *ngFor is used to loop through data and display multiple elements.

A service is a class used to share business logic, data access logic, or reusable functionality across components.

Dependency injection is a design pattern where Angular provides required objects like services automatically to components or other classes.

Routing is used to navigate between different components or pages in a single-page Angular application.

router-outlet is a directive that acts as a placeholder where the routed component is displayed.

A pipe is used to transform displayed data in the template, such as date formatting, uppercase, lowercase, and currency formatting.

Pure pipes run only when input changes. Impure pipes run during every change detection cycle.

Template-driven forms are forms created mainly in the HTML template using directives like ngModel.

Reactive forms are form models created in the TypeScript class using FormGroup, FormControl, and FormBuilder.

Template-driven forms are easier and template-based. Reactive forms are more scalable, programmatic, and suitable for complex validation.

Lifecycle hooks are special methods that allow developers to respond to important events in a component’s life, like creation, update, and destruction.

• ngOnInit
• ngOnChanges
• ngDoCheck
• ngAfterViewInit
• ngOnDestroy

ngOnInit is a lifecycle hook that runs once after Angular initializes the component.

ngOnDestroy is used for cleanup tasks like unsubscribing from observables or clearing timers before the component is destroyed.

Lazy loading means loading feature modules only when required, which improves application performance and initial load time.

An observable is a feature from RxJS used to handle asynchronous data streams like HTTP responses, user input, and events.

A promise returns one value and completes. An observable can return multiple values over time and supports operators and cancellation.

HttpClient is Angular’s built-in service used to make HTTP requests like GET, POST, PUT, and DELETE to APIs.

Change detection is the process Angular uses to check for data changes and update the view accordingly.

Default checks the whole component tree more frequently. OnPush checks mainly when input references change, events happen, or observables emit values.

A route guard is used to control navigation to routes based on conditions like authentication, authorization, or unsaved changes.

• CanActivate
• CanDeactivate
• CanLoad
• CanMatch
• Resolve

An interceptor is used to handle HTTP requests and responses globally, such as adding tokens, logging, or error handling.

View encapsulation controls how component styles are scoped. It helps prevent styles from affecting other components unexpectedly.

@Input is used to pass data from parent to child. @Output is used to send events or data from child to parent.

A shared module contains commonly used components, directives, and pipes that can be reused in multiple modules.

I optimize Angular performance by using lazy loading, OnPush change detection, trackBy in ngFor, reusable components, proper unsubscribe handling, and reducing unnecessary DOM updates.

The constructor is used for dependency injection and basic initialization. ngOnInit is used for component logic after Angular initializes the component.

No. Angular and AngularJS are different. AngularJS is the older JavaScript-based version, while Angular is the modern TypeScript-based framework.

No. To use ngModel, you need to import FormsModule.

Not always, but in many cases unsubscribe is needed to avoid memory leaks, especially for long-running subscriptions.

Yes. A service can be shared by multiple components depending on where it is provided.

Angular is commonly used for single-page applications, but it can also be used in larger enterprise applications with multiple features and structures.