\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{javascripttuts}
\pdfinfo{
  /Title (angular-2-essentials-may-2016.pdf)
  /Creator (Cheatography)
  /Author (javascripttuts)
  /Subject (Angular 2 Essentials May 2016 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}{21A199}
\definecolor{LightBackground}{HTML}{F1F9F8}
\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 Essentials May 2016 Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{javascripttuts} via \textcolor{DarkBackground}{\uline{cheatography.com/28277/cs/8314/}}}
\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}javascripttuts \\
  \uline{cheatography.com/javascripttuts} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Not Yet Published.\\
   Updated 9th June, 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*}{2}

\begin{tabularx}{8.4cm}{x{3.6 cm} x{4.4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Template}}  \tn
% Row 0
\SetRowColor{LightBackground}
Angular 1 & Angular2 \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
ng-click & (click) \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
ng-hide & {[}hidden{]} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
ng-class & {[}ngClass{]} \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
ng-model= "model" & ({[}model{]}) = "model" \tn 
% Row Count 6 (+ 2)
% Row 5
\SetRowColor{white}
brackets & Set value \tn 
% Row Count 7 (+ 1)
% Row 6
\SetRowColor{LightBackground}
parentheses & Get value \tn 
% Row Count 8 (+ 1)
% Row 7
\SetRowColor{white}
Both & Double binding \tn 
% Row Count 9 (+ 1)
% Row 8
\SetRowColor{LightBackground}
\textless{}div ng-switch=""\textgreater{} & {[}ngSwitch{]} = \tn 
% Row Count 10 (+ 1)
% Row 9
\SetRowColor{white}
\textless{}div ng-switch-when=""\textgreater{} & *ngSwitchWhen = \tn 
% Row Count 12 (+ 2)
% Row 10
\SetRowColor{LightBackground}
\textless{}div ng-switch-default=""\textgreater{} & *ngSwitchDefault = \tn 
% Row Count 14 (+ 2)
% Row 11
\SetRowColor{white}
\textless{}a ng-href="homeUrl"\textgreater{}Home\textless{}/a\textgreater{} & \textless{}a {[}href{]}="homeUrl"\textgreater{}Home\textless{}/a\textgreater{} \tn 
% Row Count 16 (+ 2)
% Row 12
\SetRowColor{LightBackground}
\textless{}a ng-href="\#home"\textgreater{}Home\textless{}/a\textgreater{} & \textless{}a {[}routerLink{]}="{[}'Home'{]}"\textgreater{}Home\textless{}/a\textgreater{} \tn 
% Row Count 18 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{The * means that Angular will modify the attached element (li) 					 to create a new template}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} p{0.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Pipes}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Import \{Pipe\} from "angular2/core" @Pipe (\{ \{\{nl\}\}name:"Girl" \{\{nl\}\}\}) export class GirlPipe \{   transform(user)\{     return user.gender == 'girl';   \} \}  @Component \{ pipes: {[}GirlPipe{]} \}} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{addGirl(newGirl:Girl) \{   this.persons = {[}…this.persons,newGirl{]}} \tn 
% Row Count 6 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Be careful a pipe does NOT check if the array of object got modified.  \newline So if you want to add new elements to your array, it is required to recreate it instead of pushing and  removing it: \newline Yes, you hate it admit it :P (so do I). However this come with a benefit, it makes Angular 2 faster. \newline Angular 2 is 3X to 5X than Angular 1. Let's not forget this.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.4 cm} x{5.6 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Service}}  \tn
% Row 0
\SetRowColor{LightBackground}
Creation & `import \{Injectable\} from 'angular2/core' @Injectable export class UserService \{\}` \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
Bootstrap in Root & bootstrap(App,{[}UserService{]}) \tn 
% Row Count 6 (+ 2)
% Row 2
\SetRowColor{LightBackground}
Usage & `import \{UserService\} from "./userService"; export class App \{service; constructor(public userService:UserService) \{this.service = userService\}\}` \tn 
% Row Count 12 (+ 6)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.6 cm} x{4.4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Directives}}  \tn
% Row 0
\SetRowColor{LightBackground}
 & `@Component(\{template,selector,directives:{[}YourDirectiveHere{]}\})` \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
Angular 1 & Angular 2 \tn 
% Row Count 4 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\textless{}temp a=1\textgreater{}\textless{}/temp\textgreater{} & \textless{}temp {[}a{]}=1\textgreater{} \textless{}/temp\textgreater{} \tn 
% Row Count 5 (+ 1)
% Row 3
\SetRowColor{white}
`return \{     scope:'a=1'; \}` & `import \{Component, Input\} from "angular2/core" export class Temp \{ @Input() a; \}` \tn 
% Row Count 9 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Shadow DOM}}  \tn
% Row 0
\SetRowColor{LightBackground}
Override the global style and affect every elements who has the classes & @Component(\{encapsulation: \seqsplit{ViewEncapsulation.None} \}) \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
Not get affected by the global style and only care about it's own style & @Component(\{encapsulation: \seqsplit{ViewEncapsulation.Native} \}) \tn 
% Row Count 8 (+ 4)
% Row 2
\SetRowColor{LightBackground}
Same but works with older browsers like IE & @Component(\{encapsulation: \seqsplit{ViewEncapsulation.Emulated} \}) \tn 
% Row Count 11 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{In angular 2 you can set your style in a component with the attribute encapsulation}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.68 cm} x{4.32 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Routing}}  \tn
% Row 0
\SetRowColor{LightBackground}
Angular 1 & Angular 2 \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\$location & \_router: Router \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\$routeParams & \seqsplit{\_routeParams:RouteParams} \tn 
% Row Count 4 (+ 2)
% Row 3
\SetRowColor{white}
\seqsplit{\$routeParams.get('param1')} & \seqsplit{this.\_routeParams.get('param1')} \tn 
% Row Count 6 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{} \tn 
% Row Count 6 (+ 0)
% Row 5
\SetRowColor{white}
\seqsplit{\$location.path('...')} & \seqsplit{this.\_router.navigate(} {[}'destinationName', \{ param1: param1, param2: param2 \}{]} ); \tn 
% Row Count 10 (+ 4)
% Row 6
\SetRowColor{LightBackground}
\textless{}div ng-view\textgreater{} & \textless{}router-outlet\textgreater{}\textless{}/router-outlet\textgreater{} \tn 
% Row Count 12 (+ 2)
% Row 7
\SetRowColor{white}
Declare route (name in PascalCase) & @RouteConfig({[}   \{path:'/crisis-center', name: 'CrisisCenter', component: CrisisListComponent, useAsDefault: true\} {]}) \tn 
% Row Count 18 (+ 6)
% Row 8
\SetRowColor{LightBackground}
Add a link & \textless{}a {[}routerLink{]}="{[}'CrisisCenter'{]}"\textgreater{}Crisis Center\textless{}/a\textgreater{} \tn 
% Row Count 21 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}