Angular Interview Questions for beginners, Intermediate and advanced

I have been working on Angular for quite a long time now. I do remember when I use to write angularjs, knockoutjs, and then in 2014 Angular Dev, the community announced the new version of Angular and the revolution happens from then. Now in 2021, the Angular community has been releasing new features, enhancing performance, measuring security concerns, and not. In May 2021, Angular v12 has been released with many great features. 

I have been interviewing many junior, senior & intermediate developers on different technologies for a long time. Using this article, I am letting you know, what kind of questions I usually ask or a simple tech chit-chat with a cup of coffee.

---

Having up to 2 - 3 years of experience in Angular, JavaScript, HTML5, and CSS, I would like to ask the following questions -

 

Q: Angular is a framework or library?

A: Angular is a framework, as it has all features in the build. Like a router, HTTP module for ajax call, browser animation, unit testing support with Jasmin Karma, and so on. Whereas React, Vue is a library as every respective task like routing, HTTP call, unit testing requires separate library support.

Q: What is the current version of Angular?

A: Currently, angular version 12 has been released. 

Q: What is the design pattern supported by Angular?

A: Angular followed MVC design pattern, where M defines Model (Logic and request-response data model), V defines View (HTML, CSS, all kind of UI component)  and C defines Controller (the connection between view & model).

Q. What are Angular life Cycle hooks? give some examples.

A. Angular component life cycle defines from initiation to destroy. During the lifetime phase, there are certain methods that will invoke if the component implements a few interfaces. Like

OnChanges interface has ngOnChanges.

OnInit interface has ngOnInit method. 

likewise Angular provides 8 different kinds of life cycle hooks, which execute at different times of a component life cycle. (More details, please visit https://v2.angular.io/docs/ts/latest/guide/lifecycle-hooks.html)

Q. What is decorator (metadata) in Angular? give some example - 

A. Decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime. The metadata represents by the decorator.

Example: @Component, @Directive, @Input, @Output, @ViewChild, @HostListner, @HostBinding and so on.

Q. What is data binding? is it possible to have one-way and two-way binding from view to the source?

A. Data binding means - a component object is interpolated with an HTML template, so the object value can be displayed in HTML.

One-way binding (component to HTML): {{ object_expression }} OR [target]='object_expression'

One-way binding (HTML to component): (target)='statement'

two-way binding (component to HTML to component): [(target)]='expression'

Q. How do you pass data from one component to another component?

A. There are many ways data can be shared from one component to another component. 

• If component A is a parent of component B - Data share from A to B
  • Using @Input decorator, data can be shared from component A to component B (Parent to Child)
• If component A is a parent of component B - Data share from B to A
  • Using @Output and event emitter data can be shared from component B to Component A (Child to Parent)
• If component A and component B does not have any parent-child relation
  1. Use service variable to share data from A to B
  2. Can be created a shared service variable and access the data across applications by injecting share service. 
  3. Use Subject or BehaviroulSubject to send data using Observer way.
  4. Can create a Singleton class with the setter & getter method, and access the data across applications.
  5. If the application is too large, the NGRX store can be used to share data as well. (Not recommended for small scale application)

Q. How do you call REST API from your Angular application?

A. To call REST API, we need to import HTTPClientModule in the application module. Also, we need to inject HTTPClient to call GET, PUT, POST, DELETE based on API signature.

Q. What is RxJS, and why do we need it?

A. RxJS is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code. The library also provides utility functions for creating and working with observables. These utility functions can be used for:

• Converting existing code for async operations into observables
• Iterating through the values in a stream
• Mapping values to different types
• Filtering streams
• Composing multiple streams

---

Having up to 4 - 5 years Or more than 5+ years of experience developer, the following questions can be asked.

Q. What is resolver service in angular and why do we need them?

A. Resolver is a class that implements the Resolver interface to get the respective data before the component gets loaded.

Resolver works with the router, which means the respective resolver has to inject where the routing details have been given. If a route has children routes, and resolver has been declared in parent then resolver will be executed whenever the child route happens.

 

Q. What is the auxiliary route? and when do need them with an example?

A. Auxiliary route means multiple outlets are using in the same angular application. There is some scenario a screen layout is separated by a side menu which is a child of the main menu, a chat window still opens during navigation. Auxiliary routes are mainly used when some of the screen views is constant during navigation. 

 

Q. How do you call multiple APIs (non-dependent) at the same time?

A. Using RxJS operator forkJoin. It takes multiple APIs (number of input observables) and waits for all passed observables to complete. Once they are complete, it will then emit a group of the last values from corresponding observables.

Q. How do you make an Observable work Synchronously?

A. As in Angular the Observable & Subscriber works asynchronously, but using await & async, and return Observer as Promise (using .toPromise()) we can make the Observable works as synchronously.

Q. What are RxJS transformation operators?

A. There are many RxJS operators used in the Angular ecosystem, the most common pipeable operators are map, tap, pluck, do, etc. But there are a few advanced operators are there like mergeMap, switchMap, concatMap, exhaustMap.

Q. What is changeDetection?

A. Change Detection means updating the DOM whenever data is changed. In its default strategy, Angular will run the change detector to update the DOM whenever any data is mutated or changed. ChangeDetection can happen with the following scenario -

• @Input value has changed
• A DOM event that the component is listening to was triggered
• An AsyncPipe received a new value

• Change detection has been explicitly triggered (detectChanges, markForCheck)

Q. Why do we need Angular Universal?

A. If an angular application needs to be SEO friendly, then Angular Universal will be used to make the angular application SEO enabled. Angular Universal provides two options for SEO enablement - 

• Server-Side Rendering - where angular application runs in node server and it generates simple index.html. Whenever the browser hits the URL, node server serves the respective HTML to the client.
• Pre-rendering - During building time, based on available routes, it generates different folder structures under the dist folder and each folder (route) has an index.html file. It also has a transfer state service, which saves the API response in index.html. When the browser hits the URL, the transfer state service will provide the cache data.

 

Angular is a great framework rather I would say, it's a great platform that has a solution for every problem.

1. Angular CLI
2. Router
3. HTTP Module
4. Forms (Mainly Reactive forms)
5. Animations
6. i18n
7. Language Service
8. Testing (Jasmin & Karma)
9. Universal

Angular has a very large ecosystem and dev community. If you search with your problem, I am sure you will get some hints or complete solutions for your problem. There is a lot to explore in angular, so embrace it.

Thanks,

- LP