\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{Nathan (Nathane2005)}
\pdfinfo{
  /Title (angular-2-router.pdf)
  /Creator (Cheatography)
  /Author (Nathan (Nathane2005))
  /Subject (Angular 2 Router Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{A31C8C}
\definecolor{LightBackground}{HTML}{F9F0F7}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{Angular 2 Router Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Nathan (Nathane2005)} via \textcolor{DarkBackground}{\uline{cheatography.com/28056/cs/8478/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}Nathan (Nathane2005) \\
  \uline{cheatography.com/nathane2005} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 18th October, 2016.\\
   Updated 18th October, 2016.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{3}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Getting started}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{In index.html \newline  \newline \textless{}base href="/"\textgreater{}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Router Imports}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{import \{ RouterModule \}   from '@angular/router';} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Sample Router}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{RouterModule.forRoot({[} \newline       \{ path: 'hero/:id', component: HeroDetailComponent \}, \newline       \{ path: 'crisis-center', component: CrisisListComponent \}, \newline       \{ \newline         path: 'heroes', \newline         component: HeroListComponent, \newline         data: \{ \newline           title: 'Heroes List' \newline         \} \newline       \}, \newline       \{ path: '', component: HomeComponent \}, \newline       \{ path: '**', component: PageNotFoundComponent \} \newline     {]}) \newline   {]}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{There is an array of routes defined for the specific section of the application, depending on the embedded nature of the application there will be more child routes defined}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{General}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{1. The order of the routes matter \newline % Row Count 1 (+ 1)
2. There is usually a default route with an empty path% Row Count 3 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Router Outlet}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}!-{}- Routed views go here -{}-\textgreater{} \newline \textless{}router-outlet\textgreater{}\textless{}/router-outlet\textgreater{}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.44333 cm} x{3.53367 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Router Link}}  \tn
% Row 0
\SetRowColor{LightBackground}
RouterLink & The directive for binding a clickable HTML element to a route. Clicking an anchor tag with a routerLink directive that is bound to a string or a Link Parameters Array triggers a navigation. \tn 
% Row Count 7 (+ 7)
% Row 1
\SetRowColor{white}
\seqsplit{RouterLinkActive} & The directive for adding/removing classes from an HTML element when an associated routerLink contained on or inside the element becomes active/inactive. \tn 
% Row Count 13 (+ 6)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{ActivatedRoute} & A service that is provided to each route component that contains route specific information such as route parameters, static data, resolve data, global query params and the global fragment. \tn 
% Row Count 20 (+ 7)
% Row 3
\SetRowColor{white}
\seqsplit{RouterState} & The current state of the router including a tree of the currently activated routes in our application along convenience methods for traversing the route tree. \tn 
% Row Count 26 (+ 6)
% Row 4
\SetRowColor{LightBackground}
Router & Displays the application component for the active URL. Manages navigation from one component to the next. \tn 
% Row Count 30 (+ 4)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{x{1.44333 cm} x{3.53367 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Router Link (cont)}}  \tn
% Row 5
\SetRowColor{LightBackground}
\seqsplit{RouterModule} & A separate Angular module that provides the necessary service providers and directives for navigating through application views. \tn 
% Row Count 5 (+ 5)
% Row 6
\SetRowColor{white}
Routes & Defines an array of Routes, each mapping a URL path to a component. \tn 
% Row Count 8 (+ 3)
% Row 7
\SetRowColor{LightBackground}
Route & Defines how the router should navigate to a component based on a URL pattern. Most routes consist of a path and a component type. \tn 
% Row Count 13 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.44333 cm} x{3.53367 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Router Controls}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{CanActivate} & Checking route access \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\seqsplit{CanActivateChild} & Checking child route access \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{CanDeactivate} & Ask permission to discard unsaved changes \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
CanLoad & Check before loading feature module assets \tn 
% Row Count 7 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Child Routes Definition}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{RouterModule.forChild({[} \newline       \{ path: 'heroes',  component: HeroListComponent \}, \newline       \{ path: 'hero/:id', component: HeroDetailComponent \} \newline     {]})} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{In the parent definition include the loadChildren attributes}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Lazy Loading Of Routes}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{export function loadCompensationModule() \{ \newline   return require('es6-promise!../cf/shell/shell.module')('ShellModule'); \newline \} \newline  \newline  \newline export const routes: Routes = {[} \newline   \{ path: '', redirectTo: 'home', pathMatch: 'full'\}, \newline   \{ path: 'cf', loadChildren: loadCompensationModule\}, \newline   \{ path: 'home', component: MainComponent, canActivate: {[}AuthGuard{]}\}, \newline   \{ path:'**', redirectTo: '' \} \newline {]}; \newline  \newline export const appRoutingProviders: any{[}{]} = {[} \newline  \newline {]}; \newline  \newline export const routing: ModuleWithProviders = \seqsplit{RouterModule.forRoot(routes}, \{ useHash: false\});} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{This is a sample. The children definition would be defined in the children array namely: \newline  \newline export const routes: Routes = {[} \newline   \{ \newline     path: '', component: ShellComponent, \newline     children: {[} \newline       \{path: 'home', component: ShellComponent\}, \newline       \{path: 'one', loadChildren: loadOneModule\}, \newline       \{path: 'two', loadChildren: loadTwoModule\}, \newline       \{path: 'three', loadChildren: loadThreeModule\}, \newline       \{path: 'four', loadChildren: loadFourModule\} \newline     {]} \newline   \}, \newline   \{path: '**', redirectTo: 'home'\} \newline {]};}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{2.88666 cm} x{2.09034 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Route Parameters - Mandatory}}  \tn
% Row 0
\SetRowColor{LightBackground}
Route Parameter & xxx/:\{type\} \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{To Specify the route information \newline 1. Construct the URL \newline 2. Pass in  this.router.navigate({[}'/hero', hero.id{]});}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Route Paramters - Optional}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}a {[}routerLink{]}="{[}'/crisis-center', \{ foo: 'foo' \}{]}"\textgreater{}Crisis Center\textless{}/a\textgreater{}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.74195 cm} x{3.23505 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Location Stategy}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{PathLocationStrategy} & the default "HTML 5 pushState" style. \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\seqsplit{HashLocationStrategy} & the "hash URL" style. \tn 
% Row Count 4 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{\seqsplit{RouterModule.forRoot(routes}, \{ useHash: true \})  // .../\#/crisis-center/}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{CanActivate Guard}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{import \{ Injectable \}       from '@angular/core'; \newline import \{ \newline   CanActivate, Router, \newline   ActivatedRouteSnapshot, \newline   RouterStateSnapshot \newline \}                           from '@angular/router'; \newline import \{ AuthService \}      from './auth.service'; \newline  \newline @Injectable() \newline export class AuthGuard implements CanActivate \{ \newline   constructor(private authService: AuthService, private router: Router) \{\} \newline  \newline   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean \{ \newline     let url: string = state.url; \newline  \newline     return this.checkLogin(url); \newline   \} \newline  \newline   checkLogin(url: string): boolean \{ \newline     if \seqsplit{(this.authService.isLoggedIn)} \{ return true; \} \newline  \newline     // Store the attempted URL for redirecting \newline     \seqsplit{this.authService.redirectUrl} = url; \newline  \newline     // Navigate to the login page with extras \newline     this.router.navigate({[}'/login'{]}); \newline     return false; \newline   \} \newline \}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{To reference the guard: \newline  \newline  canActivate: {[}AuthGuard{]},}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Route Animations}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Import  \newline  \newline import \{ Component, OnInit, HostBinding, \newline          trigger, transition, animate, \newline          style, state \} from '@angular/core'; \newline  \newline animations: {[} \newline     trigger('routeAnimation', {[} \newline       state('{\emph{', \newline         style(\{ \newline           opacity: 1, \newline           transform: 'translateX(0)' \newline         \}) \newline       ), \newline       transition('void =\textgreater{} }}', {[} \newline         style(\{ \newline           opacity: 0, \newline           transform: 'translateX(-100\%)' \newline         \}), \newline         animate('0.2s ease-in') \newline       {]}), \newline       transition('* =\textgreater{} void', {[} \newline         animate('0.5s ease-out', style(\{ \newline           opacity: 0, \newline           transform: 'translateY(100\%)' \newline         \})) \newline       {]}) \newline     {]}) \newline   {]} \newline  \newline   \seqsplit{@HostBinding('@routeAnimation')} get routeAnimation() \{ \newline     return true; \newline   \}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{the host binding is for linking to the transition effect.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}