Over the last few months, we’ve seen many companies go through some major layoffs, with thousands of developers being laid off. While it may be in smaller numbers, there are still companies out there hiring as well. Hopefully this will be a help to anyone interviewing for Angular jobs, as well as those on the interviewing side.
Beginner Angular Questions
Let’s start with a few beginner Angular questions that you may get asked. These are appropriate for anyone in their first couple years of working with Angular.
What is an Angular component?
An angular component is the most basic building block of an Angular component. It is a Typescript class, combined with an HTML template for the component, and a related stylesheet. It can include Inputs and Outputs to interact with other components, and can allow the user to interact with the application.What is a service in Angular?
What are services used for? A service in Angular is a class that is instantiated and can be used throughout the application to provide functionality that can be easily reused. Generally, it is recommended to perform as much logic as possible in services, and as much data access in services as well, rather than directly in the components.What is an Angular pipe?
A pipe in Angular is a class that provides a way to alter the output of data on the page. Ideally, the pipe produces the same output for a given input each time it’s run, and produces no side effects. Examples of pipes are changing a string to uppercase or lowercase, formatting currency and numbers, or formatting telephone numbers. There are many built in pipes available to use, and you can also generate your own pipes for custom functionality.What is an observable? What is one way that Observables are used in Angular?
Observables are a part of reactive programming, an asynchronous programming paradigm that allows you to work with data in streams. Reactive programming provides Observables, which makes it easier to compose asynchronous code in your application. Observables are present in many parts of Angular, including Outputs and all HTTP calls through the built-in HttpClient.What is the difference between a component and directive in Angular?
A component is a directive with a template. So a directive is a class that provides extra functionality to HTML while using the host HTML as display. There are two types of directives besides components: attribute and structural. Attribute directives change the appearance or behavior of an element. An example might be a directive that highlights text. Structural directives alter the DOM by adding or removing elements.How would you display a variable from an Angular component in the template?
The displaying of a variable from an Angular component’s class into the HTML is called interpolation. By default, interpolation is done by wrapping an expression (usually a class member variable) in double curly brackets.What is the Angular CLI, and what are some benefits of using the CLI?
The Angular CLI is a command line interface, or tool, provided by the Angular team that allows you to create Angular applications, components, services, pipes, etc. by generating a lot of code for you in a conventional manner. It also will build the application for deployment, and serve it locally for you while working on the app.
There are many benefits of using the CLI. A couple were already mentioned: code generation, build setup, and local development setup. In addition, it ensures that your application is organized in a conventional manner, which allows other developers to feel comfortable working on your application.What is a lifecycle hook? What are some of the most common lifecycle hooks, and when do they run?
Lifecycle hooks are methods that can be run on each Angular component at different times between creation and destruction of a component.
Some of the most common hooks are OnInit, OnChanges, and OnDestroy. OnInit runs after component is created. It’s run once in the lifecycle of the component. OnChanges is run any time the Inputs of the component change. The first time it’s run is before OnInit. OnDestroy is run once right before Angular destroys the component.
Intermediate Angular Questions
Here are some more intermediate Angular questions. These are appropriate for developers that have used Angular for around 3–6 years.
What are some of the differences between a standard Angular component and a standalone component?
One of the biggest differences between standard components and standalone components is that standard components need to be included in an NgModule to be used. If they’re going to be used outside the module they’re declared in, the NgModule needs to be included in the other module.
Another difference is that with standard components, any functionality that needs to be brought in from Angular packages or third party packages need to be made at the NgModule level. For example, if you need to use the *ngFor directive, you need to import CommonModule from the @angular/common package in the NgModule. If you’re using a standalone component, these imports can be made in the component itself.What is dependency injection in Angular?
Dependency Injection is a software design pattern in Angular that allows the creation of dependent objects outside of a class and provides those objects to a class through a constructor or a property.
This means that a class doesn’t create its own dependencies. Instead, they are injected from outside the component by the framework. This makes the code more maintainable, testable, and flexible. It also helps in decoupling the components, making it easier to change or replace a particular component without affecting the entire application.How do you get access to a template variable in a component?
Template variables in Angular are a way to get access to HTML elements and access them both in the Typescript class or elsewhere in the component. They are declared by using the hash symbol, followed by the name by which you want to reference the variable. For example, you might get access to an input element by adding #myInput on the <input> element.What is an example of why you would need a template variable in a component?
Template variables can be used in many ways. For example, you may need to get the value of an <input> element. Template variables are also used with the *ngIf structural directive to show a portion of the template in the case that the comparison expression is falsy. Another situation where you may use template variables is with the ViewChild decorator in the Typescript class, which gives you access to the HTML element in the component.What is the recommended way of subscribing to observables?
The best way to subscribe to observables is by using the async pipe. The reason for this is that it can be easy to leave open subscriptions to Observables in your code, which cause memory leaks and poor performance. The async pipe automatically subscribes and unsubscribes to observables for you.What is a structural directive? Give an example of a structural directive.
A structural directive is one of the three types of directives in an Angular application. Structural directives alter the DOM of your application. Examples include the *ngFor and *ngIf directives.What is ng-container? What are some reasons you would need to use it?
ng-container is a special type of Angular component provided by the framework that doesn’t have a DOM representation itself. It allows you to group HTML elements together without adding extra HTML to the DOM. It’s useful, for example, when you want to show or hide some sibling HTML elements on the page with *ngIf without wrapping them in a div or other HTML element. Another situation is if you need to output an ng-template on the screen with the ngTemplateOutlet directive.How can you lazy load portions of your Angular app?
Lazy loading portions of your application is accomplished through proper routing configuration. In the route configuration setup, you can import a new module. If you break your application up into different feature modules, you can import each module into the main AppModule. The Angular CLI will build the application and split it up based on modules. Those modules will only be downloaded when the application needs it. This produces smaller initial bundles and improves performance.
Advanced Angular Questions
Finally, here are some advanced interview questions. These would be appropriate for developers that have used Angular for several years and have a solid grasp of the framework.
What is the Subject as a Service (or Service as a Subject) pattern? Why would you need to use this pattern?
This pattern is a technique where you use the RxJS Subject, or any of its variations, inside a shared service to enable communication between different parts of the application. This allows sibling components to communicate together without requiring the parent component to hold the data and pass it back and forth between the two components, for example. It is a way to manage state in the application, like display of certain UI elements. Some examples where this pattern can be helpful is a message service that shows different messages or alerts on the screen. Any component or service in the application can use exposed methods on the service to add or remove messages to the queue. Another time it can be helpful is showing or hiding a slide out menu.What are some ways that you can manage state in your application?
The above mentioned subject as a service pattern is one way to manage state in your application. There are also multiple third party state management libraries, the most popular of which is NgRx. NgRx uses a global store where your application state is kept. Events are dispatched and the data is updated based on those events.What can you do when architecting your application to organize it in a manageable way?
There are no real “right” answers to this question. However, here are a handful of tips and tricks:
Properly use the Angular CLI, or Nx CLI if you’re using Nx, to create anything in your Angular application. These CLIs implement best practices and enforce consistency in your code. Split features of your application up into separate modules (or libraries). This allows you to lazy load your code, for one, and also makes it easier to find a given component based on its purpose.
Embrace the practice of smart and container components. Split your components up into pieces as small as possible, and then have components that simply display data as opposed to maintaining logic. If this is done, it’s easy to make reusable components that can be refactored easily.
When possible, move logic for your application into services, pipes, and utility functions. This increases the ease of testing your application and simplifies refactoring when necessary. Write appropriate unit tests on the portions of your app that actually contain logic. Don’t write unit tests just to have coverage, or to test framework functionality. Also make sure to write UI tests with a product like Cypress. These UI tests, whether on individual components or end to end tests, ensure that functionality is not broken when changes are made to the application and increase confidence that the application works when deploys are made.What are injection tokens, and why would you need to use them?
Injection tokens are a special type of dependency for your Angular application. They are used for values that are needed through dependency injection but don’t have a runtime representation, like if you need to inject an interface or a string value to a component or service for example. One time you may need to use this is if you need to inject some configuration for a service or component.When you are choosing a third party library, like a component library, what are some things to look for before including the library in your project?
This is another question that doesn’t have one right answer, but here are some tips and tricks.
One of the most important things to look for is activity in the project’s repo. If there are a lot of issues that have been reported, but no apparent activity on the project, it’s probably not a good idea to use the library. You want a package that is well maintained, even if there are quite a few issues reported.
Another good hint is the number of installs that the package has had over a given time period, like the last several months or year. NPM installs can be deceiving, and they don’t mean everything, but if many people are using the package, it should allow you to get help if and when you need it. It also bodes well for future support. Another thing to check is to see how many past versions of Angular the library supports and, if possible, how long it took for the package to update to the next version of the package. You don’t want to be stuck on an old version of Angular because you chose the wrong third party package.
If the package is a component library or something similar, ensure that it plays nicely with your product’s style guide. If you’re using Angular Material and the component library uses Bootstrap, that might not be the best choice of package, no matter how well it’s supported.How can you use RxJS to manipulate and change data that comes back from the API?
Effective use of RxJS operators is important to retrieve data from an API and manipulate it or prepare it for use in the component. Some popular RxJS operators for this are filter, map, and switchMap. There are many others, but these three are extremely useful.What is a good use case for RxJS combineLatest?
combineLatest is extremely helpful when you have multiple RxJS observables that are providing separate yet possibly related data that need to be combined and displayed on the page in some way. When one of those individual streams emits new data, the pipeline will run again and reevaluate the data for the component. Other methods will only evaluate the data once, which may not always work. An example of when combineLatest is helpful is when you need to make an HTTP call based on some query params and route params in the route URL. Both types of parameters can be accessed and combined to make the HTTP call. Proper use and understanding of combineLatest, and other RxJS operators, makes it easier to react to user and other inputs to your app.
Conclusion
This is just a small list of questions that you can ask, or may be asked, when in an interview for an Angular position. If you’re studying for an interview, this hopefully gives you a good jumping off point as well for your studies. Even if you aren’t interviewing, this should hopefully be a good reference for increasing your knowledge of different Angular topics. Use these as a starting point, and dive deeper into the topics that you may need in your application or that just interest you. Write blog posts on the topics, give presentations at local meetups or conferences, or make YouTube videos.
Angular Interview Question Guide was originally published in ngconf on Medium, where people are continuing the conversation by highlighting and responding to this story.