☰

Angular Cheat Sheet

Angular is a JavaScript front-end framework,

which is used to develop web and mobile apps.
As the name suggests, it is a declarative
approach to developing an application. It is,
therefore, different from other JavaScript
frameworks like React, which is an application of
higher-order JavaScript. The development
process of an Angular application is not different
from other traditional web apps. The structure of
the code is similar to the following: directives,
services, models, pipes, and Rural routes. The
only difference is that the source code of the
application is written in angular format.

You may hear of too many versions of Angular as

a beginner, and as a result, it is likely that you will
get confused with so many different versions out
there for the same framework. There are versions
like AngularJS, Angular 2, Angular 4, Angular 5,
Angular 6, Angular 7, Angular 8, and now Angular
9. There are actually two different frameworks -
AngularJS and Angular.

In 2010, AngularJS was the initial release and was

known as AngularJS. It was a JavaScript-based
web development framework that was developed
and maintained by Google. The type-setting
language JavaScript is super-set to the language
of Java. In September 2016, Angular 2 was
created, which was a complete rewrite of the
framework using TypeScript, a superset of
JavaScript.

In this article, we will discuss some of the Angular

features. You can follow this angular cheat sheet
to build your application. We've tried to cover
Angular CLI, Angular Lifecycle Hooks, Angular
Routing, and a lot more in this post.

Crack your next tech interview with

confidence!
Take a free mock interview, get instant
feedback and recommendation

Angular Tutorial: Basics to

Advanced

1. Angular CLI

The Angular CLI or the command line interface is

a very powerful and sophisticated tool that
enables you to perform a lot of tasks in an
Angular project by utilizing simple commands.
Everything is handled by the CLI.     In order to
scaffold a brand-new Angular project, for
example, the CLI generates the application,
compiles the application, and ships it to you for
testing.   The development server monitors the
source code files for changes and when you
change any of them, it automatically compiles the
source code files and refreshes the app in the
browser.

Command Meaning

npm install - To install the Angular CLI into our

g local machine using npm, run this
@angular/cli command.

Displays the information about

ng version
the currently installed CLI.

ng new Using the ng new command, a

<application new Angular application will be
name> created.

ng new
<application New project is created, and the
name> -- project prefix is set to new.
prefix best

All available Angular commands

ng new --help
are returned by this command.

Linting warnings are checked

ng lint my-
against this command in our
app
entire application.

ng lint my- This command will correct any

app --fix form of linting errors.

ng lint my-
Our entire codebase is formatted
app --format
using this command.
stylish

2. Angular Lifecycle Hooks

Angular apps are made up of pieces. There are

pieces in an Angular app that are tree-structured,
and pieces that consist of more pieces. An
Angular app is made up of components, which is
a tree of components. A component is a
template, a typescript class, and a stylesheet file.
Angular components have a lifecycle that is
administered by Angular.

The Angular lifecycle hooks provide fine-grained

control of Angular by capturing different phases
of birth to death. You can see how Angular
phases change in certain portions of its lifecycle.
Here's how you can control the phases of Angular
using Angular lifecycle hooks.

Hook Significance

The content is
processed or child
views are loaded
before this hook is
ngOnChanges
executed. It is also
executed when the
input properties of the
component change.

Data can be initialized

in a component by
calling this hook after
ngOnInit input values are set. It
is performed only once
after input values are
set.

You can use this hook

to clean up memory
and release resources
ngOnDestroy
and subscriptions after
a component is
destroyed.

Any changes detected

ngDoCheck are handled using this
hook.

After performing

Template Syntax Details

Binds the
“name”
expression
<input [val]="name">
result to the
property
“val”

An
expression
that binds an
<div
attribute role
[attr.role]="myAriaRole">
to a result of
expression
“myAriaRole”.

The 
truthiness of
the
<div expression
[class.extra]="isADelight"> isADelight
binds to the
CSS class
extra

The result of
the
expression
<div myHeight
[style.height.px]="myHeight"> binds to the

3. DECORATORS

