\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 (angular2-pipes.pdf)
  /Creator (Cheatography)
  /Author (Nathan (Nathane2005))
  /Subject (Angular2 Pipes 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}{721DA3}
\definecolor{LightBackground}{HTML}{F6F0F9}
\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{Angular2 Pipes Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Nathan (Nathane2005)} via \textcolor{DarkBackground}{\uline{cheatography.com/28056/cs/8268/}}}
\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 23rd May, 2016.\\
   Updated 22nd May, 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{2.4885 cm} x{2.4885 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Overview}}  \tn
% Row 0
\SetRowColor{LightBackground}
currency & Supported \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
date & Supported \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
uppercase & Supported \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
json & Supported \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
limitTo & Supported \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
lowercase & Supported \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
number & Not \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
orderBy & Not \tn 
% Row Count 8 (+ 1)
% Row 8
\SetRowColor{LightBackground}
filter & Not \tn 
% Row Count 9 (+ 1)
% Row 9
\SetRowColor{white}
async & Supported \tn 
% Row Count 10 (+ 1)
% Row 10
\SetRowColor{LightBackground}
decimal & Supported \tn 
% Row Count 11 (+ 1)
% Row 11
\SetRowColor{white}
percent & Supported \tn 
% Row Count 12 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{A Pipe is a filter applied over a angular expression. This is denoted by the `|` (pipe symbol)}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{0.4977 cm} p{0.4977 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Example Code}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{} \tn 
% Row Count 0 (+ 0)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{\textless{}!-{}- Sep 1, 2015 -{}-\textgreater{} \newline   \textless{}p\textgreater{}\{\{date | date:'mediumDate'\}\}\textless{}/p\textgreater{} \newline   \textless{}!-{}- September 1, 2015 -{}-\textgreater{} \newline   \textless{}p\textgreater{}\{\{date | date:'yMMMMd'\}\}\textless{}/p\textgreater{} \newline   \textless{}!-{}- 3:50 pm -{}-\textgreater{} \newline   \textless{}p\textgreater{}\{\{date | date:'shortTime'\}\}\textless{}/p\textgreater{}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.14471 cm} x{3.83229 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Currency}}  \tn
% Row 0
\SetRowColor{LightBackground}
Usage & expression | currency{[}:currencyCode{[}:symbolDisplay{[}:digitInfo{]}{]}{]} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\seqsplit{currencyCode} & ISO 4217 Compliant, eg USD, EUR \tn 
% Row Count 5 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{class CurrencyPipe \{ \newline      transform(value: any, currencyCode?: string, symbolDisplay?: boolean, digits?: string) : string \newline \}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.19448 cm} x{3.78252 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Date}}  \tn
% Row 0
\SetRowColor{LightBackground}
Usage & expression | date{[}:format{]} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
Year & y or yy \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
Month & M or MM \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
Day & d or D \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
Weekday & EEE or EEEE \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
Hour & j or jj \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
Hour 12 & h or hh \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
Hour 24 & H or HH \tn 
% Row Count 8 (+ 1)
% Row 8
\SetRowColor{LightBackground}
Minute & m or mm \tn 
% Row Count 9 (+ 1)
% Row 9
\SetRowColor{white}
Second & s or ss \tn 
% Row Count 10 (+ 1)
% Row 10
\SetRowColor{LightBackground}
Timezone & z \tn 
% Row Count 11 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{class DatePipe \{ \newline transform(value: any, pattern?: string) : string \newline supports(obj: any) : boolean \newline \}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{1.19448 cm} x{3.78252 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Uppercase}}  \tn
% Row 0
\SetRowColor{LightBackground}
Usage & item | uppercase \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{1.54287 cm} x{3.43413 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Json}}  \tn
% Row 0
\SetRowColor{LightBackground}
Usage & item | json \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{Transforms any input value using JSON.stringify. Useful for debugging.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{1.24425 cm} x{3.73275 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{lowercase}}  \tn
% Row 0
\SetRowColor{LightBackground}
Usage & item| lowercase \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{1.44333 cm} x{3.53367 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{async}}  \tn
% Row 0
\SetRowColor{LightBackground}
Usage & item | async \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{0.9954 cm} x{3.9816 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{decimal}}  \tn
% Row 0
\SetRowColor{LightBackground}
Usage & expression | number{[}:digitInfo{]} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
digit Info & \{minIntegerDigits\}.\{minFractionDigits\}-\{maxFractionDigits\} \tn 
% Row Count 3 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{minIntegerDigits is the minimum number of integer digits to use. Defaults to 1. \newline minFractionDigits is the minimum number of digits after fraction. Defaults to 0. \newline maxFractionDigits is the maximum number of digits after fraction. Defaults to 3.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{0.69678 cm} x{4.28022 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{percent}}  \tn
% Row 0
\SetRowColor{LightBackground}
Usage & expression | percent{[}:digitInfo{]} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
 & see decimal for usage \tn 
% Row Count 2 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Custom Pipes}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{import \{Component, View, bootstrap, Pipe, PipeTransform\} from 'angular2/angular2'; \newline  \newline @Pipe(\{ \newline   name: 'tempConvert' \newline \}) \newline  \newline class TempConvertPipe implements PipeTransform \{ \newline   transform(value: number, args: any{[}{]}) \{ \newline     if(value \&\& !isNaN(value) \&\& args{[}0{]} === 'celsius') \{ \newline       var temp = (value - 32) * 5/9; \newline       var places = args{[}1{]}; \newline       return temp.toFixed(places) + ' C';        \newline     \} \newline  \newline     return; \newline   \} \newline \}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.59264 cm} x{3.38436 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Using non standard pipes}}  \tn
% Row 0
\SetRowColor{LightBackground}
import & import as normal \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
component usage & pipes: {[}ExponentialStrengthPipe{]} \tn 
% Row Count 3 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}