There are a few more tricks we can do with the router (such as restricting access), but those can be covered in a separate tutorial.

If you need a new route, simply modify app.routes.ts and follow the following steps:

1. Import the Component
2. Add to the routes array. Make sure to include a new path and component.

What we do with HttpServiceLayer class is extend the Http class from angular and add our own logic to it.

We then inject that class in the bootstrap class of the application and tell angular that were we import the Http class, in the back to insert the HttpServiceLayer.

Anywhere in the code we can simply import

import { Http } from '@angular/http';

But our class will be used for each call.

It is possible to install other libraries following, this approach, however, there might be a need to specify the module type, main file, and default extension.

 'lodash': {
   format: 'cjs',
   defaultExtension: 'js',
   main: 'index.js'
 }

---

 'moment': {
   main: 'moment.js'
 }

Angular 2 allow to access the ngForm instance by creating a local template variable. Angular 2 exposes directive instances like ngForm by specifying exportAs property of the directive metadata. Now, the advantage here is without much coding you can access the ngForm instance and use it to access submitted values or to check if all the fields are valid using properties (valid, submitted, value etc).

#f = ngForm (creates local template instance "f")

ngForm emits the event "ngSubmit" when it's submitted (Check @Output documentation for more details of event emitter)

(ngSubmit)= "login(f.value,f.submitted)"

"ngModel" creates a Form Control in combination with input "name" attribute.

<input type="text" [(ngModel)]="username" placeholder="enter username" required>

When form is submitted, f.value has the JSON object representing the submitted values.

{ username: 'Sachin', password: 'Welcome1' }

Remember that Angular 2 is all about singular responsibility. No matter how small your component is, dedicate a separate logic for each and every component. Be it a button, a fancy anchor link, a dialog header or even a sidenav's sub item.

this.myForm = this.formBuilder.group

creates a form object with user's configuration and assigns it to this.myForm variable.

---

'loginCredentials': this.formBuilder.group

method creates a group of controls which consist of a formControlName eg. login and value ['', Validators.required], where the first parameter is the initial value of the form input and the secons is a validator or an array of validators as in 'email': ['', [Validators.required, customValidator]],.

---

'hobbies': this.formBuilder.array

Creates an array of groups where the index of the group is formGroupName in the array and is accessed like :

<div *ngFor="let hobby of myForm.find('hobbies').controls; let i = index">
   <div formGroupName="{{i}}">...</div>
</div>

---

onAddHobby() {
    (<FormArray>this.myForm.find('hobbies')).push(new FormGroup({
      'hobby': new FormControl('', Validators.required)
    }))
  }

this sample method adds new formGroup to the array. Currently accessing requires specifing the type of control we want to access, in this example this type is : <FormArray>

---

removeHobby(index: number){
    (<FormArray>this.myForm.find('hobbies')).removeAt(index);
  }

same rules as above apply to removing a specific form control from the array

The *ngFor structural directive runs as a loop in a collection and repeats a piece of html for each element of a collection.

@View decorator is now deprecated. Developers should be using template or 'templateUrl' properties for @Component decorator.

I mainly requested this topic because I could not find any information on setting up multiple API routes with the Angular2-In-Memory-Web-Api. Ended up figuring it out myself, and figured this might be helpful to others.

When you use a web component in your Angular 2 template, angular will try to find a component with a selector matching the custom tag of the web component - which it of course can't and will throw an error.

The solution is to import a "custom elements schema" in the module that holds the component. This will make angular accept any custom tag, that doesn't match any ng component selector.

Observer is a generic, but must be of type any to avoid unit testing complexity. The reason for this complexity, is that Store's constructor expects Observer arguments with different generic types. Using any avoids this complication.

It's possible to pass null values into StoreMock's super constructor, but this restricts the number of assertions that can be used to test the class further down the road.

The Component being used in this example is just being used as context for how one would go about injecting Store as a provide in the test setup.

Because Angular 2 is so modular and encapsulated you can pretty much just copy over all of your components, services, pipes, directives and then fill out the NgModule as it was in the old project.