\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{Maxime Frémeaux (maxant15)}
\pdfinfo{
  /Title (bases-angular.pdf)
  /Creator (Cheatography)
  /Author (Maxime Frémeaux (maxant15))
  /Subject (Bases Angular 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}{A3300D}
\definecolor{LightBackground}{HTML}{F9F2EF}
\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{Bases Angular Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Maxime Frémeaux (maxant15)} via \textcolor{DarkBackground}{\uline{cheatography.com/132904/cs/26971/}}}
\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}Maxime Frémeaux (maxant15) \\
  \uline{cheatography.com/maxant15} \\
        \uline{\seqsplit{maxime-fremeaux}.fr}
  \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 10th March, 2021.\\
   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{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Gestion du projet}}  \tn
% Row 0
\SetRowColor{LightBackground}
`ng new monProjet {[}-{}-routing false{]} {[}-{}-style css{]}` & Créer un nouv. projet {[}Spécifier le routage{]} {[}Spécifier le style{]} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
`ng version (v)` & Donne la version installée \tn 
% Row Count 6 (+ 2)
% Row 2
\SetRowColor{LightBackground}
`ng serve (s) {[}-{}-host 0.0.0.0{]} {[}-port 4205{]}` & Lancer le serveur {[}Adresse perso{]} {[}Port perso{]} {\emph{(localhost:4200)}} \tn 
% Row Count 10 (+ 4)
% Row 3
\SetRowColor{white}
`ng generate (g)` `\textless{}type\textgreater{}`  `{[}options{]}` & Générer un décorateur (voir section en-dessous) \tn 
% Row Count 13 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.84 cm} x{4.16 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Génération de décorateur}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{ac\}\}{\bf{Type}}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
`component (c) nomC` & Composant \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
`directive (d) nom` & Direct. personnalisée \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
`pipe (p) nom` & Pipe \tn 
% Row Count 6 (+ 1)
% Row 4
\SetRowColor{LightBackground}
`route (r) comp` & Route \tn 
% Row Count 7 (+ 1)
% Row 5
\SetRowColor{white}
`service (s) nom` & Service \tn 
% Row Count 8 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\{\{ac\}\}{\bf{Options}}} \tn 
% Row Count 9 (+ 1)
% Row 7
\SetRowColor{white}
`-{}-skip-tests` & Pas de fic. test \tn 
% Row Count 10 (+ 1)
% Row 8
\SetRowColor{LightBackground}
`-{}-flat` & Pas de répertoire \tn 
% Row Count 11 (+ 1)
% Row 9
\SetRowColor{white}
`-s` & Style en ligne \tn 
% Row Count 12 (+ 1)
% Row 10
\SetRowColor{LightBackground}
`-t` & Template en ligne \tn 
% Row Count 13 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Formulaires}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{`import \{ FormsModule \} from '@angular/forms';` \newline % Row Count 1 (+ 1)
`\textless{}input {[}(ngModel){]}="userName"\textgreater{}` \newline % Row Count 2 (+ 1)
Fournit l'accès aux données dans les 2 sens, l'analyse et la validation% Row Count 4 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Décorateur de classes}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{`@Component(\{...\})` \newline % Row Count 1 (+ 1)
`class MyComponent() \{\}` \newline % Row Count 2 (+ 1)
`@Directive(\{...\})` \newline % Row Count 3 (+ 1)
`class MyDirective() \{\}` \newline % Row Count 4 (+ 1)
`@Pipe(\{...\})` \newline % Row Count 5 (+ 1)
`class MyPipe() \{\}` \newline % Row Count 6 (+ 1)
Déclare qu'une classe est un composant (resp. une directive ou un pipe) et fournit de la métadonnée à propos du composant (resp. directive ou pipe)% Row Count 10 (+ 4)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Champs de décorateur de classe}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{`import \{ Input, ... \} from '@angular/core';` \newline % Row Count 1 (+ 1)
`@Input() myProperty;` \newline % Row Count 2 (+ 1)
Déclare une propriété d'entrée qui peut être mise à jour \newline % Row Count 4 (+ 2)
`@Output() myEvent = new EventEmitter();` \newline % Row Count 5 (+ 1)
Déclare une propriété de sortie qui lance des évènements qu'on peut suivre avec une reliure d'evt \newline % Row Count 8 (+ 3)
\seqsplit{`@HostBinding('class.valid')} isValid;` \newline % Row Count 9 (+ 1)
Relie une propriété d'élément à une propriété de directive/composant \newline % Row Count 11 (+ 2)
`@HostListener('click', {[}'\$event'{]}) onClick(e) \{...\}` \newline % Row Count 13 (+ 2)
Suit un élément évènement avec une méthode de directive/composant \newline % Row Count 15 (+ 2)
\seqsplit{`@ContentChild(myPredicate)} myChildComponent;` \newline % Row Count 16 (+ 1)
\seqsplit{`@ContentChildren(myPredicate)} myChildComponents;` \newline % Row Count 18 (+ 2)
Fournit le(s) {[}premier{]} résultat(s) de la requête du contenu du composant à une propriété de la classe% Row Count 21 (+ 3)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{NgModules}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{import \{ NgModule \} from '@angular/core'; \newline  \newline @NgModule(\{  \newline     declarations: {[}ExempleComponent{]},  \newline     imports: {[}ExempleModule{]}, \newline     exports: {[}AutreComponent{]},  \newline     providers: {[}MonService, \{ provide:...\}{]},  \newline     entryComponents:{[}{]}, \newline     bootstrap: {[}MyAppComponent{]} \newline \}) \newline  \newline class MyModule \{\}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{entryComponent : déclarer des composants non références dans aucun template atteignable (par exemple créé dynamiquement par le code)}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Syntaxe de template}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{`\textless{}input {[}value{]}="firstName"\textgreater{}` \newline % Row Count 1 (+ 1)
Relie la propriété `value` au résultat de l'expression `firstname` \newline % Row Count 3 (+ 2)
`\textless{}button (click)="readRainbow(\$event)"\textgreater{}` \newline % Row Count 4 (+ 1)
Appelle la méthode `readRainbow` quand un click est détecté sur cet élément (ou ses enfants) et passe l'objet `event` \newline % Row Count 7 (+ 3)
`\textless{}p\textgreater{}Hello \{\{maVariable\}\}\textless{}/p\textgreater{}` \newline % Row Count 8 (+ 1)
Relie le contenu du texte à une chaîne de caractères interpolée \newline % Row Count 10 (+ 2)
`\textless{}my-cmp {[}(title){]}="name"\textgreater{}` \newline % Row Count 11 (+ 1)
Configure une reliure à deux sens \newline % Row Count 12 (+ 1)
`\textless{}video \#movieplayer ...\textgreater{}` \newline % Row Count 13 (+ 1)
`\textless{}button (click)="movieplayer.play()"\textgreater{}`` \newline % Row Count 14 (+ 1)
`\textless{}/video\textgreater{}` \newline % Row Count 15 (+ 1)
Créé une variable locale qui fournit l'accès à l'instance d'élément `video` (pour les data-binding et event-binding) \newline % Row Count 18 (+ 3)
`\textless{}p *myUnless="monExpression"\textgreater{}...\textless{}/p\textgreater{}` \newline % Row Count 19 (+ 1)
Equivalent à `\textless{}ng-template {[}myUnless{]}="monExpression"\textgreater{}\textless{}p\textgreater{}...\textless{}/p\textgreater{}\textless{}/ng-template\textgreater{}` (template intégré) \newline % Row Count 22 (+ 3)
`\textless{}p\textgreater{}Card No.: \{\{cardNumber | myCardNumberFormatter\}\}\textless{}/p\textgreater{}` \newline % Row Count 24 (+ 2)
Transforme la valeur de l'expression `CardNumber` via le pipe `myCardNumberFormatter` \newline % Row Count 26 (+ 2)
`\textless{}p\textgreater{}Employer: \{\{employer?.companyName\}\}\textless{}/p\textgreater{}` \newline % Row Count 27 (+ 1)
Opérateur de navigation sécurisée. Si `employer` est `undefined`, le reste de l'expression est ignoré% Row Count 30 (+ 3)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Directives built-in}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{`\textless{}section *ngIf="showSection"\textgreater{}` \newline % Row Count 1 (+ 1)
Retire ou recrée une portion du DOM basée sur l'expression de `showSection` \newline % Row Count 3 (+ 2)
`\textless{}li *ngFor="let item of list"\textgreater{}` \newline % Row Count 4 (+ 1)
Transforme l'élément courant et son contenu dans un template, et instancie une vue pour chaque élément de la liste \newline % Row Count 7 (+ 3)
`\textless{}div {[}ngStyle{]}="\{'property': 'value'\}"\textgreater{}` \newline % Row Count 8 (+ 1)
`\textless{}div {[}ngStyle{]}="dynamicStyles()"\textgreater{}` \newline % Row Count 9 (+ 1)
Utiliser du CSS directement ou appeler une méthode de style% Row Count 11 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Détection changement composant/directive \& cycles}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{`constructor(myService: MyService, ...) \{ ... \}` \newline % Row Count 1 (+ 1)
Appelé avant n'importe quel autre cycle (injection de dépendances). \newline % Row Count 3 (+ 2)
\seqsplit{`ngOnChanges(changeRecord)} \{ ... \}` \newline % Row Count 4 (+ 1)
Appelé après changement à la propriété d'entrée et avant de procéder au contenu ou aux vues des fils. \newline % Row Count 7 (+ 3)
`ngOnInit() \{ ... \}` \newline % Row Count 8 (+ 1)
Appelée après le constructeur, initialise les propriétés d'entrée et le premier appel à `ngOnChanges`. \newline % Row Count 11 (+ 3)
`ngOnDestroy() \{ ... \}` \newline % Row Count 12 (+ 1)
Appelé une fois, avant que l'instance ne soit détruite.% Row Count 14 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}