Angular 2

General Questions:
 What did you learn about Angular yesterday/this week?
 What are some of the reasons you would choose to use Angular in
your project?
 What did you like about working with Angular?
 How do you keep your Angular code more readable and maintainable?

 Animations Questions:
 How do you define transition between two states in Angular?
 How do you define a wildcard state?

 Architecture Questions:
 What is a good use case for ngrx/store?
 Can you talk about a bug related to a race condition, how to solve it
and how to test it?

 API Questions:
 What does this code do:
 @HostBinding('class.valid') isValid;
 <div *ngIf='someObservableData | async as data; else
loading'>{{data}}</div>
 <ng-template #loading>
 Loading Data...
 </ng-template>
 Why would you use renderer methods instead of using native element
methods?
 What is the point of calling renderer.invokeElementMethod(rendererEl,
methodName)?
 How would you control size of an element on resize of the window in a
component?
 What would be a good use for NgZone service?
 How would you protect a component being activated through the
router?
 How would you insert an embedded view from a prepared
TemplateRef?

 Template Syntax Questions:
 How can you add an active class to a selected element in a list
component?
 What is a template variable. How would you use it?

 Component Questions:
 What is the minimum definition of a component?
 What is the difference between a component and a directive?
 How do components communicate with each other?
 How do you create two way data binding in Angular?
 How would you create a component to display error messages
throughout your application?
 What does a lean component mean to you?

 Component Interaction & State Management Questions:
 How would you pass data from a parent component to a child
component?
 How would you pass data from a child component to a parent
component?
 Which components will be notified when an event is emitted?
 Tell me about the different ways how you would get data to your
components from a service and talk about why would you use one way
vs the other?
 How would you use cached data?

 Forms Questions:
 When do you use template driven vs model driven forms? Why?
 How do you submit a form?
 What's the difference between NgForm, FormGroup, and FormControl?
How do they work together?
 What's the advantage of using FormBuilder?
 How do you add form validation to a form built with FormBuilder?
 What's the difference between dirty, touched, and pristine on a form
element?
 How can you access validation errors in the template to display error
messages?
 What is async validation and how is it done?

 NgModules Questions:
 What is the purpose of NgModule?
 How do you decide to create a new NgModule?
 What are the attributes that you can define in an NgModule
annotation?
 What is the difference between a module's forRoot() and forChild()
methods and why do you need it?
 What would you have in a shared module?
 What would you not put shared module?
 What module would you put a singleton service whose instance will be
shared throughout the application (e.g. ExceptionService
andLoggerService)?
 What is the purpose of exports in a NgModule?
 Why is it bad if SharedModule provides a service to a lazy loaded
module?

 Services Questions:
 What is the use case of services?
 How are the services injected to your application?
 How do you unit test a service with a dependency?
 Why is it a bad idea to create a new service in a component like the
one below?
 let service = new DataService();

 Structural Directives Questions:
 What is a structural directive?
 How do you identify a structural directive in html?
 When creating your own structural directives, how would you decide on
hiding or removing an element? What would be the advantages or
disadvantages of choosing one method rather than the other?

 Style Guide Questions:
 What are some of the Angular Style Guide suggestions you follow on
your code? Why?
 Is it important to have a style guide? Why/not?

 Styling Questions:
 How would you select a custom component to style it.
 What pseudo-class selector targets styles in the element that hosts the
component?
 How would you select all the child components' elements?
 How would you select a css class in any ancestor of the component
host element, all the way up to the document root?
 What selector force a style down through the child component tree into
all the child component views?
 What does :host-context() pseudo-class selector targets?
 What does the following css do?
 :host-context(.theme-light) h2 {
 background-color: red;
 }

 Testing Questions:
 How do you mock a service to inject in a unit test?
 How do you mock a module in a unit test?

 Performance Questions:
 What tools would you use to find a performance issue in your code?
 What tools have you used to improve the performance of your
application?
 What are some ways you may improve your website's scrolling
performance?
 Explain the difference between layout, painting and compositing.
 Have you seen Jeff Cross's NgCruise talk on performance?

 Lifecycle Hooks Questions:
 What is the possible order of lifecycle hooks.
 When will ngOnInit be called?
 How would you make use of ngOnInit()?
 What would you consider a thing you should be careful doing on
ngOnInit()?
 What is the difference between ngOnInit() and constructor() of a