Classes and fields can be decorated with

Angular's dozens of decorators. These are some
of the most commonly used decorators.

Class Decorators Details

import {
Directive, ... } This imports the Directive
from from @angular/core
'@angular/core';

@Component({...})  Metadata about a

class component is declared as
MyComponent() {} part of the class definition.

Declares the class as a

@Directive({...})
directive and provides
class
metadata about the
MyDirective() {}
directive

Declares the class as a

@Pipe({...}) 
pipe and provides
class MyPipe() {}
metadata about the pipe.

This declares that class

can be injected and
provided. Without this
@Injectable()  decorator, the compiler
class MyService() does not generate enough
{} metadata to allow the class
to be created properly
when it is injected
somewhere.

CLASS FIELD DECORATORS Details

Import Inp
import { Inp } from
from
 '@angular/core';
@angular/core.

You can
declare input
properties that
@Input() myProperty; you can bind
to using
property
binding

An output
property is
@Output() myEvent = new declared that
EventEmitter(); can fire
subscribable
events.

Host element
property is
@HostBinding('class.valid')
binded to a
isValid;
component
property

Host element
event is
@HostListener('click', subscribed
['$event']) onClick(e) {...} with a
DEPENDENCY INJECTION CONFIGURATION

A dependency is a piece of information needed

by a class to carry out its task. A service, on the
other hand, is an object that a class creates and
uses to carry out its tasks.A dependency
injection container such as Angular's
Dependency Injection(DI) framework is used to
create the dependencies. Most of the time, a
class depends on other classes, rather than on
itself, to create the required dependencies.
Dependencies are created by external sources,
such as services and other classes. Following are
dependency injection configuration as part of
Angular’s DI framework:

DEPENDENCY INJECTION CONFIGURATION DE

Inter
prov
{ provide: InterviewBitService,
over
useClass: InterviewBitMockService }
Inter
clas

Inter
prov
{ provide: InterviewBitService,
over
useFactory: InterviewBitFactory }
Inter
fact

Inter
{ provide: InterviewBitValue, prov
useValue: 56 } over
56

4. Angular Directives

An element or component can be assigned an

attribute directive or a structural directive to
modify its behaviour. An attribute directive is an
attribute that is associated with an element or
component. A structural directive is a directive
that modifies the structure of an element or
component.

1. Attribute Directives: An element, component,

or other directive can be decorated with an
attribute directive. Angular exports the following
attribute directives:

Directive Details Example

A CSS
class can <div
be added [ngClass]="isIntervie
NgClass
or removed ? 'Yes' : ''">This co
via special</div>
NgClass.

HTML
styles can <div [ngStyle]="{ 'fo
be added 3 +3 === 6 ? 'light'
NgStyle
or removed 'normal', }"> This di
via </div>
NgStyle..

Two-way
data
binding to
an HTML
<input
NgModel form
[(ngModel)]="intervie
element
can be
added via
NgModel..

2. Structural Directives: Elements that are

added or removed from the DOM in Angular's
structure are referred to as structural directives.
Here are the most prevalent structural directives
in Angular:

Directive Details

The Angular conditional NgIf

directive conditionalizes the
NgIf value of NgIf. If the NgIf
directive's value is false,
Angular removes the element.

The Angular NgFor directive

loops through an array or list. It
comes in two types: The ng-for
NgFor directive, which loops through
a ul> or ol> element; and the
ng-for-each directive, which
iterates through a collection.

NgSwitch is a structural
directive, meaning that it
NgSwitch should be assigned a particular
value depending on the
context in which it is used.

A NgSwitchCase structure
stores a matched value for
NgSwitchCase NgSwitch, and it can also be
used to refer to a matched
value.

When the expression does not

match any of the specified
NgSwitchDefault
values, NgSwitchDefault

5. Pipes

Templates typically use pipes to change content

but it does not directly affect data. For example:

Pipe Details Example

Locale-
specific
date {{ value_expr |
DatePipe
formatting date: 'long'}}
is
performed.

