Questions and Answers
Last updated:
Angular is a robust, full-featured framework maintained by Google for building scalable, high-performance web applications. With its powerful tools, modular architecture, and strong community support, Angular enables teams to develop complex single-page applications efficiently. Its features—such as two-way data binding, dependency injection, and a comprehensive CLI—make it a top choice for enterprise solutions and large-scale projects.
Crucial Topics
Section titled “Crucial Topics”What is the difference between component and directive?
Section titled “What is the difference between component and directive?”Components are a type of directive with a template. Directives are used to add behavior to an existing DOM element.
What are types of directives?
Section titled “What are types of directives?”There are three types of directives in Angular:
- Component Directives
- Structural Directives
- Attribute Directives
What are pipes?
Section titled “What are pipes?”Pipes are used to transform data in templates. They take in data as input and transform it to a desired output.
One way vs two way bindings
Section titled “One way vs two way bindings”One-way binding binds data from the component to the view or vice versa. Two-way binding allows data to flow in both directions.
What are component lifecycle
Section titled “What are component lifecycle”The component lifecycle includes the stages a component goes through from creation to destruction.
What are lifecycle hooks?
Section titled “What are lifecycle hooks?”Lifecycle hooks are methods that Angular calls at different stages of a component’s lifecycle.
What types of forms presented in Angular?
Section titled “What types of forms presented in Angular?”Angular provides two types of forms: Template-driven forms and Reactive forms.
What is the difference between Reactive and Template driven forms?
Section titled “What is the difference between Reactive and Template driven forms?”Template-driven forms are easy to use but less scalable, while Reactive forms are more powerful and scalable.
What is Control Value Accessor?
Section titled “What is Control Value Accessor?”Control Value Accessor is an interface that acts as a bridge between Angular forms API and the native element.
Input and Output decorators
Section titled “Input and Output decorators”Input decorator is used to pass data from parent to child component. Output decorator is used to pass data from child to parent component.
How Angular understands what dependency to use?
Section titled “How Angular understands what dependency to use?”Angular uses Dependency Injection (DI) to determine and provide the required dependencies.
Elements Tree vs Module Tree?
Section titled “Elements Tree vs Module Tree?”Elements Tree represents the DOM structure, while Module Tree represents the Angular module structure.
What is the difference between ViewChild/children and ContentChild/children
Section titled “What is the difference between ViewChild/children and ContentChild/children”ViewChild/children queries the view DOM, while ContentChild/children queries the projected content DOM.
View Tree in Angular?
Section titled “View Tree in Angular?”The View Tree represents the hierarchy of views in an Angular application.
CD Strategies?
Section titled “CD Strategies?”Change Detection (CD) strategies determine how and when Angular checks for changes in the component.
How to create custom strategy?
Section titled “How to create custom strategy?”Custom strategies can be created by implementing the ChangeDetectionStrategy interface.
How to trigger cd manually?
Section titled “How to trigger cd manually?”Change detection can be triggered manually using ChangeDetectorRef.
Difference between markForCheck, detectChanges, tick?
Section titled “Difference between markForCheck, detectChanges, tick?”markForCheck marks the component for checking, detectChanges triggers change detection, and tick runs change detection for the entire application.
Detach vs Reattach?
Section titled “Detach vs Reattach?”detach stops change detection for a component, while reattach resumes it.
What actions triggers change detection?
Section titled “What actions triggers change detection?”Change detection can be triggered by events, HTTP requests, timers, and user interactions.
What events are triggering CD with OnPush strategy?
Section titled “What events are triggering CD with OnPush strategy?”With OnPush strategy, change detection is triggered by input property changes and events.
What is the difference between Observable and Promise?
Section titled “What is the difference between Observable and Promise?”Observables are lazy and can handle multiple values over time, while Promises are eager and handle a single value.
Different types of Subjects?
Section titled “Different types of Subjects?”There are four types of Subjects: Subject, BehaviorSubject, ReplaySubject, and AsyncSubject.
Difference between Observable and Subject?
Section titled “Difference between Observable and Subject?”Observables are unicast, while Subjects are multicast.
BehaviorSubject vs AsyncSubject vs ReplaySubject vs Subject?
Section titled “BehaviorSubject vs AsyncSubject vs ReplaySubject vs Subject?”Subject: No initial value, emits to current subscribers.BehaviorSubject: Requires an initial value, emits the latest value to new subscribers.ReplaySubject: Emits specified number of last values to new subscribers.AsyncSubject: Emits the last value to subscribers upon completion.
What are hot, cold and warm streams?
Section titled “What are hot, cold and warm streams?”Hot streams: Emit values regardless of subscribers.Cold streams: Emit values only when subscribed.Warm streams: Emit values to current subscribers and cache the latest value for new subscribers.
How to unsubscribe?
Section titled “How to unsubscribe?”Unsubscribe by calling the unsubscribe method on the subscription.
Different unsubscribe approaches, should know pros and cons of each.
Section titled “Different unsubscribe approaches, should know pros and cons of each.”- Manual unsubscribe
takeUntiloperatorAsyncPipeSubscriptionmanagement
What are http interceptors?
Section titled “What are http interceptors?”HTTP interceptors are used to intercept and modify HTTP requests and responses.
What is the purpose of routing in SPA?
Section titled “What is the purpose of routing in SPA?”Routing in SPA allows navigation between different views without reloading the page.
How SPA navigation different from MPA navigation?
Section titled “How SPA navigation different from MPA navigation?”SPA navigation updates the view without reloading the page, while MPA navigation reloads the entire page.
How to create a route?
Section titled “How to create a route?”Define routes in the RouterModule and use the RouterLink directive for navigation.
What is the purpose of ‘pathMatch: full’ property?
Section titled “What is the purpose of ‘pathMatch: full’ property?”pathMatch: full ensures that the entire URL path matches the route.
How to pass data through router?
Section titled “How to pass data through router?”Pass data using route parameters, query parameters, or state.
Name all guards?
Section titled “Name all guards?”CanActivateCanActivateChildCanDeactivateResolveCanLoad
What are the purpose of each guard?
Section titled “What are the purpose of each guard?”CanActivate: Checks if a route can be activated.CanActivateChild: Checks if child routes can be activated.CanDeactivate: Checks if a route can be deactivated.Resolve: Pre-fetches data before activating a route.CanLoad: Checks if a module can be loaded.
What is Lazy loading?
Section titled “What is Lazy loading?”Lazy loading loads modules only when they are needed.
How to implement lazy loading?
Section titled “How to implement lazy loading?”Use the loadChildren property in the route configuration.
What are chunks?
Section titled “What are chunks?”Chunks are smaller bundles of code that are loaded on demand.
Optimization techniques within Angular?
Section titled “Optimization techniques within Angular?”- Lazy loading
- Ahead-of-Time (AOT) compilation
- Tree shaking
- Code splitting
What is trackBy?
Section titled “What is trackBy?”trackBy is used to improve performance by tracking items in a list by a unique identifier.
Frequently Asked Questions
Section titled “Frequently Asked Questions”How to create a custom directive?
Section titled “How to create a custom directive?”Create a custom directive by implementing the Directive decorator and defining the directive’s behavior.
What is the difference between pure and impure pipes?
Section titled “What is the difference between pure and impure pipes?”Pure pipes are stateless and only depend on input arguments. Impure pipes can have side effects and depend on external state.
What are the subsequence of lifecycle hooks?
Section titled “What are the subsequence of lifecycle hooks?”ngOnChangesngOnInitngDoCheckngAfterContentInitngAfterContentCheckedngAfterViewInitngAfterViewCheckedngOnDestroy
What is each hook are commonly used for?
Section titled “What is each hook are commonly used for?”ngOnChanges: Respond to input changes.ngOnInit: Initialize the component.ngDoCheck: Detect and act upon changes.ngAfterContentInit: Respond after content projection.ngAfterContentChecked: Respond after content checked.ngAfterViewInit: Respond after view initialization.ngAfterViewChecked: Respond after view checked.ngOnDestroy: Cleanup before component destruction.
How to validate each type of forms?
Section titled “How to validate each type of forms?”Use built-in validators or custom validators for template-driven and reactive forms.
How to implement CVA?
Section titled “How to implement CVA?”Implement the ControlValueAccessor interface and define the required methods.
What is View Encapsulation?
Section titled “What is View Encapsulation?”View Encapsulation defines how styles are scoped to components.
How Angular encapsulates styles?
Section titled “How Angular encapsulates styles?”Angular encapsulates styles using Shadow DOM, Emulated, or None strategies.
How to apply styles to component selector?
Section titled “How to apply styles to component selector?”Use the :host selector to apply styles to the component’s host element.
ng-template, ng-container, ng-content. Describe each What is the difference?
Section titled “ng-template, ng-container, ng-content. Describe each What is the difference?”ng-template: Defines a template that can be used elsewhere.ng-container: Groups elements without adding extra DOM elements.ng-content: Projects content from parent to child component.
Where to use?
Section titled “Where to use?”Use ng-template for reusable templates, ng-container for grouping elements, and ng-content for content projection.
What is injector?
Section titled “What is injector?”Injector is a service locator that provides dependencies.
What is provider?
Section titled “What is provider?”Provider is a configuration that tells the injector how to create a dependency.
DI Decorators?
Section titled “DI Decorators?”@Injectable@Inject@Optional@Self@SkipSelf@Host
Different approaches of providing?
Section titled “Different approaches of providing?”useClassuseExistinguseValueuseFactory
useClass, useExisting, useValue, useFactory Injection Tokens?
Section titled “useClass, useExisting, useValue, useFactory Injection Tokens?”useClass: Provide a class.useExisting: Alias an existing provider.useValue: Provide a static value.useFactory: Provide a value using a factory function.
Eagerly loaded modules?
Section titled “Eagerly loaded modules?”Modules that are loaded at the start of the application.
What are the use cases for interceptors?
Section titled “What are the use cases for interceptors?”- Logging
- Authentication
- Error handling
- Modifying requests and responses
* (asterisk) routes?
Section titled “* (asterisk) routes?”Wildcard routes that match any URL.
Navigation between routes?
Section titled “Navigation between routes?”Use RouterLink directive or Router service to navigate between routes.
ActivatedRoute?
Section titled “ActivatedRoute?”ActivatedRoute provides access to information about a route associated with a component.
What is urlTree in Angular?
Section titled “What is urlTree in Angular?”UrlTree is a data structure that represents the parsed URL.
How to implement each guard?
Section titled “How to implement each guard?”Implement the guard interfaces and define the required methods.
Preloading strategy?
Section titled “Preloading strategy?”Preloading strategy loads modules in the background after the application is loaded.
Using pipes instead of methods in templates?
Section titled “Using pipes instead of methods in templates?”Use pipes for data transformation in templates to improve performance.
Good to Know Areas
Section titled “Good to Know Areas”What is Angular?
Section titled “What is Angular?”Angular is a platform and framework for building single-page client applications using HTML and TypeScript.
How to create custom structural directive?
Section titled “How to create custom structural directive?”Create a custom structural directive by implementing the Directive decorator and manipulating the DOM.
How to create one? What Angular default pipes are impure by default, why?
Section titled “How to create one? What Angular default pipes are impure by default, why?”Create a custom pipe by implementing the Pipe decorator and defining the transform method. Default impure pipes include AsyncPipe because they depend on external state.
constructor vs NgOnInit?
Section titled “constructor vs NgOnInit?”Constructor is used for dependency injection, while ngOnInit is used for component initialization.
What lifecycle hook are called more than once?
Section titled “What lifecycle hook are called more than once?”ngDoCheck, ngAfterContentChecked, and ngAfterViewChecked can be called multiple times.
Differences between forms validation?
Section titled “Differences between forms validation?”Template-driven forms use directives for validation, while reactive forms use explicit validation logic.
Different types of Encapsulation?
Section titled “Different types of Encapsulation?”EmulatedNativeNone
ng-deep vs .host-context vs .host
Section titled “ng-deep vs .host-context vs .host”ng-deep: Apply styles to child components..host-context: Apply styles based on a condition..host: Apply styles to the host element.
What is ngTemplateOutlet?
Section titled “What is ngTemplateOutlet?”ngTemplateOutlet is a directive that inserts an embedded view from a prepared TemplateRef.
implicit in ngTemplateOutlet
Section titled “implicit in ngTemplateOutlet”implicit is a context variable that allows passing data to the template.
DI pattern?
Section titled “DI pattern?”Dependency Injection (DI) pattern is a design pattern that implements inversion of control for resolving dependencies.
providers vs viewProviders?
Section titled “providers vs viewProviders?”providers: Provide services to the component and its children.viewProviders: Provide services to the component and its view children.
How to create router link?
Section titled “How to create router link?”Use the RouterLink directive to create a router link.
How to refresh page within the same route programmatically?
Section titled “How to refresh page within the same route programmatically?”Use the Router service to navigate to the same route.
provideIn: Platform?
Section titled “provideIn: Platform?”provideIn: 'platform' makes the service available in the platform injector.
How to identify what pages are should be lazy loaded?
Section titled “How to identify what pages are should be lazy loaded?”Identify pages that are not frequently accessed and load them lazily.
JIT vs AOT what are the difference?
Section titled “JIT vs AOT what are the difference?”JIT (Just-in-Time): Compiles the application in the browser at runtime.AOT (Ahead-of-Time): Compiles the application during the build process.