Angular Cheat Sheet for Web Development


Angular Cheat Sheet for Web Development

Angular is defined as a front-end web development framework that is specifically used to build single-page web applications, which are also called SPAs. This platform uses TypeScript as the main programming language. The angular framework itself is coded in the TypeScript language. Angular is considered as a dogmatic framework. While developing apps with Angular, you must bear it in mind that it specifies a certain style and lays down a specific set of rules that development professionals need to learn, follow, and stick to. Hence, you need to learn Angular and its different modules, components, and tools which are necessary to make an app while using Angular.

As a beginner, you may hear about different versions of Angular, which is more likely to confuse you. Some versions include AngularJS, Angular 2, Angular 4, Angular 5, Angular 6, Angular 7, Angular 8, and recently in February 2020, and Angular 9 was introduced. There are only two different frameworks of Angular, which are; AngularJS and Angular.

This article will let you explore the Angular Cheat Sheet, which can be used as a quick reference guide while learning the language. Let’s go through the main concepts, commands, utilities, and other basics of Angular.

Angular CLI

The angular command-line interface, also called Angular CLI, is a very powerful and useful tool that enables developers to perform a variety of actions in an Angular project through the use of simple commands. The CLI takes care of everything, ranging from supporting a brand-new Angular project to building the project for production. 

Furthermore, CLI also allows developers to debug the application during development. It’s done through locally using a development server which overlooks the source files for changes. Once the change is made in any of the files, by default, it automatically recompiles the source code files and refreshes the app in the browser.

The CLI tool can be used directly in a command shell, or indirectly via an interactive UI, such as Angular Console.

Here are some ways to use the Angular CLI:



ng help

This command gives you options to get help about any utility command.

ng version

The command prints the version info of the currently running CLI.

ng new   

This command generates a new Angular project with the given name.

ng serve

This command Spins up the local development server and launches the web app locally in the browser. Moreover, this command also considers more parameters, like port and open. The server automatically rebuilds the app and reloads the page when any of the source files are changed.

ng build

Complies and builds the Angular app into a directory that can be deployed on the webserver.

ng generate

It is used to generate modules, services, components, classes, providers, pipes, etc.





npm install -g @angular/CLI

Globally Install Angular CLI


            New Application



ng new best-practices --dry-run

just simulate ng new

ng new best-practices --skip-install

skip install means don't run npm install

ng new best-practices --prefix best

set prefix to best

ng new --help

check available command list


Lint enables you to check and make sure that code is free of code smells or bad formatting.




ng lint my-app --help

Checks available command list

ng lint my-app --format stylish

Formats code

ng lint my-app --fix

Fixes code bad formatting

ng lint my-app

Shows warnings


Blue Prints



ng g c my-component --flat true

Don't create a new folder for this component

--inline-template (-t)

Will the template be in .ts file?

--inline-style (-s)

Will the style be in .ts file?


Generates spec or not?


Assigns own prefix

ng g d directive-name

Directive creation

ng g s service-name

Service creation

ng g cl models/customer

Customer class creation in the model's folder

ng g I models/person

Create interface creation in the model's folder

ng g e models/gender

Create ENUM gender creation in the model's folder

ng g p init-caps

Create pipe creation


Building & Serving



ng build

Build apps to dist. folder

ng build --aot

Builds app without a code which is not needed

ng build --prod

Builds for production

ng serve -o

Serves with browser opening

ng serve --live-reload

Reloads as per changes

ng serve -ssl

Serving while using SSL


Adding New Capabilities



ng add @angular/material

Adds Angular material into the project

ng g @angular/material:material-nav --name nav

Creates material navigation module


Components and Templates

Components are considered as the most basic UI building blocks of any Angular app. An app built in Angular contains a chain of elements.


import { Component } from '@angular/core';



            // component attributes

            selector: 'app-root',

            templateUrl: './app.component.html',

            styleUrls: ['./app.component.less']



export class AppComponent {

            title = 'my-cats-training';



Component Attributes




The change detection plan to use for this component.


Defines the set of injectable entities which are visible to its view DOM children


The module ID of the element which contains the component


An encapsulation rule used for the template and CSS styles


Overrules the built-in encapsulation start and end delimiters


A collection of components which must be compiled along with this component.


If True, then preserve, or if False then removes, potentially redundant whitespace characters from the compiled template.

Previous Post Next Post
Hit button to validate captcha