Top 5 Angular Interview Questions for advanced developers

Interview process is a very important step in our career as a Software Developer and you should be well-prepared no matter how experienced and confident you are. I changed companies several times, had a myriad of interviews and was also involved in the recruiting process helping my team and company to hire Angular Developers. So I have been kind of on both sides 🙂

It gave me understanding that basically there are 5 questions which I was being asked during interviews and those questions are also my favourite ones which I also ask every candidate. The beauty of those questions is that they fit to any seniority level and the difference is just how deep candidate dive into details and nuances. So, let’s get started.

Tell all the pros and cons in angular

I like to ask this question at the very beginning because it perfectly shows how broad knowledge has candidates about Angular and how many features he or she use. Here you can mention all things which you like or don’t like in Angular and the more the better and my answer would be most probably like this:

Advantages in Angular

First-Class Typescript support. Types are always in sync with code, no need to maintain separately
Powerful Angular CLI which allows automating a lot of things like component creation, build optimisations and many more.
Dependency Injection. Allows to make your code maintainable, flexible and testable
All-in Solution which means that it is a fully-fledged framework which has its own routing, forms, animations etc

Disadvantages in Angular

Complexity. Besides the framework itself you need to learn also RxJs library, Typescript and some Angular-specific syntax in templates like build-in directives *ngIf, *ngFor etc
Bundle Size. Compared to other frameworks Angular has the largest bundle size but there are a lot of ways how to decrease it (Lazy Loading as example)
Smaller community. Yes the community size is smaller but not small and also nice and friendly 😉

Change detection. How does it work?

Without knowing how Angular handles Change Detection it is hard to build a performant application, so it is important to have at least some basic understanding of this process.

Change detection is a mechanism in Angular which cares about view re-rendering in case data was changed.

It is being triggered when some of the next actions happens: Fired events like click, mouse move etc and this event has a registered handler or when AJAX call, setInterval/setTimeout was ticked. So, basically we can say that any async action triggers change detection. Once it happens Angular starts traversing the tree of components from top to bottom and re-render the view if it is necessary.
If you are more advanced developer you can mention about Zone.JS which is being used by Angular in order to detect those async events and most probably you will be asked about different way of how to optimise performance of Change Detection like using OnPush strategy for components, running some heavy operations outside of Angular or fork zones.

Dependency injection and how it works

Without understanding how Dependency Injection works in Angular almost not possible to build flexible and testable components in Angular App, so that’s why it is an essential question.

Dependency injection is an application design pattern which was also implemented in Angular. The main idea behind this pattern is when a class  delegates creation and providing of external dependencies to some external resources. 

It is worth to mention that there are 2 type of injectors: Module Injector which can be configured inside @ngModule() or @Injectable() annotations, and NodeInjector which is being created for each DOM element and can be configured inside Component or Directive annotation inside providers property. And these 2 injectors have their own hierarchy.

How Angular resolves dependencies?
When some component declares a dependency Angular tries to find it in its own NodeInjector, if there is no provider for it, Angular asks a parent NodeInjector and then it continues so until it finds a provider. If Angular can not find it goes back to the element where dependency was requested and does the same but for ModuleInjector and also if it can not resolve the token you will get nullInjector exception. More you can learn in my video

Resolution Modifiers
Most probably you will be also asked about “Resolution modifiers” which are @Optional, @Self, @SkipSelf and @Host. Those allow you to control how Angular should resolve dependencies. I have also a video about it

Dependency Providers
And to completely cover the change detection topic it could be a question about class providers which are: useClass,  useExisting, useValue and useFactory. Dependency Providers give you control over dependency creation. I have also covered it quite good in this video

Rxjs. What and Why?

Trust me – it is not possible to build maintainable Angular Application if you do not have decent knowledge of RxJs library. Angular heavily uses it and you have to understand this approach of reactive programming.

RxJs is a library which implements concept of reactive programming and heavily used by Angular application.

What the difference between Observables and Promises
– Observables are lazy, you have to call subscribe() method in order to execute it when Promise is being executed immediately.
– Observables are cancelable and Promises are not.
– Observable can be synchronous when Promise is always async.
– Observable can emit multiple values when Promise emits value only once.

Most commonly used rxjs operators
Here you can name all operators you use: map, switchMap, zip etc. However, try to name operators you really used and know what they are doing because you can be asked about one of those operators you named and it will be quite awkward if you used operators without knowing what the operator does 🙂

What is Subjects in RxJs
Basically Subjects is a special type of Observable which allows to also emit values in a stream which regular observables can’t do. There are also different types of Subjects namely: Subject, BehaviourSubject, ReplaySubject, AsyncSubject. More detailed info about every of them you can find here

P.s Also it makes sense to mention that you should always unsubscribe from streams in case you destroy a component, directive etc in order to avoid memory leak. Also it is good practice to use “async” pipe from Angular

Application optimisation

It is a very important question especially if you go for Senior position. Here you can name every possible trick which would allow you to increase performance of your Angular App.

Basically the answer can be split in 2 groups – Bundle size and Runtime performance

Bundle Size
– Using AOT compilation.
– Lazy load modules which can increase initial bundle.
– Graphic optimisation (BackgroundImages as example)
– Write tree-shakable code.
– Use Lightweight Injection Token Pattern
– Using CDNs.

Runtime Performanse
– Use OnPush strategy in components to avoid unnecessary change detection run. With this strategy Angular will trigger re-rendering only if component inputs have changed.
– Running outside of Angular functions which might trigger change detection but not necessary should trigger re-rendering.
– Using Service Workers
– Use pure pipes instead of functions in component templates.
– Use trackBy function with *ngFor directive.

Thank you for your attention! This is my Top 5 Questions for an Angular Developer Position but it doesn’t mean that you will be asked only these questions. Preparation for an interview requires a lot of “Homework” but it is definitely worth it! I wish you good luck with your upcoming interview and I hope this article has helped you 🙂

P.s If you prefer a video format you can watch my video about this topic.


About the author

Dmytro Mezhenskyi

I am a frontend developer with focus on Angular. Also YouTuber and instructor on Udemy and SkillShare.

2 Comments

Leave a Reply to Dmytro Mezhenskyi Cancel reply

  • Your information about bundle size is incorrect. I wrote same app in React and Angular, and Angular bundle was smaller (25% smaller, but i guess it depends on app).

    • Hi Mario,
      In the article I meant the size of framework itself. When you measure App size it becomes tricky especially with React because unlike Angular it isn’t a fully-fledged framework, so your app size also depends on libs you use, how good optimised they are and many other things.

Tags

Dmytro Mezhenskyi

I am a frontend developer with focus on Angular. Also YouTuber and instructor on Udemy and SkillShare.

Get in touch