Given text is
{{
transformed
UpperCasePipe 'InterviewBit''
into upper
| uppercase }}
case text.

Given text is
{{
transformed
LowerCasePipe 'InterviewBit'
into lower
| lowercase }}
case text.

Given
number is
{{ 4.4324 |
transformed
CurrencyPipe currency:'USD'
into a
}}
currency
string.

Given
number is
transformed {{ 1.1334354654
DecimalPipe
into a | number }}
decimal

Conclusion

In this document, we’ve covered the basics of

Angular, its features and some of the important
cheat sheets. Now, it’s time for you to head out
and try what we’ve covered here and more. More
than memorizing syntax, do pay attention to
practising them and solving problems.

Additional Resources

https://www.interviewbit.com/javascript-
interview-questions/
https://www.interviewbit.com/angular-
interview-questions/
https://www.interviewbit.com/angularjs-
interview-questions/
https://www.interviewbit.com/blog/angular-
architecture/
https://www.interviewbit.com/angular-8-
interview-questions/
https://www.interviewbit.com/angular-mcq/

Angular MCQ Questions

1.How do you express AngularJS expressions in
JavaScript?

(expr)

{{{expr}}}

{{expr}}

[expr]

2.How is interpolation done in angular 2?

{{}}

{{|var}}

{{{}}}

!!!!

3.In Angular 2 application life cycle, which of the

following is not a hook?

ngOnChanges

ngOnInit

ngAfterViewInit

ngViewStart

4.Which of the following directives binds an

HTML control to application data?

ng-app

ng-init

ng-model

ng-hide

5.What kind of decorator makes a class a

service?

Injectable

Injector

Component

Service

6.Which of the following qualities is not present in

Angular?

Pipes

Component

RoutingLink

Directives

7.Out of the following, which pipe is not built-in in

Angular?

DatePipe

CurrencyPipe

DataPipe

PercentPipe

8.What expression can be considered valid in an

AngularJS?

{{ 2 + 2 }}

{2+2}

(( 2 + 2 ))

{ (2 + 2) }

9.Which directive is used to bootstrap AngularJS

framework?

Ng-init

Ng-app

Ng-controller

Ng-bootstrap

10.JSON format is required to build model in

AngularJS framework

True

False

Blog About Us

FAQ Contact Us

Terms Privacy Policy

 Email  Like Us  Follow Us

Online Interviewbit Compilers

Online C Compiler Online C++ Compiler

Online Java Compiler Online Javascript

Compiler

Online Python
Compiler

Interview Preparation

Top Interview
Questions

Language, Tools & Java Interview

Technologies Questions

Sql Interview Python Interview

Questions Questions

Javascript Interview Angular Interview

Questions Questions

Networking Interview Selenium Interview

Questions Questions

Data Structure Interview Data Science Interview

Questions Questions

System Design Interview Hr Interview Questions

Questions

Html Interview C Interview Questions

Questions

View All

Companies Amazon Interview

Questions

Facebook Interview Google Interview

Questions Questions

Tcs Interview Accenture Interview

Questions Questions

Infosys Interview Capgemini Interview

Questions Questions

Wipro Interview Cognizant Interview

Questions Questions

Deloitte Interview Zoho Interview

Questions Questions

Hcl Interview View All

Questions

Top Articles

Highest Paying Jobs In Exciting C Projects Ideas

India With Source Code

Top Java 8 Features Angular Vs React

10 Best Data Structures Exciting C Projects Ideas

And Algorithms Books With Source Code

Best Full Stack Best Data Science

Developer Courses Courses

Python Commands List Data Scientist Salary

Maximum Subarray Sum View All

Kadane’s Algorithm

Top Cheat Sheet

Python Cheat Sheet C++ Cheat Sheet

Javascript Cheat Sheet Git Cheat Sheet

Java Cheat Sheet View All

Top MCQ

Java Mcq Data Structure Mcq

Dbms Mcq C Programming Mcq

C++ Mcq Python Mcq

Javascript Mcq View All

Get Placed at Top Product Companies with
Scaler