Angular 4 Interview questions

Angular 4 Interview questions

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;
}

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?

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).

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?

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?
• How does async pipe prevents memory leeks?

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?
• How do you debug router?

Security Questions:

Testing Questions:

• How do you mock a service to inject in a unit test?
• How do you mock a module in a unit test?

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?

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: `
    

panes: {{serializedPanes}}

  `
})
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: `
    
      
      
      
    

`, }) export class ContentChildrenComp { shouldShow = false; show() { this.shouldShow = true; } }