chore: highlighting and formatting

Author: Shyam-Chen

README.md

@@ -1,29 +1,29 @@
 # Angular2-Interview-Questions
 
-This file contains a number of Angular 2.0 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. 
+This file contains a number of Angular 2.0 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 2 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 2 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. 
+**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
 
-  1. [Animations Questions](#animations-questions)
-  1. [Architecture Questions](#architecture-questions)
-  1. [API Questions](#api-questions)
-  1. [Template Questions](#template-questions)
-  1. [Component Questions](#component-questions)
-  1. [Component Interaction & State Management Questions](#component-interaction-&-state-management-questions)
-  1. [Forms Questions](#forms-questions)
-  1. [General Questions](#general-questions)
-  1. [Services Questions](#services-questions)
-  1. [Structural Directives Questions](#structural-directives-questions)
-  1. [Styling Questions](#styling-questions)
-  1. [Style Guide Questions](#style-guide-questions)
-  1. [Testing Questions](#testing-questions)
-  1. [Performance Questions](#performance-questions)
-  1. [Coding Questions](#coding-questions)
-  1. [Fun Questions](#fun-questions)
+* [Animations Questions](#animations-questions)
+* [Architecture Questions](#architecture-questions)
+* [API Questions](#api-questions)
+* [Template Questions](#template-questions)
+* [Component Questions](#component-questions)
+* [Component Interaction & State Management Questions](#component-interaction-&-state-management-questions)
+* [Forms Questions](#forms-questions)
+* [General Questions](#general-questions)
+* [Services Questions](#services-questions)
+* [Structural Directives Questions](#structural-directives-questions)
+* [Styling Questions](#styling-questions)
+* [Style Guide Questions](#style-guide-questions)
+* [Testing Questions](#testing-questions)
+* [Performance Questions](#performance-questions)
+* [Coding Questions](#coding-questions)
+* [Fun Questions](#fun-questions)
 
 
 #### General Questions:
@@ -46,10 +46,10 @@ A developer is perfectly able to use Angular to build applications without being
 
 * What does this line do:
 
+```ts
+@HostBinding('[class.valid]') isValid;
 ```
-  @HostBinding('[class.valid]') isValid;
 
-```
 * 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?
@@ -105,7 +105,8 @@ A developer is perfectly able to use Angular to build applications without being
 * 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?
-```
+
+```ts
 let service = new DataService();
 ```
 
@@ -128,7 +129,8 @@ let service = new DataService();
 * 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?
-```
+
+```css
 :host-context(.theme-light) h2 {
   background-color: red;
 }
@@ -166,15 +168,16 @@ let service = new DataService();
 * 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?
-```
+
+```html
 <div routerLink='product.id'></div>
 ```
 
 #### Observables/RxJS Questions:
 
 * What is the difference between an observable and a promise?
 * What are some of the angular 2 apis that are using observables?
-* How would you implement a [brush behavior](https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172) using rxjs? 
+* How would you implement a [brush behavior](https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172) 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).
 
@@ -184,28 +187,30 @@ let service = new DataService();
 * 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?
-* What are Discriminated union types? 
+* What are Discriminated union types?
 * How do you define Object of Objects type in typescript?
 
-```
+```ts
 someService.someMethod(x);
 someService['someMethod'](x);
 ```
 
 #### Security Questions:
 
-
+...
 
 #### Coding Questions:
 
 * What would these components render?
 
-```
-import {Component, ContentChildren, Directive, Input, QueryList} from '@angular/core';
+```ts
+import { Component, ContentChildren, Directive, Input, QueryList } from '@angular/core';
+
 @Directive({selector: 'pane'})
 export class Pane {
   @Input() id: string;
 }
+
 @Component({
   selector: 'tab',
   template: `
@@ -216,6 +221,7 @@ 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: `
@@ -231,10 +237,8 @@ export class ContentChildrenComp {
   shouldShow = false;
   show() { this.shouldShow = true; }
 }
-
 ```
 
-
 #### Fun Questions:
 
 * What's a cool project that you've recently worked on?
@@ -245,7 +249,6 @@ export class ContentChildrenComp {
 * What's your favorite feature of Angular 2.0?
 * How do you like your coffee?
 
-
 #### Contributors:
 * [Ayşegül Yönet](https://developers.google.com/experts/people/aysegul-yonet)
 * [Mohamad Atieh](https://github.com/MohamadAtieh)

animation.md

@@ -1,6 +1,7 @@
 * How do you transition between two states:
-```
-animations: [
+
+```ts
+  animations: [
     trigger('heroState', [
       state('inactive', style({
         backgroundColor: '#eee',
@@ -14,10 +15,11 @@ animations: [
       transition('active => inactive', animate('100ms ease-out'))
     ])
   ]
-  ```
+```
+
 * How do you define a wildcard state?
 
-```
+```ts
 * => *
 * => active
 ```

api.md

@@ -1,9 +1,9 @@
-
 * What does this line do:
 
-  ```
-  @HostBinding('[class.valid]') isValid;
-  ```
+```ts
+@HostBinding('[class.valid]') isValid;
+```
+
 Binds a host element property (here, the CSS class valid) to a directive/component property (isValid).
 
 * What would be a good use for NgZone service?

router.md

@@ -1,26 +1,27 @@
 #### What is the diffrence between RouterModule.forRoot() vs RouterModule.forChild()? Why is it important?
 
-* forRoot creates a module that contains all the directives, the given routes, and the router service itself. 
-* forChild creates a module that contains all the directives and the given routes, but does not include the router service. 
-It registers the routers and uses the router service created at the root level. 
+* forRoot creates a module that contains all the directives, the given routes, and the router service itself.
+* forChild creates a module that contains all the directives and the given routes, but does not include the router service.
+It registers the routers and uses the router service created at the root level.
 * This is important because location is a mutable global property. Having more than one object manipulating the location is not a good idea.
 
 #### How does loadChildren property work?
 
-```
+```ts
 const routes: Routes = [
   ...,
   { path: 'edit', loadChildren: 'app/edit/edit.module#EditModule' },
   ...
 ]
 ```
+
 * In the above example, loadChildren tells the router to fetch the EditModule bundle assigned to it *when* the user visits '/edit' url. (To be more precise, it will ask the module loader to find and load it.)
 * Router will get the router configuration from edit module.
 * It merges EditModule router configuration with the main application configuration.
 * Activate all the needed components.
 
 #### Do you need a Routing Module? Why/not?
-Yes if the user was expected to navigate between different URLs. The Routing Module interprets the browser's URL as an instruction to load a specific component and its view. The application has to have its main router configured and bootstraped by passing an array of routes to `RouterModule.forRoot()`, and since this returns a module, it has to be added to the `imports` meta property in the main application module. 
+Yes if the user was expected to navigate between different URLs. The Routing Module interprets the browser's URL as an instruction to load a specific component and its view. The application has to have its main router configured and bootstraped by passing an array of routes to `RouterModule.forRoot()`, and since this returns a module, it has to be added to the `imports` meta property in the main application module.
 
 The RouterModule:
 
@@ -37,14 +38,15 @@ Note that lazy-loaded modules should be removed from modules tehy were part of s
 
 
 #### Below link doesn't work. Why? How do I fix it?
-```
+
+```html
 <div routerLink='product.id'></div>
 ```
+
 The routerLink should specify a defined path in the routing configuration and the required path parameter (`product.id`). The code above tries to visit a specific product page, so it should be done using *Link Parameters Array*:
 
-```
+```html
 <div [routerLink]="['/product', product.id]"></div>
 ```
 
 The above is correct in the case of having `product/:id` as a path in the application router configuration.
-

services.md

@@ -1,6 +1,6 @@
 #### What is the use case of services?
 
-The main use case of Services is to move duplicated code into a single location, acting like a Singleton. It encourages DRY (Don't Repeat Yourself), which is a principle in Software Engineering, aimed at reducing repitition of information or code in a multi-layered architecture. 
+The main use case of Services is to move duplicated code into a single location, acting like a Singleton. It encourages DRY (Don't Repeat Yourself), which is a principle in Software Engineering, aimed at reducing repitition of information or code in a multi-layered architecture.
 
 Services can serve as a method of interaction between an application and a data store. It also can provide communication channels between directives, as well as any other business logic access.
 
@@ -11,13 +11,13 @@ There are two ways to inject a service into your application:
 - Per Application: Provides the service at an application level
 - Per Component: Provides the service at a component level (and all child components)
 
-Providing a service at an application level or a higher level creates a single instance of that service and shares it with all sub directives. This is useful in the case of sharing properties or state between service holders. 
+Providing a service at an application level or a higher level creates a single instance of that service and shares it with all sub directives. This is useful in the case of sharing properties or state between service holders.
 
 Providing a service for every different component would create an instance for each of the components with separate resources.
 
 Injecting a service can be done by importing the service and specifying it in the `NgModule`'s metadata array preperty `providers`, and inject it into the directive using it via the constructor. To inject a service into another service, annotate the target service class with `@Injectable`.
 
-```
+```ts
 //annotation used for services injecting other services
 @Injectable()
 export class MessageService {
@@ -30,13 +30,15 @@ export class MessageService {
 [insert answer]
 
 #### Why is it a bad idea to create a new service in a component like the one below?
-```
+
+```ts
 let service = new DataService();
 ```
+
 That's a bad idea for several reasons including:
 
 Our component has to know how to create a DataService. If we ever change the DataService constructor, we'll have to find every place we create the service and fix it. Running around patching code is error prone and adds to the test burden.
 
 We create a new service each time we use new. What if the service should cache data and share that cache with others? We couldn't do that.
 
-We're locking the component into a specific implementation of the DataService. It will be hard to switch implementations for different scenarios. Can we operate offline? Will we need different mocked versions under test? Not easy.
+We're locking the component into a specific implementation of the DataService. It will be hard to switch implementations for different scenarios. Can we operate offline? Will we need different mocked versions under test? Not easy.

style.md

@@ -11,7 +11,8 @@ We can use the /deep/ selector to force a style down through the child component
  It works just like the function form of :host(). It looks for a CSS class in any ancestor of the component host element, all the way up to the document root. It's useful when combined with another selector.
 
 * What does the following css do?
-```
+
+```css
 :host-context(.theme-light) h2 {
   background-color: red;
 }