Angular 2 Interview Questions​

The Ultimate Guide to Job Interview Questions

Hire Developers
Hire the most talented developers with our online programming tests!
START FREE TRIAL

Angular 2 Interview Questions​

Angular Framework is one of the go-to-solutions for SPAs or Single Page Applications. But it didn’t start out like that. The initial release of the framework was back in 2009 by none other than Google, but due to performance issues and other shortcomings, the entire framework was rewritten. If you have an Angular application up and running, you would have noticed the .ts extension instead of .js.

That’s right, the entire Angular framework is written in TypeScript, which is a superset of Javascript providing type-safety for your application.

The job market for Angular is booming right now and if you’ve got an Angular interview coming up, you’re in the right place. The following Angular interview questions take you from the basics to some of the complex concepts that Angular has to offer.

 

 

Check out the Angular question below. There are multiple ways to solve it, so the candidate’s choices can reveal how they code. How would you solve it? Click on the “Instructions” tab and try it out:

What are the differences between AngularJS and Angular?

This is one of the questions that every developer should know. Due to its confusing version history, it is very important to know the differences between the two. Angular is not an upgrade or improvement over the former but is completely rewritten. This irked many developers as they had to completely rewrite their existing web applications. Angular is written in TypeScript which is a superset of Javascript. You don’t have the $scope concept in Angular which was widely found in AngularJS.

Angular offers what is known as the AOT compiler Ahead-of-Time compiler. With ahead time compilation, you get faster rendering because the browser gets code that is precompiled. Also, the size of the framework itself reduces because you don’t need to download the compiler. Other advantages include better security and earlier detection of template errors

Good to hear:

  • Clear understanding between the two
  • The new features that have been added along with Angular
  • The shortcomings of AngularJS

Red flags:

  • Believes both are same

How does an Angular application written in TypeScript run on a browser?

There is one very important term that you need to understand here and that is transpilation. Typescript is an open source programming language developed and maintained by Microsoft. To put it simply, browsers don’t support TypeScript, they support Javascript. So, in order for the browser to understand our code, we use a transpiler to convert it into Javascript. We all know that compilation involves converting a high level language into machine understandable code. In transpilation we convert a high level language to another high level language.

Your project will typically contain a tsconfig.json file that has the configuration information for transpilation.

{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": [ "es2015", "dom" ], "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true } }

The first option target specifies the version of ES, by default it is ES5. It might throw an error if you set it to ES6 since all browsers are not fully compatible with it yet. You can read more about the compiler options here.

Good to hear:

  • Ability to explain what transpilation is
  • Examples of a few transpilers

Red flags:

  • Confused between compilation and transpilation

Explain the execution cycle of an Angular application

Every Angular application will have a component tree. The root component is known as the Application component. Let’s take a look at the constituents of the component tree and what makes up a component.

 

 

The first two files contain the styling and structure of the app component. The whole of the code uses import statements to makes parts of code available and export statements to make the code available to the rest of the application.

import { enableProdMode } from '@angular/core'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic; 

import { AppModule } from './app/app.module'; 
import { environment } from './environments/environment'; 
 
if (environment.production) { 
enableProdMode(); 
 } 

platformBrowserDynamic().bootstrapModule(AppModule) 
.catch(err => console.log(err)); 
;

The app.component.ts file contains the code related to the app component. The @Component annotation marks the class as an Angular component and we have some additional metadata along with it. The selector determines the name of the tag that is to be used, to render that component. The templateUrl specifies the target HTML file’s location and the styleUrls specify the location of the CSS files. Components are the building blocks of Angular applications and a tree of these components make up the entire application.

