authors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.
Bo is a front-end developer with extensive expertise in Angular. She has served as a senior software engineer and Angular coach on teams across many European companies and presented at AgentConf, Devoxx, AngularConnect and more.
PREVIOUSLY AT
With its highly scalable architecture, many web development teams choose Angular to create efficient, sophisticated single-page applications. But, hiring Angular developers is easier said than done. While there are many candidates out there, the key to a seamless development experience is finding a great Angular developer, one who applies best practices and advanced techniques to meet high-quality coding standards.
Understanding key concepts about Google’s popular front-end framework will prepare you to confidently interview prospects and hire the highest-caliber developers—those who strive to bring a codebase to the next level. This article lays out the crucial skills and knowledge that a premium Angular professional should have.
High-quality Angular candidates will be those who:
Note: This guide applies to the latest Angular versions, which are no longer known as AngularJS—“Angular” has applied since Angular 2. If you’re hiring for the maintenance or upgrade of a legacy AngularJS web application project (the 1.x branch), check out How to Hire a Great AngularJS Developer.
The Angular framework runs on TypeScript, and all code written inside an application is transpiled to JavaScript. TypeScript is a superset of JavaScript that compiles to plain JavaScript. Angular code is represented by this superset.
A lot of developers learn Angular but lack a good understanding of core concepts that are required by JavaScript, TypeScript, HTML, or CSS. If these foundations are missing, developers are apt to use inappropriate workarounds and thus multiply a project’s technical debt.
So, ask the candidate if they have knowledge of HTML5 and CSS3. A good Angular developer does not need to be an HTML or CSS expert as long as someone else on the team is, but they should understand these key concepts:
span
and a div
Angular developers should have a robust understanding of JavaScript and TypeScript, as well as some HTML and CSS skills.
Good design is the key to good application architecture. Ask your candidate how they make their designs and compare their thinking with these ideal considerations:
The full specifics of a particular design are less important than whether the candidate is in the habit of making designs. All designs are temporary so, for most applications, documentation can be as simple as a photo of a sketch on a whiteboard unless formal documentation is required. At a later stage, the developer can generate the technical design from code (with the right tools) to make it clear how all the parts interrelate.
Ask your candidate what they know about the Angular component lifecycle. Their answer should include three lifecycle hooks: ngOnInit
, ngOnChanges
, and ngOnDestroy
. As the names suggest, ngOnInit
is called at component initialization, ngOnDestroy
is called when the component is destroyed, and ngOnChanges
is called when an attribute changes. The latter can occur before ngOnInit
—when the attribute is already assigned before the component is completely initialized, then ngOnChanges
is executed before ngOnInit
.
If the candidate also knows about ngDoCheck
, ngAfterContentInit
, ngAfterContentChecked
, ngAfterViewInit
, and ngAfterViewChecked
, they know all the change detection hooks for components and are a step ahead.
A good follow-up question to ask about any of the hooks: “When does this change detection happen?”
A lesser-known lifecycle is the provider lifecycle, which has only one hook: ngOnDestroy
. This is called only when the provider is attached at the component level, in which case it gets destroyed together with the component. If it is provided at the root or module level, it will never get destroyed.
The constructor of a provider will be executed the first time the provider is used, so it is possible that the constructor will never be executed. Quiz your candidate about this possibility—in real-world scenarios, it can be an often-overlooked source of bugs!
In an Angular application, reactive programming is often the hardest part to understand. Many people think in a procedural way when they start programming a piece of code, assuming that it’s easier to understand and work with, like the steps of a recipe.
Reactive programming involves reacting to things we cannot control, and that may occur in an unpredictable order. Although we react to things in this way every day—for instance, braking when the car in front of us suddenly stops—many developers find it difficult to take a reactive approach to programming.
But, everything that happens inside an Angular app is based on reactive programming. Some examples of reactivity in in an Angular shopping application, for example, may include:
Note that these things happen automatically, and do not need a page refresh to appear. In an interview, ask the candidate to describe how they applied reactive programming in an application they developed. If the candidate describes solutions that involve refreshing the page or manually calling ChangeDetectorRef.detectChanges()
to refresh a component, consider that a yellow flag.
Less-experienced developers may sometimes find that the code they write in their Angular applications does not get executed. Seasoned Angular developers can identify a common cause: There is no subscription on an Observable
, a mainstay object type in reactive programming. Only with a subscription will back-end calls or other reactions be executed.
There are two ways to create subscriptions: Developers can use the async
pipe or the subscribe
method. But there is a caveat: If developers do a manual subscription (with the subscribe
method), the Observable
will need to be destroyed manually (although there are some edge cases where it happens by default). Developers can destroy Observables
in multiple ways:
async
pipe, where possible (this destroys the Observable
when the component is no longer needed).unsubscribe
method on an Observable
at the end of the lifetime of the component (ngOnDestroy
).takeUntil
operator inside the pipe
operator, and using a subject (i.e., something named like destroy$
). In this case, the subject emits destroy$.next()
at the end of the component’s lifetime (ngOnDestroy
). After receiving the destroy event, the takeUntil
operator will no longer accept events from the Observable that it’s bound to so that its subscriber logic will no longer be triggered. For an example, see the takeUntil operator in section 2. Similar functionality can be exposed with the take
and takeWhile
operators.until-destroy
library or another third-party library like SubSink can be used to smoothly unsubscribe from observables once a component is destroyed.Another potential pain point with reactive programming comes from memory leaks and multiple calls to the back end. Ask the candidate if they are aware of these problems, and how they would normally solve them. Memory leaks can occur by failing to unsubscribing from Observable
s as described above. Multiple calls to the back end because of multiple subscriptions on a back-end call can be solved by sharing the Observable
.
All single page applications have a state, and this state is available somewhere on the front end. But what is a state, exactly? It contains all the variables specific to the current user experience. For example, authenticated user details like name and profile image URL, a specific menu item selected, or an on-screen list such as a list of shopping cart items.
In an Angular application, there are three main types of front-end state to consider:
State | Scope |
---|---|
Application | General information available to the entire application such as authenticated users, user roles, menu items, or a user’s shopping basket. Anything that changes in this state will change for the whole application. |
Module | Information available to the entire module where a service is used. Every time a developer reuses a module with providers, it creates a new instance of each provider. The state will never be destroyed and will only be created the first time a given provider is used. |
Component | Information available to a certain component. Components are the smallest parts of an application. An Angular application can have multiple component states, but they will only be accessible through each component. The state will be created when the component is created and destroyed when the component is destroyed. |
A good understanding of what state is, and when it should be loaded or reloaded, is one of the key skills to look for when hiring Angular developers. This is prime territory to explore if your team has the opportunity to review some example code written by the candidate. If the applicant is using a library for state management:
effects
, action
, reducer
, store
, and selector
in the related code.Let’s look at the general flow of the application state in NgRx (which is similar to that of Akita and other libraries) as an example:
If the developer creates their own state with services, their competency in state management can be harder to identify:
state
or effect
.You can’t always find out everything you need to know by investigating an applicant’s code. Add these queries to your question list to investigate how well potential Angular developers understand state:
state
—and how? This is a solid starting point to understand their experience with state; don’t be afraid to probe for specifics.Developers who understand the various state types will avoid these side effects:
It doesn’t take long before the global store becomes a disorganized mess, and it’s not clear where each part of the mess originates, making it harder to debug and maintain.
Automated testing should be considered as important as code quality for any Angular web application. One of the major reasons for programmers to write tests is to document their code: If a new developer joins the company, the business logic and certain UI flows should be clear based on the test suite’s expectations. Also, automated testing reveals bugs early in development.
Ask your potential Angular developer three testing questions:
Angular developers have choices when it comes to automated testing frameworks. Unit testing can be performed through Jest or Jasmine and Karma. Every Angular developer should be familiar with Jasmine and Karma. Jest is also common—it’s generally faster and features more advanced testing options.
The E2E testing standard for an Angular application is Protractor, the default tool generated by the Angular CLI. An alternative is Cypress, a promising E2E testing framework with a lot of options.
Be sure that the candidate has in-depth knowledge of at least one unit testing framework and one E2E testing framework.
Great Angular developers may not always use the latest version in development for various reasons, but they should know the Angular release schedule so they can stay abreast of changes and be prepared to switch. One way to assess this is to ask the candidate if they are familiar with the release strategy of Angular. Angular aims for a major release every six months, typically around February and May. An Angular release is under “active support” during the first six months after its release date, and is under “long-term support” for 12 months after its release date. This is a fairly tight timeline compared to some other technologies, making it particularly important to stay current.
You might also do some research about the most recent version of Angular, and ask your candidate about the benefits of these new features. For example, around the time that Angular 14 was released, you might have asked the candidate about:
NgModule
, and they directly manage their own dependencies. As a result, they can be depended upon directly without the need for an intermediate NgModule
.FormControls
, FormGroups
, and FormArrays
are type-safe across the entire API surface. This enables safer forms, especially for deeply nested complex cases.Every web development project and team is different and will place different importance on the various aspects of an Angular developer’s skills and knowledge. But understanding the foundational topics we’ve presented here will allow hiring managers to participate meaningfully in hiring—even in the more technical evaluations.
The Toptal Engineering Blog extends its gratitude to Ramazan Yıldız for reviewing the technical concepts and diagrams presented in this article.
Angular is a popular TypeScript-based framework that is gaining traction. If you are looking to build a professional web application with an engaging user experience, you may want to choose an Angular developer.
An Angular developer, at their core, is a specialized web front-end developer. They will perform tasks such as constructing an application’s user interface, handling APIs, collaborating with back-end engineers, and writing unit tests.
JavaScript and TypeScript are commonly used across web applications, and Angular frameworks are especially in demand. As such, Angular developers are highly sought after.
A great Angular developer needs to understand various topics, including Angular foundations (such as TypeScript basics), component lifecycles, observables, state management, and testing.
Kortrijk, Belgium
Member since February 5, 2020
Bo is a front-end developer with extensive expertise in Angular. She has served as a senior software engineer and Angular coach on teams across many European companies and presented at AgentConf, Devoxx, AngularConnect and more.
PREVIOUSLY AT
World-class articles, delivered weekly.
World-class articles, delivered weekly.
Join the Toptal® community.