\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{Sharan (shrunSprint89)}
\pdfinfo{
  /Title (angular-cheatsheet.pdf)
  /Creator (Cheatography)
  /Author (Sharan (shrunSprint89))
  /Subject (Angular cheatsheet 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}{C73BF7}
\definecolor{LightBackground}{HTML}{F8E6FE}
\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 cheatsheet Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Sharan (shrunSprint89)} via \textcolor{DarkBackground}{\uline{cheatography.com/205274/cs/43793/}}}
\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}Sharan (shrunSprint89) \\
  \uline{cheatography.com/shrunsprint89} \\
  \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 6th July, 2024.\\
   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{0.9954 cm} x{3.9816 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Major terms}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{Typescript} & Typed superset to ECMAscript \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{CSS} \tn 
% Row Count 3 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{Component} & Fundamental building block for creating applications in Angular. Units with clear responsibility having following core properties:  A @Component decorator, An HTML template, A CSS selector, A TypeScript class with behaviors \tn 
% Row Count 10 (+ 7)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{Decorator} \tn 
% Row Count 11 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{Template} \tn 
% Row Count 12 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{Selector} \tn 
% Row Count 13 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{Events} \tn 
% Row Count 14 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.09494 cm} x{3.88206 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Components}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{Composed} of & TS class file, Styling file (CSS/SCSS etc), HTML Template file (html or htm), Unit test (spec file with unit tests for the component) \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{TS class file Syntax} \tn 
% Row Count 6 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{HTML template syntax} \tn 
% Row Count 7 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{0.54924 cm} x{2.33427 cm} x{1.69349 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{5.377cm}}{\bf\textcolor{white}{Major units}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{5.377cm}}{NgModule} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\seqsplit{Component} & A component's job is to enable the user experience and nothing more. A component should present properties and methods for data binding, to mediate between the view (rendered by the template) and the application logic (which often includes some notion of a model). &  \tn 
% Row Count 15 (+ 14)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{Service} & Services perform non-UI tasks such as fetching data from the server, validating user input, or logging directly to the console. By defining such processing tasks in an injectable service class, you make those tasks available to any component. You can also make your application more adaptable by configuring different providers of the same kind of service, as appropriate in different circumstances. The @Injectable() decorator specifies that Angular can use this class in the DI system. &  \tn 
% Row Count 40 (+ 25)
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{5.377cm}{p{0.54924 cm} x{2.33427 cm} x{1.69349 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{5.377cm}}{\bf\textcolor{white}{Major units (cont)}}  \tn
% Row 3
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{5.377cm}}{Router} \tn 
% Row Count 1 (+ 1)
% Row 4
\SetRowColor{white}
\mymulticolumn{3}{x{5.377cm}}{Form} \tn 
% Row Count 2 (+ 1)
% Row 5
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{5.377cm}}{Unit test} \tn 
% Row Count 3 (+ 1)
% Row 6
\SetRowColor{white}
CLI & The Angular CLI is a command-line interface tool which allows you to scaffold, develop, test, deploy, and maintain Angular applications directly from a command shell. & \seqsplit{https://angular}.dev/tools/cli \tn 
% Row Count 12 (+ 9)
% Row 7
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{5.377cm}}{Provider} \tn 
% Row Count 13 (+ 1)
% Row 8
\SetRowColor{white}
Pipe & Pipes are simple functions to use in templates to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application, while only declaring each pipe once. For example, you would use a pipe to show a date as April 15, 1988 rather than the raw string format. &  \tn 
% Row Count 29 (+ 16)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{x{1.09494 cm} x{3.88206 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Services}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{Composed} of & TypeScript class, Decorator with details pf provider to make service Injectable or inject other services into it \tn 
% Row Count 4 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{p{0.64701 cm} x{4.32999 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{5.377cm}}{\bf\textcolor{white}{Major tools involved}}  \tn
% Row 0
\SetRowColor{LightBackground}
NPM & Node package manager. \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{5.377cm}}{Angular CLI} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{5.377cm}}{Webpack} \tn 
% Row Count 3 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}