import { BrowserModule from '@angular/platform-browser' ;
import { NgModule from '@angular/core'; 
 
import { AppComponent from './app.component'; 
 
@NgModule({ 
declarations: [ 
AppComponent 
], 
imports: [ 
BrowserModule 
], 
providers: [], 
bootstrap: [AppComponent] 
}) 
export class AppModule { }

The next file is app.module.ts. Every Angular application will have at least one of these files. The @NgModule annotation identifies the AppModule as an Angular module and takes in the metadata to compile and launch the application. The imports consist of all the imported modules, by default, we’ll have only the BrowserModule that specifies the application should run in a browser. The declaration consists of all the created components. Bootstrap determines the components that are to be created and inserted into index.html.

import { Component } from '@angular/core';

@Component({ 
selector: 'app-root', 
templateUrl: './app.component.html', 
styleUrls: ['./app.component.cssl']
}) 
export class AppComponent { 
title = 'first-app'; 
}

If you thought that app.component.html is what is loaded on the browser, you are wrong. On executing an Angular application, the main.ts file is executed. On going through the file you will notice that AppModule is bootstrapped in main.ts, which tells the application to check the AppModule for more information. Inside the AppModule, you can see a bootstrap array, which will point to the AppComponent which will have its selector mentioned inside the @Component annotation and its related code in the TS file. The selector will of the form ‘app-component_name’, say app-root. The index.html will only have this particular selector in it without any of the other code. You can check it out by viewing the source of the application when it runs on the browser.

 

 

Good to hear:

  • Should know the execution cycle of an Angular application
  • Should have a clear understanding of the component structure
  • Explain each part of the component clearly

Red flags:

  • Can’t differentiate between the different parts of a single component

What is Angular CLI? Can you explain some of the most commonly used commands?

We have our very own command line interface (CLI) that comes with Angular which expedites the process of web development. The CLI helps in bootstrapping a project. Once you create a new project, it generates the initial project structure with a root NgModule, a root component. The project will use the webpack loader for bundling, module loading and minifying the dependent code. Another cool feature is the live server that it can start up. It automatically looks for changes to files and reloads the page instantly.

We also get bootstrapped jasmine test spec files. From the CLI, we can use a single command to run all the tests. Similar to the live reload on change, the CLI will detect changes to any file and re-run all the tests. We can also package our application to be deployed onto a server.

Some of the most important and commonly used commands are as follows:

ng new project-name: A project with the specified project name will be bootstrapped with ng

ng serve: This command will bundle all the code, build the application and will be available from localhost:4200.

ng generate component component-name: This will generate a component with the specified name


The ng generate command can be used along with components, directives, pipes, services, classes, interfaces and enums

Good to hear:

  • Previous experience with the CLI
  • Knowledge of the commands

Red flags:

  • Have never used the CLI
  • Cannot explain the commands
  • Cannot give short hand representations of the commands

Compare between one-way data binding and two way data binding

Before we start off with two way data binding, let’s take a look at one-way data binding. One way data binding means that the updation of data occurs only in one single direction. It can be from Angular to HTML or from HTML to Angular, but not the other way around at the same time. Two way data binding is more like talking on the phone, wherein both people can speak at the same time. In the same way, updation of data can occur in both directions at the same time.

</p>
<div class="container"><input name="" type="text" /> <br />
<h1>Hello {{name}}</h1>
</div>
<p>

The ngModel syntax is famously known as ‘banana in a box’ and its actual sugar syntax for [ngModel] followed by (ngModelChange). With two way data binding you can bind data between a template form control and a variable in your component. The advantage is that, if we change the value of the variable in the form control, it automatically changes the value of the variable in our component. And if we change the value of the variable in the component, it automatically changes the value present inside the form control.

Good to hear:

  • Explain the concept with a proper example
  • Also explain one way binding

Red flags:

  • Have never heard of one way or two way binding
  • Cannot cite examples

Contrast between HTML attributes and DOM elements

These two terms might not look related but understanding them is very important to understand how binding works in Angular. As you know, HTML defines the structure of the page. The divs, paragraphs, navbars, headers, and footers are all taken care of by HTML. The browser goes through the HTML code and creates a DOM (Document Object Model). Changing an HTML attribute updates the webpage only when you refresh it, but when you change the DOM, it happens instantly.

Let’s take an example of the hidden attribute in HTML. If you add the hidden keyword to any element in HTML, it will instruct the browser to hide that particular element. Even if its set to true or false, it’ll hide the element, because it is the word ‘hidden’ that counts. But if we use the [hidden] property in Angular through input property binding, what it does is, it modifies the DOM properties and not the HTML attribute. The key takeaway from here is that Angular manipulates the DOM properties rather than the HTML attributes.

Good to hear:

  • Clear understanding of the question and a prompt answer
  • Understand the difference between HTML attributes and DOM elements

Red flags:

  • Cannot understand the question

What are directives in Angular? Explain with examples

A directive is a custom HTML element that enhances the existing capabilities of HTML. By default, we have two directives that come with the BrowserModule. They are ngFor and ngIf. NgFor is a structural directive, meaning that it changes the structure of the DOM. It is the equivalent of ng-repeat from Angular 1s.

</p>
<ul>
<li>{{ person.name }}</li>
</ul>
<p>

Imagine we have an array of people with a name attribute. We loop over each person in the people array with a looping variable ‘person’ and then print out the name of the person in a list.

NgIf is used to remove or display an element based on an expression. If the expression evaluates to true, the element is displayed, otherwise not. The difference between the HTML attribute hidden and ngIf is that in the former, the element is still present in the DOM, but not rendered. But with ngIf the element itself is removed.

</p>
<ul>
<li>{{ person.name }} ({{ person.age }})</li>
</ul>
<p>

Take the previous example itself, but along with the name attribute, we now also have age. Once we loop through each person, only people less than 30 years of age will be displayed with the ngIf condition.

Good to hear:

  • Give an example for each of the directives
  • Should have a grip over the syntax

Red flags:

  • No idea about the syntax
  • Don’t know what directives are

What are fat-arrow functions? Explain with an example

Fat arrow functions are sugar-coated anonymous functions. It does exactly the same thing as anonymous functions, but the syntax is slightly different. It might need a bit of getting used to, but once you down that, it becomes extremely simple to write them. Let’s contrast between the two. Below we have an example of an anonymous function:

let add = function(a, b){ return a+b; };

The above function is self explanatory. Here is an example of a fat-arrow function:

let add = (a, b) =&gt; a + b;

What do you think of that? The whole function has been reduced dramatically and we don’t even need to use the return keyword if there’s only one a single line of code.

Good to hear:

  • Proper explanation of fat-arrow functions
  • Difference between anonymous functions in terms of syntax
  • Examples

Red flags:

  • Have never heard of fat-arrow functions
  • Cannot give examples

What are pipes in Angular and how do you use them?

If you want the data to be transformed only in the template, you use pipes. In all other scenarios, you should implement data formatting within the model itself and not through pipes. The pipe symbol |, is used to implement pipes. Angular provides a lot of built-in pipes. There are pipes for currency, uppercase, lowercase, date, decimal, percentage, JSON, slice and async. Let’s take a look at a few examples to see how we use pipes in Angular.

 

 

The first value is the actual value that you want to format. This is followed by the pipe symbol and the name of the pipe, in this case, currency. Then we specify the currency we want to convert it to. Notice the boolean value at the end? That is to determine whether the output should have the dollar symbol or not. By default it is true and you will see the $ symbol instead of USD.

We have one more example of the date pipe which is very widely used. Consider we have a date object in one of our components. By default, this is the output we get:

 

 

Now, if we apply some of the date pipes available, the output changes to:

 

 

Most of the outputs are self-explanatory. ‘yy’ represents the year with 2 digits and ‘Hm’ represents the current hour and minutes in military format.

Good to hear:

  • Should give examples for each pipe
  • Have an understanding about pipes are and where they are used

Red flags:

  • Don’t know about pipes
  • Cannot give examples

Conclusion

With those interview questions, we’ve covered some of the core fundamentals of Angular and also a few topics that people generally overlook. Remember, the clarity with which you explain the concepts and the examples that you can cite to the interviewer will take you all the way.