1. What is Angular?
Answer: Angular is a TypeScript-based open-source front-end web application framework developed by Google. It helps build single-page
applications (SPAs) using a component-based architecture.
Follow-up: How is Angular different from AngularJS?
=> Angular uses TypeScript, has a component-based architecture, and offers improved performance and modularity over AngularJS.
2. What are Angular components?
Answer: Components are the building blocks of an Angular app. They control views (templates), styles, and business logic.
Follow-up: How do you defne a component?
=> Using the @Component decorator with metadata such as selector, templateUrl, etc.
3. What is the purpose of NgModules?
Answer: NgModules group related components, directives, pipes, and services. The root module (AppModule) bootstraps the app.
Follow-up: What's the difference between root and feature modules?
=> Root modules start the app; feature modules organize code and enable
lazy loading.
4. What is the role of the Angular CLI?
Answer: Angular CLI is a command-line tool to scaffold, develop, and maintain Angular applications efciently.
Follow-up: How do you create a component using the CLI?
=> Run ng generate component component-name.
5. What is the difference between ngModel and FormControl?
Answer: ngModel is used in template-driven forms, while FormControl is used in reactive forms for programmatic control.
Follow-up: Which one is better for complex validation?
=> FormControl in reactive form.
6. What is Data Binding?
Answer: Data binding connects data between the component and the view. Angular supports one-way and two-way data binding.
Follow-up: What syntax is used for two-way binding?
=> [(ngModel)]="property".
7. What is a directive in Angular?
Answer: Directives are instructions in the DOM. There are structural (e.g., ngIf, *ngFor) and attribute directives (e.g., ngClass, ngStyle).
**Follow-up*: How do you create a custom directive?
=> Use @Directive decorator and implement logic inside HostListener or HostBinding.
8. What is a pipe?
Answer: Pipes transform data in templates (e.g., date formatting, currency, uppercase).
Follow-up: How do you create a custom pipe?
=> Use @pipe decorator and implement the PipeTransform interface.
9. What is dependency injection?
Answer: A design pattern Angular uses to provide dependencies (services) to components or other services.
Follow-up: What are providers?
=> Tokens that tell Angular how to create or deliver a dependency.
10. What is the difference between constructor and ngOnInit()?
Answer: Constructor is used for dependency injection, ngOnInit() is used for initialization logic after component creation.
Follow-up: Which lifecycle hook is called first?
=> Constructor is called before ngOnInit().
11. What is the difference between ngOnInit() and ngAfterViewInit()?
Answer: ngOnInit() is called once the component's inputs are initialized, while ngAfterViewInit() is called after Angular initializes the component's view.
Follow-up: When would you use ngAfterViewInit()?
=> If you need to access the component’s view after it's fully initialized, such as querying child components or DOM elements.
12. What are lifecycle hooks in Angular?
Answer: Lifecycle hooks are methods that allow you to hook into the lifecycle of Angular components or directives (e.g., ngOnInit, ngOnDestroy, etc.).
Follow-up: What is the most commonly used lifecycle hook?
=> ngOnInit is commonly used for initialization tasks.
13. What is a service in Angular?
Answer: A service is a class used to share data and logic across components in Angular. Services can be injected into components via
Angular’s Dependency Injection system.
Follow-up: How do you make a service singleton in Angular?
=> By providing the service in the root injector using { providedIn: 'root'}.
14. What is RxJS and how is it used in Angular?
Answer: RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using Observables. Angular uses RxJS for
asynchronous programming and handling events, HTTP requests, etc.
Follow-up: What is the difference between subscribe() and async pipe?
=> subscribe() is imperative, while async pipe is declarative and used in
templates to automatically subscribe and unsubscribe from Observables.
15. What is the Angular Router and how does it work?
Answer: The Angular Router is used for navigation and rendering views based on URLs. It maps paths to components.
Follow-up: What is lazy loading in Angular routing?
=> Lazy loading loads modules only when they are needed, improving application performance.
16. What are route guards in Angular?
Answer: Route guards are used to prevent or allow navigation to routes based on certain conditions, like authentication or authorization.
Follow-up: What are the different types of route guards?
=> CanActivate, CanDeactivate, CanLoad, and Resolve.
17. What is the ngIf directive?
Answer: The ngIf directive conditionally includes or removes an element from the DOM based on an expression.
Follow-up: How does ngIf differ from ngFor?
=> ngIf is for conditional rendering, whereas ngFor is for iterating over a list of items.
18. How do you handle errors in Angular services?
Answer: Errors can be handled using RxJS catchError operator in HTTP requests, or try-catch blocks in synchronous code.
Follow-up: What is the difference between throwError and of in error handling?
=> throwError propagates errors, while of emits a safe fallback
value.
19. What is the Angular CommonModule?
Answer: CommonModule is a module that provides common directives like ngIf, ngFor, and pipes such as DatePipe and UpperCasePipe. It is
essential for most modules.
Follow-up: Why is CommonModule used instead of BrowserModule in feature modules?
=> BrowserModule is for the root module, whereas CommonModule is for feature modules.
20. What are forms in Angular?
Answer: Forms in Angular can be either template-driven or reactive. Template-driven forms use directives in the template, while reactive forms
are built programmatically in the component.
Follow-up: What are FormControl and FormGroup?
=> FormControl represents a single form element, while FormGroup groups multiple controls.
21. What is the difference between ngModel and FormControl?
Answer: ngModel is used in template-driven forms for two-way data binding, while FormControl is used in reactive forms to handle form input
and validation.
Follow-up: Which one is better for large, complex forms?
=> FormControl in reactive forms is more suitable for larger, more complex forms.
22. What are Observables in Angular?
Answer: Observables are used for handling asynchronous operations in Angular, such as HTTP requests, user input, and events. They are a core
part of Angular’s reactive programming model.
Follow-up: How do you unsubscribe from an Observable in Angular?
=> Using unsubscribe() or leveraging the async pipe in templates.
23. What is the async pipe in Angular?
Answer: The async pipe subscribes to an Observable or Promise and returns the latest value. It automatically unsubscribes when the
component is destroyed.
Follow-up: Why should we use the async pipe instead of subscribe() in templates?
=> The async pipe handles subscriptions and unsubscriptions
automatically, making it more efcient.
24. What is the purpose of HttpClient in Angular?
Answer: HttpClient is a service used to make HTTP requests to external APIs, with built-in support for observables, JSON parsing, and error
handling.
Follow-up: How do you handle HTTP error responses?
=> Use RxJS operators like catchError to catch errors and handle them gracefully.
25. What are decorators in Angular?
Answer: Decorators are special types of functions used to defne and confgure Angular components, services, directives, and modules.
Follow-up: How do you create a custom decorator in Angular?
=> Use @DecoratorName and attach it to classes, properties, or methods to add metadata.
26. What is the role of ngOnDestroy()?
Answer: ngOnDestroy() is a lifecycle hook that is called when a component or directive is destroyed. It is used for cleanup tasks like
unsubscribing from Observables or removing event listeners.
Follow-up: Why do we need to manually unsubscribe in ngOnDestroy()?
=> To prevent memory leaks by cleaning up subscriptions or other
resources when the component is destroyed.
27. How does Angular handle change detection?
Answer: Angular uses a change detection mechanism to update the view whenever a model (data) changes. It uses a dirty checking
mechanism with zones to track changes.
Follow-up: What is the difference between OnPush and default change detection strategies?
=>OnPush checks for changes only when input properties change or events are triggered within the component.
28. What is the difference between a pure and impure pipe?
Answer: A pure pipe is executed only when Angular detects a change in the input value, whereas an impure pipe is executed for every change
detection cycle.
Follow-up: When would you use an impure pipe?
=> For cases where the input data may change externally, like when using an array that gets modified outside the pipe.
29. What is the @Input() decorator?
Answer: @Input() is used to pass data from a parent component to a child component.
Follow-up: What is the difference between @Input() and @Output() decorators?
=> @Input() is for passing data down from parent to child, while @Output() is for emitting events from child to parent.
30. What are Angular services and how are they used?
Answer: Angular services are reusable business logic or data access layers that can be injected into components, directives, and other
services.
Follow-up: How do you inject a service into a component?
=> Use Angular's Dependency Injection (DI) system with the constructor of the component.
Top comments (0)