component?

 Pipes Questions:
 What is a pure pipe?
 What is an async pipe?
 What kind of data can be used with async pipe?
 How do you create a custom pipe?

 Routing Questions:
 What is the difference between RouterModule.forRoot() vs
RouterModule.forChild()? Why is it important?
 How does loadChildren property work?
 Do you need a Routing Module? Why/not?
 When does a lazy loaded module is loaded?
 Below link doesn't work. Why? How do I fix it?
 <div routerLink='product.id'></div>
 Can you explain the difference between ActivatedRoute and
RouterState?

 Observables/RxJS Questions:
 What is the difference between an observable and a promise?
 What is the difference between an observable and a subject?
 What are some of the angular apis that are using observables?
 How would you cache an observable data?
 How would you implement a multiple api calls that needs to happen in
order using rxjs?
 How would you make sure an api call that needs to be called only once
but with multiple conditions. Example: if you need to get some data in
multiple routes but, once you get it, you can reuse it in the routes that
needs it, therefor no need to make another call to your backend apis.
 How would you implement a brush behavior using rxjs?
 How would you implement a color picker with rxjs?
 If you need to respond to two different Observable/Subject with one
callback function, how would you do it?(ex: if you need to change the
url through route parameters and with prev/next buttons).

 TypeScript Questions:
 Why do you need type definitions?

 How would you define a custom type?
 What is the difference between an Interface and a Class?
 First line below gives compile error, second line doesn't. Why?
 someService.someMethod(x);
 someService['someMethod'](x);
 What are Discriminated union types?
 How do you define Object of Objects type in typescript?

 Security Questions:
 ...

 JavaScript Questions:
 Explain the difference between var, let and const key words.
 Could you make sure a const value is garbage collected?
 Explain Object.assign and possible use cases.
 Explain Object.freeze and possible use cases.
 Explain the code below. How many times the createVal function is
called?
 function createVal(){
 return Math.random();
 };

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

 fun();
 fun(5);

 Coding Questions:
 What would these components render?
 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; }
 }

 how to declare a component
 what type of directives are there
 how does rxjs differ from promises
 What is ChangeDetection.OnPush and what other
ChangeDetection strategies exist
 What is NgZone and what is it used for
 How do you declare an event binding
 How to declare a property binding
 What is ngModel and why is it considered a shorthand?
 Explain @Input @Output
 Explain NgModule and how a root module differs from a
feature module

 Explain where you would put shared components and where
you would put shared services
 Explain how you can use lay loading and what the benefit is
and also what impact this has on where you place
components and services
 What is AOT
 What is tree shaking
 What is “@Inject” and why is it needed
 What directive would you use to loop data?
 How would you import only the operators you need in Rxjs
and how would you import the whole lib and it what cases
would you use each strategy?
 • What is ngModule
 Difference between component and directives
 Why to use Module and diff between module and
component
 Default pipes
 Built in directives and their syntax's
 What is lazzy loading.
 Routing configuration
 Work flow of basic project structure
 “In Angular 2 how do you determine the active route”
 “Angular 2 data attributes”
 “Can't bind to 'formGroup' since it isn't a known property of
'form”
 “How do I create a singleton service in Angular 2?”
 “Angular2 exception: Can't bind to 'ngForIn' since it isn't a
known native property”
 “NativeScript/Angular - How to import global styles?”
 “Angular2 - What is the meanings of module.id in
component?”
 “Angular 2: How to use/import the http module?”
 “Angular2 material dialog has issues - Did you add it to

@NgModule.entryComponents?”
 “The pipe ' ' could not be found angular2 custom pipe”
 • “How do I call an Angular 2 pipe with multiple
arguments?”
 “Huge number of files generated for every Angular project”
 “Angular - Promise vs Observable”
 “Huge number of files generated for every Angular project”
 “Difference between Constructor and ngOnInit”
 “Angular 2 html binding”
 “Angular 2 HTTP GET with TypeScript error http.get(…).map
is not a function in [null]”
 “How to bundle an Angular 2, 4 & … app for production”
 “@Directive v/s @Component in angular2”
 “Angular 2 pipes details”
 “Angular 2 Forms Update”
 “Angular 2 Routing (3.0.0+) ”
 “Angular 2 RXJS Subjects and Observables with API
requests”
 “Angular Routing”
 “Directives”
 “How to Use ngif”