Angular, one of the go-to solutions for today’s front-end development, is a powerful tool loved by many developers. Introduced just a few years ago, in 2016, it took the web development world by storm: the Angular team at Google utilized all of their knowledge to design the best framework for creating web applications. Today, Angular, along with React and Vue.js, dominates web development.
To use Angular to its fullest potential, your project will require an Angular developer capable of undertaking this task. When you find yourself looking to hire a remote Angular developer (or maybe an onsite consultant), use these Angular interview questions to improve your hiring strategy and conduct the best technical interview!
Angular Theory and Fundamentals
Angular is a technology that exists within a whole system of other related technologies: JavaScript and TypeScript, front-end and back-end, React and Vue, client and server. For a proficient Angular developer, it is important to understand how these technologies are connected — this will enable them to pass the technical interview with ease. In this section, we gauge whether our job candidate possesses sufficient knowledge of Angular theory and fundamentals.
1. What are the advantages Angular can offer?
When comparing Angular to other front-end solutions available on the market, its advantages can really set it apart. Some of them are:
- Organized front-end structure: each user interface element is a reusable component, working together with modules and services
- Powerful and full-featured: ideal choice for creating a large web app
- All-in-one solution: includes its own router, HTTP, RxJS, observables, and more
- Optimal for Single Page Applications
- Utilizes the MVC (Module, View, Controller) design pattern
- Utilizes TypeScript, benefiting from static typing and many ES6-like features: classes, arrow functions, etc.
- Powerful CLI (Command Line Interface), allowing the developer to generate components and services on the go
2. How can we optimize Angular performance?
According to Google, 53% of mobile site visits are abandoned if pages take longer than 3 seconds to load
. This statistic really makes the developer wonder: is my project sufficiently optimized?
- Unused parts: we can examine whether certain dependencies are pulling unused modules and code; for large dependencies, we can create proxy files and load them instead
- Lazy load the routers, preventing the initial payload from growing as the project gets larger and starts to include more and more features
- Use resource hints: using HTTP headers or HTML link tags, the browser can be informed that certain resource will be required beforehand (a typical example is web fonts). With this method, the pre-requested element will load as soon the CSS has been processed.
- Webpack 4 over Webpack 3: besides faster build time (38% improvement), the 4th edition also allows the developer to choose between different optimization types (production or development) with ease
- DNS and SSL check: Internet providers often create bottlenecks for the project via slow DNS and SSL, so it makes sense to check their performance and configure them correctly
3. What are the pros of using Single Page Applications?
Although web applications should be developed according to “content first” approach (meaning the focus of the web app should be its content, not its platform or technology), we can still take a look at great features of SPAs — and their drawbacks. Their pros are:
- Speed: as most resources (HTML, CSS, and JS) only have to load once, only data is left to be transferred
- Great for mobile: SPAs make use of a shared code, allowing both web and native mobile apps to reuse many of its components — this creates a universal user experience
- Simple development: the developer is not forced to code how pages are rendered on the server side and can start developing a project even without a server
- Effective caching: as SPAs only send a single request, they can store all data and cache local storage in an effective manner
4. What are the cons of using Single Page Applications?
However, there are also some cons:
- SEO problems: due to SPAs functioning not like regular web pages, search engine optimization is much harder. Unless the developer has specifically designed certain workarounds, search engine robots will not be able to index SPAs correctly — they may not be able to work with JavaScript parts of the website at all. One possible solution is designing robot-specific HTML pages that will function as copies of the original SPA, although this is in return leads to more maintenance problems
- Reliance on JavaScript: should the user disable JS execution in their browser, SPA is effectively rendered useless
- Memory leaks: this can be caused by improper JS code, slowing even a powerful device down
- Confusing user experience for some users: as the concept of SPA is only a recent development, many users may find it difficult to navigate such pages. SPAs typically do not offer the option to go back to a previous page in browsing history, oftentimes leading to the user being confused and even losing their data (to remedy this, the beforeunload event should be used to warn the user about not saving their data)
5. What are the new features of Angular 7?
With this version come quite a few important advancements:
- Dependencies now support Typescript 3.1, RxJS 6.3, and Node 10
- Applications can now utilize the Bundle Budget feature, warning the developer should the application size be larger than its pre-defined limit
- Improved usability and performance thanks to the support of the native select element in
mat-form-field - Improved performance thanks to virtual scrolling: a method of only rendering elements in the list which are visible at any given moment
- Drag and drop: adding this feature to an item will allow us to manage how the element can be dragged, rearranged, and reordered.
6. What is a module?
Modules are logical boundaries in your application; the application is divided into different modules to separate the functionality of your application. The NgModule decorator has three options:
- The
importsoption is used to import other dependent modules. TheBrowserModuleis required by default for any web-based Angular application - The
declarationsoption is used to define components in the respective module - The
bootstrapoption tells Angular which Component to bootstrap in the application
7. Which Lifecycle Hooks are available for use?
The Angular application goes through an entire set of processes or has a lifecycle right from its initiation to the end of the application.
ngOnChanges: When the value of data-bound property changes, this method is calledngOnInit: This met is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happensngDoCheck: This one is used for the detection and to act on changes that Angular cannot or detect on its ownngAfterContentInit: This is called in response after Angular projects external content into the component’s viewngAfterContentChecked: This is called in response after Angular checks the content projected into the componentngAfterViewInit: This is called in response after Angular initializes the component’s views and child viewsngAfterViewChecked: This is called in response after Angular checks the component’s views and child viewsngOnDestroy: This is the cleanup phase just before Angular flushes the directive/component
8. What is the difference between Constructor and ngOnInit?
TypeScript classes have a default method constructor which is normally used for initialization purposes. ngOnInit, on the other hand, is specific to Angular, especially handy to define Angular bindings. Even though constructor gets called first, it is preferred to move all of your Angular bindings to ngOnInit method. In order to use ngOnInit, you need to implement OnInit interface as below,
export class App implements OnInit{
constructor(){
//called first time before the ngOnInit()
}
ngOnInit(){
//called after the constructor and called after the first ngOnChanges()
}
}
9. How can we categorize data binding types?
Binding types can be grouped into three categories categorized by the direction of data flow.
- From-source-to-view
- From-view-to-source
- View-to-source-to-view
10. What are dynamic components?
In these, components’ location in the application is not defined at build time; i.e, they are not used in any Angular template. But the component is instantiated and placed in the application at runtime.
11. In what sequence are Lifecycle Hooks organized?
OnChange() – OnInit() – DoCheck() – AfterContentInit() – AfterContentChecked() –
AfterViewInit() – AfterViewChecked() – OnDestroy()
12. When should we use {{}}?
When we want to utilize string interpolation: combining these brackets with an HTML tag, we can represent certain data from a component. For instance, in {{variableName}} surrounded by <h1> tags, the ‘variableName’ refers to typescript (component) data which represents its value on the HTML template.
Angular Coding
Of course, the candidate’s pure coding skills are no less important — so in this section, we present them with coding challenges to see how the interviewee approaches such problems.
13. Using a CLI, generate a class in Angular 7
ng generate class Test [options]
This will generate a class named Test.
14. Using a constructor and a method, create a basic TypeScript class to greet the user
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
15. What is ngOnInit () and how can we define it?
ngOnInit() is a lifecycle hook which is called once Angular finishes initializing the entire set of a directive’s data-bound properties. This is how it is defined as:
Interface OnInit {
ngOnInit () : void
}
16. Demonstrate how ngFor can be used to display all items from an array “items” in a list with < li >
<li *ngFor=”let item of Items”>
{{item}}
</li>17. How to build the project with watch enabled using angular-cli? Write a command
ng build -output-path dist --watch
18. Define “Page not found” route
// src/app/app.module.ts
const appRoutes: Routes = [
// other routes
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(
appRoutes
)
// other imports
],
})
export class AppModule { }
19. Provide examples of different ways to define an Angular template
Template inline:
@Component({
selector: 'my-app',
template: '<h1>Template inline</h1>'
})
export class AppComponent {}
Separate file:
@Component({
selector: 'my-app',
templateUrl: 'app.component.html'
})
export class AppComponent {}
// app.component.html
<h1>Separate file</h1>
20. Modify the code so that the component displays the following text:
The Unix epoch is the number of seconds that have elapsed since JAN 1, 1970
Source code:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<p>The Unix epoch is the number of seconds that have elapsed since {{ unixday }}</p>`
})
export class AppComponent {
unixday = new Date(1970, 0, 1); // Jan 01 1970 00:00:00
}
Answer
// …
template: `<p>The Unix epoch is the number of seconds that have elapsed since {{ unixday | date | uppercase }}</p>`
//…
21. Create a component with a button that will show and hide text by clicking
@Component({
selector: 'my-app',
template: `
<button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
<div *ngIf="show">Text to show</div>
`
})
export class AppComponent {
show: boolean = true;
}
Conclusion
Thanks to these Angular interview questions, your hiring strategy has just got better! For more articles in our “Top Interview Questions” series, check these blog posts out:
Python Interview Questions
Java Interview Questions
JavaScript Interview Questions Part 1
JavaScript Interview Questions Part 2 (Part 3 is coming, so stay tuned)
Django Interview Questions
Vue Interview Questions
React Interview Questions
AngularJS Interview Questions
