Home

Awesome

Angular-Interview-Questions

This file contains a number of Angular interview questions that can be used when vetting potential candidates. It is by no means recommended to use every single question here on the same candidate (that would take hours). Choosing a few items from this list should help you vet the intended skills you require.

A developer is perfectly able to use Angular to build applications without being able to answer all of these questions. Addition to having a source for interview questions, my intention is to encourage interested developers to think about these questions. I regularly teach Angular workshops. Oftentimes I do not get enough questions due to limited exposure working with the framework. These questions are the ones I personally needed to answer, to be able lead a team developing our first Angular production application at Autodesk A360.

Note: Keep in mind that many of these questions are open-ended and could lead to interesting discussions that tell you more about the person's capabilities than a straight answer would.

Table of Contents

General Questions:

Animations Questions:

Architecture Questions:

API Questions:

@HostBinding('class.valid') isValid;

<div *ngIf='someObservableData | async as data; else loading'>{{data}}</div>

<ng-template #loading>
  Loading Data...
</ng-template>

Template Syntax Questions:

Component Questions:

Component Interaction & State Management Questions:

Forms Questions:

NgModules Questions:

Services Questions:

let service = new DataService();

Structural Directives Questions:

Style Guide Questions:

Styling Questions:

:host-context(.theme-light) h2 {
  background-color: red;
}

Lifecycle Hooks Questions:

Observables RxJS Questions:

Performance Questions:

Pipes Questions:

Router Questions:

<div routerLink='product.id'></div>

Security Questions:

Testing Questions:

TypeScript Questions:

someService.someMethod(x);
someService['someMethod'](x);

JavaScript Questions:

function createVal(){
  return Math.random();
};

function fun( val =  createVal()){
  // Do something with val...
}

fun();
fun(5);


doStuff(...args);

{a, b} = {a: 1, b: 2}

Coding Questions:

import { Component, ContentChildren, Directive, Input, QueryList } from '@angular/core';

@Directive({selector: 'pane'})
export class Pane {
  @Input() id: string;
}

@Component({
  selector: 'tab',
  template: `
    <div>panes: {{serializedPanes}}</div>
  `
})
export class Tab {
  @ContentChildren(Pane) panes: QueryList<Pane>;
  get serializedPanes(): string { return this.panes ? this.panes.map(p => p.id).join(', ') : ''; }
}

@Component({
  selector: 'example-app',
  template: `
    <tab>
      <pane id="1"></pane>
      <pane id="2"></pane>
      <pane id="3" *ngIf="shouldShow"></pane>
    </tab>
    <button (click)="show()">Show 3</button>
  `,
})
export class ContentChildrenComp {
  shouldShow = false;
  show() { this.shouldShow = true; }
}

Fun Questions:

Contributors: