The open-source Angular framework has a modular architecture and comes with reusable UI components — perfect for building large-scale applications. Angular is based on TypeScript, a programming language heavily influenced by JavaScipt. Moreover, Angular leverages new technology called Ivy, which is the code name for Angular’s compilation and rendering pipeline.
Since Angular is one of the most widely used frameworks, many tech professionals study it to attain stable job opportunities. But you can’t remember all Angular methods and commands by heart. That’s where this handy Angular cheat sheet comes in!
Ready to dive into Angular syntax and breeze through your next Angular project? Use this updated Angular 4 cheat sheet to supplement your web development career.
Download the Complete Angular Cheat Sheet PDF Here.
Angular Cheat Sheet
Before we get started, let’s touch briefly upon Angular JS. The background will help you understand the greater purpose behind using the Angular framework in your work.
What is Angular JS?
Google developed AngularJS, a Javascript framework that helps developers to create fully scaled single-page web apps. The term "single page" refers to the necessity for web pages to be updated.
A single web page consists of multiple moving parts and their organization– navigation bar, footer, sidebar, and more. To inject these components into the same web page, we use AngularJS.
Bottom line? AngularJS makes the web page dynamic. Instead of refreshing the page when a user navigates to a URL, AngularJS injects the needed components into the same page. It basically reuses the components that don't change, which cuts down on load time and offers a better browsing experience.
Now, let’s get into some Angular commands.
Angular CLI Cheat Sheet
The Angular command-line interface (CLI) is a set of commands that help you initialize, develop, and maintain highly scalable and speedy Angular apps directly from the command shell.
In this Angular CLI commands cheat sheet section, we’ll cover various Angular CI commands.
1. Setup
The following command installs Angular CLI globally:
npm install -g @angular/cli2. New Application
The following command sets the prefix to “best:”
ng new best-practises --prefix bestThis command checks the available command list.
ng new --helpThis command simulates the “ng new” command:
ng new best-practises --dry-run3. Lint for Formatting
The Lint command fixes code smells and corrects improper formatting.
ng lint my-app --fixThis next command shows warnings:
ng lint my-appIf you want to format the code, you can use the following command.
ng lint my-app --format stylishNext, this command verifies the accessible list of commands.
ng lint my-app --help4. Blueprints
Generate spec:
--specCheck whether the template will be a.ts file or not:
--inline-template (-t)Check whether the style will be in the.ts file or not:
--inline-style (-s)Create a directive:
ng g d directive-nameCreate a pipeline:
ng g p init-capsCreate customer class in the models folder:
ng g cl models/customerCreates a component without the need for the creation of a new folder.
ng g c my-component --flat trueAssign a prefix:
--prefixCreate an interface in the models folder:
ng g i models/personCreate an ENUM gender in the models folder:
ng g e models/genderCreate a service:
ng g s service-name5. Building Serving
Build an app to /dist folder:
ng buildOptimize and build an app without using unnecessary code:
ng build --aotCreate a build for production:
ng build --prodSpecify serve with opening a browser:
ng serve -oReload when changes occur:
ng serve --live-reloadServe using SSL:
ng serve -sslRecommended Courses
6. Add New Capabilities
Add angular material to project:
ng add @angular/materialCreate a material navigation component:
ng g @angular/material:material-nav --name navComponents and Templates
Components are the most fundamental Angular UI building pieces. An Angular component tree makes up an Angular app.
Sample Component ts File
import { Component } from '@angular/core';
@Component({
// component attributes
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {
title = 'Hello World';
}Component Attributes
changeDetection
The change-detection strategy to use for this component.
viewProviders
Defines the set of injectable objects visible to its view DOM children.
moduleId
The module ID of the module that contains the component.
encapsulation
An encapsulation policy for the template and CSS styles.
interpolation
Overrides the default encapsulation start and end delimiters ({{ and }}.
entryComponents
A set of components that should be compiled along with this component.
preserveWhitespaces
True to preserve or false to remove potentially superfluous whitespace characters from the compiled template.
Component Life Cycles
ngOnInit
Called once, after the first ngOnChanges()
ngOnChanges
Called before ngOnInit() and whenever one of the input properties changes.
ngOnDestroy
Called just before Angular destroys the directive/component.
ngDoCheck
Called during every change detection run.
ngAfterContentChecked
Called after the ngAfterContentInit() and every subsequent ngDoCheck()
ngAfterViewChecked
Called after the ngAfterViewInit() and every subsequent ngAfterContentChecked().
ngAfterContentInit
Called once after the first ngDoCheck().
ngAfterViewInit
Called once after the first ngAfterContentChecked().
Template Syntax
{{user.name}}Interpolation - generates user name.
<img [src] = "user.imageUrl">property binding - bind image url for user to src attribute
<button (click)="do()" ... />Event - assign function to click event
<button *ngIf="user.showSth" ... />Show button when user.showSth is true
*ngFor="let item of items"Iterate through the items list
<div [ngClass]="{green: isTrue(), bold: itTrue()}"/>Angular ngClass attribute
<div [ngStyle]="{'color': isTrue() ? '#bbb' : '#ccc'}"/>Angular ngStyle attribute
Input and Output
Input() To pass value into child component
Sample child component implementation:
export class SampleComponent {
@Input() value: any/string/object/…;
...
}Sample parent component usage:
<app-sample-component [value]="myValue"></app-sampe-component>
Output() Emitting event to parent component
Sample child component:
@Output() myEvent: EventEmitter = new EventEmitter();
onRemoved(item: MyModel) {
this.myEvent.emit(item);
}Sample parent component:
<app-my-component
(myEvent)="someFunction()"></app-my-component>onRemoved in the child component is calling the someFunction() method in the parent component, as we can see in the above two child and parent components.
Content Projection
Content projection in Angular is a pattern in which you inject the desired content into a specific component.
Here’s an example of a parent component template:
<component>
<div>
(some html here)
</div>
</component>Child component template:
<ng-content></ng-content>Let us now inject the following HTML code in the parent component template:
<div well-body>
(some html here)
</div>It will look like:
<component>
<div well-title>
(some html here)
</div>
<div well-body>
(some html here)
</div>
</component>When we combine both the above parent and child template, you get the following result:
<component>
<div well-title>
(some html here)
</div>
<div well-body>
(some html here)
</div>
</component>
<ng-content select="title"></ng-content>
<ng-content select="body"></ng-content>ViewChild Decorator
Offers access to child component/directive/element:
@ViewChild(NumberComponent)
private numberComponent: NumberComponent;
increase() {
this.numberComponent.increaseByOne(); //method from child component
}
decrease() {
this.numberComponent.decreaseByOne(); //method from child component
}Sample for element: html:
<div #myElement></div>component:
@ViewChild('myElement') myElement: ElementRefInstead ElementRef can be used for specific elements like FormControl for forms.
Reference to element in html:
<button (click)="doSth(myElement)"></button>Routing
The Angular Router enables navigation from one view to the next as users perform application tasks.
Sample routing ts file:
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'prod/:id', component: HeroDetailComponent },
{
path: 'products',
component: ProductListComponent,
data: { title: 'Products List' }
},
{ path: '',
redirectTo: '/products',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];Then, this should be added inside Angular.module imports:
RouterModule.forRoot(appRoutes)You can also turn on console tracking for your routing by adding enableTracing:
imports: [
RouterModule.forRoot(
routes,
{enableTracing: true}
)
],Usage
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>routerLinkActive="active" will add active class to element when the link's route becomes active
//Navigate from code
this.router.navigate(['/heroes']);
// with parameters
this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);
// Receive parameters without Observable
let id=this.route.snapshot.paramMap.get('id');CanActivate and CanDeactivate
In Angular routing, two route guards are CanActivate and CanDeactivate. The former decides whether the route can be activated by the current user, while the latter decides whether the router can be deactivated by the current user.
CanActivate:
class UserToken {}
class Permissions {
canActivate(user: UserToken, id: string): boolean {
return true;
}
}CanDeactivate:
class UserToken {}
class Permissions {
canDeactivate(user: UserToken, id: string): boolean {
return true;
}
}Modules
Angular apps are modular and Angular has its own modularity system called NgModules. NgModules are containers for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities.
Sample Module with Comments
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent], // components, pipes, directives
imports: [BrowserModule, AppRoutingModule], // other modules
providers: [], // services
bootstrap: [AppComponent] // top component
})
export class AppModule { }Services
Components shouldn't fetch or save data directly and they certainly shouldn't knowingly present fake data. Instead, they should focus on presenting data and delegate data access to a service.
Sample service with one function:
@Injectable()
export class MyService {
public items: Item[];
constructor() { }
getSth() {
// some implementation
}
}When you create any new instance of the component class, Angular determines the services and other dependencies required by that component by looking at the parameters defines in the constructor as follows:
constructor(private dogListService: MyService){ }The above constructor requires the service: MyService
Register MyService in the providers module:
providers: [MyService]HttpClient
This command handles and consumes http requests.
Add import to module:
import { HttpClientModule} from "@angular/common/http";You can use the above statement in the following way:
import {HttpClient} from '@angular/common/http';
...
// GET
public getData(): Observable {
return this.http.get('api/users/2');
}
// POST
public send(val1: any, val2: any): Observable {
const object = new SendModel(val1, val2);
const options = {headers: new HttpHeaders({'Content-type': 'application/json'})};
return this.http.post(environment.apiUrl + 'api/login', object, options);
}Dependency Injection
This injects a class into another class:
@Injectable({
providedIn: 'root',
})
export class SomeService {}It accepts 'root' as a value or any module of your application.
Declare Global Values
Class:
import {InjectionToken} from '@angular/core';
export const CONTROLS_GLOBAL_CONFIG = new InjectionToken('global-values');
export interface ControlsConfig {firstGlobalValue: string;}Module:
providers: [{provide: CONTROLS_GLOBAL_CONFIG, useValue: {firstGlobalValue : 'Some value' }},Usage (for example in component):
constructor(@Optional() @Inject(CONTROLS_GLOBAL_CONFIG) globalVlues: ControlsConfig) {Pipes
Pipes transform data and values to a specific format. For example:
Show date in shortDate format:
{{model.birthsDay | date:'shortDate'}}Pipe implementation:
@Pipe({name: 'uselessPipe'})
export class uselessPipe implements PipeTransform {
transform(value: string, before: string, after: string): string {
let newStr = `${before} ${value} ${after}`;
return newStr;
}
}usage:
{{ user.name | uselessPipe:"Mr.":"the great" }}Directives
An Attribute directive changes A DOM element’s appearance or behavior. For example, [ngStyle] is a directive.
Custom directive:
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef) { }
@Input('appHighlight') highlightColor: string;
@Input('otherPar') otherPar: any; //it will be taken from other attribute named [otherPar]
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.highlightColor || 'red');
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}Usage:
<p [appHighlight]="color" [otherPar]="someValue">Highlight me!</p>Animations
Animations allow you to move from one style state to another before adding BrowserModule and BrowserAnimationsModule to the module.
Implementation:
animations: [
trigger('openClose', [
state('open', style({
height: '400px',
opacity: 1.5,
})),
state('closed', style({
height: '100px',
opacity: 0.5,
})),
transition('open => closed', [
animate('1s')
]),
transition('closed => open', [
animate('1s')
])
])
]Usage:
<div [@openClose]="isShowed ? 'open' : 'closed'">Angular Forms
In this section of our Angular 4 cheat sheet, we’ll discuss different types of Angular forms.
Template Driven Forms
Form logic (validation, properties) are kept in the template.
sample html
<form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" name="firstName" [(ngModel)]="model.firstName" #firstName="ngModel" [ngClass]="{ 'is-invalid': f.submitted && firstName.invalid }" required />
<div *ngIf="f.submitted && firstName.invalid" class="invalid-feedback">
<div *ngIf="firstName.errors.required">First Name is required</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary">Register</button>
</div>
</form>Sample component:
@ViewChild("f") form: any;
firstName: string = "";
langs: string[] = ["English", "French", "German"];
onSubmit() {
if (this.form.valid) {
console.log("Form Submitted!");
this.form.reset();
}
}Reactive Forms
Form logic (validation, properties) are kept in the component.
Sample HTML:
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>Email</label>
<input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
<div *ngIf="submitted && f.email.errors" class="invalid-feedback">
<div *ngIf="f.email.errors.required">Email is required</div>
<div *ngIf="f.email.errors.email">Email must be a valid email address</div>
</div>
</div>
<div class="form-group">
<button [disabled]="loading" class="btn btn-primary">Register</button>
</div>
</form>Sample component:
registerForm: FormGroup;
submitted = false;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.registerForm = this.formBuilder.group({
firstName: [{{here default value}}, Validators.required],
lastName: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(6)]]
});
}
// convenience getter for easy access to form fields
get f() { return this.registerForm.controls; }
onSubmit() {
this.submitted = true;
// stop here if form is invalid
if (this.registerForm.invalid) {
return;
}
alert('SUCCESS!! :-)')
}Custom Validator for Reactive Forms
Function:
validateUrl(control: AbstractControl) {
if (!control.value || control.value.includes('.png') || control.value.includes('.jpg')) {
return null;
}
return { validUrl: true };
}Usage:
this.secondFormGroup = this._formBuilder.group({
imageCtrl: ['', [Validators.required, this.validateUrl]]
});Multi-field validation:
validateNameShire(group: FormGroup) {
if (group) {
if (group.get('isShireCtrl').value && !group.get('nameCtrl').value.toString().toLowerCase().includes('shire')) {
return { nameShire : true };
}
}
return null;
}Multi-field validation usage:*
this.firstFormGroup.setValidators(this.validateNameShire);Error handling:
<div *ngIf="firstFormGroup.controls.nameCtrl.errors.maxlength">Name is too long</div>
<div *ngIf="firstFormGroup.errors.nameShire">Shire dogs should have "shire" in name</div>Custom Validator Directive for Template-Driven Forms
Shortly, we’ll cover how to register our custom validation directive to the NG_VALIDATORS service. Thanks to multi-parameter we won't override NG_VALIDATORS but just add CustomValidator to NG_VALIDATORS).
Here’s what you use:
@Directive({
selector: '[CustomValidator]',
providers: [{provide: NG_VALIDATORS, useExisting: CustomValidator, multi:true}]
})Example:
@Directive({
selector: '[customValidation]',
providers: [{provide: NG_VALIDATORS, useExisting: EmailValidationDirective, multi: true}]
})
export class CustomValidation implements Validator {
constructor() { }
validate(control: AbstractControl): ValidationErrors {
return (control.value && control.value.length <= 300) ?
{myValue : true } : null;
}
}
For multiple fields:
validate(formGroup: FormGroup): ValidationErrors {
const passwordControl = formGroup.controls["password"];
const emailControl = formGroup.controls["login"];
if (!passwordControl || !emailControl || !passwordControl.value || !emailControl.value) {
return null;
}
if (passwordControl.value.length > emailControl.value.length) {
passwordControl.setErrors({ tooLong: true });
} else {
passwordControl.setErrors(null);
}
return formGroup;
}ngModel in Custom Component
Add to module:
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TextAreaComponent),
multi: true
}
]
Implement ControlValueAccessor interface
interface ControlValueAccessor {
writeValue(obj: any): void
registerOnChange(fn: any): void
registerOnTouched(fn: any): void
setDisabledState(isDisabled: boolean)?: void
}registerOnChange
Register a function to tell Angular when the value of the input changes.
registerOnTouched
Register a function to tell Angular when the value was touched.
writeValue
Tell Angular how to write a value to the input.
Sample implementation:
@Component({
selector: 'app-text-area',
templateUrl: './text-area.component.html',
styleUrls: ['./text-area.component.less'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TextAreaComponent),
multi: true
}
]
})
export class TextAreaComponent implements ControlValueAccessor, OnInit {
@Input() value: string;
private _onChange = (data: any) => { console.log('changed: ' + data); };
private _onTouched = (data?: any) => {console.log('touched: ' + data); };
ngOnInit(): void {
const self = this;
}
constructor() {}
writeValue(obj: any): void {
this.value = obj;
}
registerOnChange(fn) {
this._onChange = fn;
}
registerOnTouched(fn: any): void {
this._onTouched = fn;
}
}Tests
Every software application under development needs to be tested to verify its correctness, and so do the Angular applications. Testing implies executing various tests or test cases on an application to validate it functionality and correctness.
Unit tests
Unit testing, in general, is a type of software testing level that checks various components of an application separately. In Angular, the default unit testing framework is Jasmine. It is widely utilized while developing an Angular project using CLI.
Service:
describe('MyService', () => {
let service: MyService;
beforeEach(() => service = new MyService();
it('#fetch should update data', () => {
service.fetchData();
expect(service.data.length).toBe(4);
expect(service.data[0].id).toBe(1);
});
});For async functions:
it('#fetch should update data', (done: DoneFn) => {
// some code
done(); // we need 'done' to avoid test finishing before date was received
// some code
});example async test:
it('http client works', (done: DoneFn) => {
service.getUser().subscribe((data) => {
expect(data).toBe('test');
done();
});
});Spy and stub
When you make calls during the testing process, a stub provides canned answers to all those calls. It does not respond to anything outside the program under test.
A spy is a stub that records the information based on the calls you make during the test.
Spy:
// create spied object by copy getDataAsync from HttpService
const valueServiceSpy =
jasmine.createSpyObj('HttpService', ['getDataAsync']);Stub:
const stubValue = of('StubValue');
valueServiceSpy.getDataAsync.and.returnValue(stubValue);TestBed Mock whole module/environment for unit tests:
beforeEach(() => {
let httpClientMock = TestBed.configureTestingModule({ providers: [{ provide: MyService, useValue: new MyService(httpClientMock)}] });
});Then use tested object (for example service) like this:
service = TestBed.get(MyService);We can add schemas: [NO_ERRORS_SCHEMA]. This means that we don’t have to mock child component dependencies of this component because Angular won’t yell if we don’t include them!
Miscellaneous
Http Interceptor
An HTTP interceptor can handle any given HTTP request.
Class:
@Injectable()
export class MyInterceptor implements HttpInterceptor {
constructor() { }
intercept(request: HttpRequest, next: HttpHandler): Observable> {
// do sth (like check and throw error)
return next.handle(request); //if want continue
}
}Parameters:
- req: HttpRequest<any> - It is the object that handles outgoing requests.
- next: HttpHandler - It indicates the next interceptor in the line or the backend in case there are no incerptors.
Returns:
An HTTP interceptor returns the observable of the event stream.
Observable<HttpEvent<any>>
Conclusion
Here we have reached the end of the Angular cheat sheet. We discussed various domains like forms, pipes, directives, routes, etc. along with their usage and examples.
Web development work is lengthy most of the time, so a quick reference for Angular commands and syntax goes a long way.
Interested in finding more references to speed up your work? Try another cheat sheet!
Explore the JavaScript Cheat Sheet
Frequently Asked Questions
1. What is the Angular Cheat Sheet?
The Angular cheat sheet is a set of short notes that covers all Angular topics, from pipes to directives, and comes in handy for a quick reference.
2. What Are Components in Angular?
Angular components are the most fundamental building blocks of any Angular application.
3. What Is a Question Mark in Angular?
An Angular question mark refers to a “Safe Navigation operator.” It makes sure that there are no null or undefined values in an Angular application when we try to access an object’s properties.
4. What Is Ng in Angular?
In Angular, ‘ng’ is a prefix for all the built-in directives that ship with Angular.
