Cacher is the code snippet organizer for pro developers

<!-- Routing -->
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home.component';
import { AboutComponent } from './components/about.component';
import { AboutUserComponent } from './components/about-user.component';
import { ContactComponent } from './components/contact.component';
import { NotFoundComponent } from './components/notfound.component';

var appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'about/:username', component: AboutUserComponent },
  { path: 'contact', component: ContactComponent },
  { path: '**', component: NotFoundComponent },
];

export const appRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes);
-----------
<router-outlert></router-outlet> // In the Component
------------
// In the Template file.
<li><a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a></li>
<li><a routerLink="/about" routerLinkActive="active">About</a></li>
<li><a routerLink="/contact" routerLinkActive="active">Contact</a></li>
<div class="user_image_block" [routerLink]="['/about', user.username]">....


<!-- ngFor-->
<ul>
  <li *ngFor="let item of items; let i = index">
    {{i}} {{item}}
  </li>
</ul>


<!-- ngIf -->
<span *ngIf="showName"> {{ name }}</span>
<span *ngIf="!showName"> {{ world }}</span>

<span *ngIf="showName; else noName"> {{ name }}</span>
<ng-template #noName><span> World! </span></ng-template>

<span>{{ showName ? name : 'World!' }}</span>


<!-- ngSwitch -->
<span [ngSwitch]="times">
  <span *ngSwitchCase="'1'">Steve Jobs</span>
  <span *ngSwitchCase="'2'">John Doe</span>
  <span *ngSwitchCase="'3'">Ricky Martin</span>
  <span *ngSwitchDefault>World!</span>
</span>

<!-- Data binding -->
<div> <img src={{ imageUrl }} ></div>

<div> <img [src]="imageUrl" ></div>

<div> <img bind-src="imageUrl" ></div>
<span class="text" [textContent]="imageUrl"></span>



<!-- Attributes -->
<h3>Create Post</h3>
<p [hidden]="isUnchanged">Edit this post</p>
<button [disabled]="isUnchanged">Save Post!</button>