Scribd
Upload
89 views14 pages

Angular Cheatsheet (2024) - Angular, A Popular Framework For - by Sehban Alam - Medium

The Angular Cheatsheet (2024) provides a concise overview of the latest updates and core concepts in Angular for developers. It covers essential topics such as project setup, modules, components, data binding, services, routing, forms, HTTP client, state management, and best practices. This resource serves as a quick reference for developers working with Angular applications.

Uploaded by

missiona.carla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
89 views14 pages

Angular Cheatsheet (2024) - Angular, A Popular Framework For - by Sehban Alam - Medium

The Angular Cheatsheet (2024) provides a concise overview of the latest updates and core concepts in Angular for developers. It covers essential topics such as project setup, modules, components, data binding, services, routing, forms, HTTP client, state management, and best practices. This resource serves as a quick reference for developers working with Angular applications.

Uploaded by

missiona.carla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

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

You might also like