Angular Cheatsheet (2024)
Sehban Alam · Follow
3 min read · Dec 11, 2024
A ngular, a popular framework for building dynamic web applications,
continuously evolves. This cheatsheet focuses on the latest updates
and core concepts to provide a quick reference for developers.
Table of Contents
1. Project Setup
2. Modules and Components
3. Templates
4. Directives
5. Data Binding
6. Services and Dependency Injection
7. Routing
8. Forms
9. HTTP Client
10. State Management
11. Best Practices
1. Project Setup
Install Angular CLI:
npm install -g @angular/cli
Create a New Project:
ng new my-angular-app
Run Development Server:
ng serve
2. Modules and Components
Create a Module:
ng generate module module-name
Create a Component:
ng generate component component-name
Decorators:
@NgModule : Declares an Angular module.
@Component : Declares a component.
Example: Basic Module and Component
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
bootstrap: [AppComponent]
})
export class AppModule { }
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<h1>{{ title }}</h1>`,
styles: ['h1 { color: blue; }']
})
export class AppComponent {
title = 'Hello Angular!';
}
3. Templates
Interpolation:
<p>{{ expression }}</p>
Property Binding:
<img [src]="imageUrl">
Event Binding:
<button (click)="handleClick()">Click me</button>
Two-Way Binding:
<input [(ngModel)]="data">
4. Directives
Structural Directives:
*ngIf : Conditionally includes a template.
*ngFor : Repeats a template for each item in a list.
<div *ngIf="isVisible">Content</div>
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
Attribute Directives:
ngClass : Dynamically adds/removes classes.
ngStyle : Dynamically sets styles.
<p [ngClass]="{'active': isActive}">Dynamic class</p>
<p [ngStyle]="{'color': textColor}">Dynamic style</p>
5. Data Binding
Types:
1. Interpolation: {{ data }}
2. Property Binding: [property]="expression"
3. Event Binding: (event)="handler"
4. Two-Way Binding: [(ngModel)]="data"
Open in app Sign up Sign in
6. Services and Dependency Injection
Search Write
Create a Service:
ng generate service service-name
Inject Service into Component:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class MyService {
getData() { return 'data'; }
}
import { Component } from '@angular/core';
import { MyService } from './my.service';
@Component({
selector: 'app-root',
template: `<p>{{ data }}</p>`
})
export class AppComponent {
data: string;
constructor(private myService: MyService) {
this.data = this.myService.getData();
}
}
7. Routing
Configure Routes:
ng generate module app-routing --flat --module=app
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: '**', redirectTo: '' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
8. Forms
Template-Driven Form:
<form #form="ngForm" (ngSubmit)="onSubmit(form)">
<input name="email" ngModel required>
<button type="submit">Submit</button>
</form>
Reactive Form:
import { FormGroup, FormControl } from '@angular/forms';
this.form = new FormGroup({
email: new FormControl('')
});
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<input formControlName="email">
<button type="submit">Submit</button>
</form>
9. HTTP Client
Setup:
import { HttpClient } from '@angular/common/http';
constructor(private http: HttpClient) {}
this.http.get('/api/data').subscribe(data => console.log(data));
10. State Management (NgRx)
Install NgRx:
npm install @ngrx/store @ngrx/effects
Example:
// actions.ts
import { createAction } from '@ngrx/store';
export const increment = createAction('[Counter] Increment');
// reducer.ts
import { createReducer, on } from '@ngrx/store';
import { increment } from './actions';
export const initialState = 0;
export const counterReducer = createReducer(
initialState,
on(increment, state => state + 1)
);
11. Best Practices
Use OnPush change detection for performance.
Prefer Reactive Forms for complex forms.
Use async pipes for Observable data streams.
Break components into smaller, reusable pieces.
Leverage RxJS operators for data streams.
Keep this cheatsheet handy for quick reference while working with Angular!
Angular Front End Development Web Development JavaScript Typescript
Written by Sehban Alam Follow
435 Followers · 5 Following
Software Engineer | Author, ngx-seo-helper | Angular | Android | Firebase |
Problem Solver | Maybe Biased about Google Products & Services 😜
No responses yet
To respond to this story,
get the free Medium app.
More from Sehban Alam
Sehban Alam Sehban Alam
Create a Custom Angular Material Best Practices for Storing Access
Theme: A Step-by-Step Guide wit… Tokens in Angular
Learn how to create a custom theme in Access tokens are essential for securing
Angular Material with this comprehensive… modern web applications. Learn the best…
Oct 30, 2024 30 Oct 21, 2024 153 1
Sehban Alam Sehban Alam
Hello, Angular 19 Implementing OAuth in Angular: A
What’s New in Angular 19: Key Features, Code Step-by-Step Guide
Examples, and Improvements In today’s world of web applications, user
authentication and authorization are critical…
Nov 1, 2024 420 11 Nov 2, 2024 7
See all from Sehban Alam
Recommended from Medium
Rama Jonnada Yogesh Raghav
Stop Using Observables! Angular Angular 18 vs Angular 19: 7
19’s Signal-Based Resource API is… Standout Features Every Develop…
Angular 19 has introduced a game-changing Angular has been a cornerstone for web
feature — the Signal-Based Resource API — … application development. With Angular 19, it…
Feb 6 24 Jan 5 85 1
Lists
General Coding Knowledge Stories to Help You Grow as a
20 stories · 1933 saves Software Developer
19 stories · 1615 saves
Coding & Development Tech & Tools
11 stories · 1022 saves 23 stories · 402 saves
In Developwithmi by Midhul Ankita Patel
Micro Frontends : How to Display Angular 18 and Standalone
Multiple Angular Apps on a Single… Components: A Comprehensive…
Learn how to modify your Angular shell Angular has always been at the forefront of
application to display multiple micro… modern web development, providing…
Feb 24 60 Sep 15, 2024 13
Daniel Kreider WebMinds
How to create a clean architecture How to Replace RxJS
Angular app (in 5 minutes) BehaviorSubject with Angular…
Today I’m going to show you 3 steps to create Replacing RxJS BehaviorSubject with Angular
an Angular app with an amazing clean… Signals
Dec 27, 2024 245 6 3d ago 51 1
See more recommendations
