Angular Cheat Sheet – Quick Reference Guide for 2025

The Angular CLI (Command Line Interface) is a powerful and efficient tool that simplifies many tasks in an Angular project through easy-to-use commands. It takes care of everything behind the scenes, allowing developers to focus more on building features.

For instance, when you want to create a new Angular project, the CLI automatically sets up the application, compiles it, and gets it ready for testing. It also runs a development server that continuously watches your source files for any changes. As soon as you update your code, the CLI recompiles the application and instantly refreshes it in the browser, making development smooth and seamless.

Step 2: Angular Project Structure

When you create a new Angular project using ng new, Angular sets up a complete folder structure to help you scale your app efficiently.Here’s a detailed look at each core part of the structure:

1. e2e/

• End-to-end test folder.
• Contains test cases written using Protractor (or Cypress if configured).
• Ensures full workflows work as expected.

2. node_modules/

• Contains all npm packages your Angular app depends on.
• Automatically created when you run npm install.

3. src/

Main working directory for your app code.

src/app/

• This is where your actual application code resides.
• Default files:
• app.component.ts/html/css/spec.ts – Root component
• app.module.ts – Root module (bootstraps the app)

src/assets/

• Place to store static files such as images, logos, or JSON files.
• All files here are copied as-is to the output during build.

src/environments/

• Environment-specific configurations.
• Contains:
• environment.ts – Dev environment variables
• environment.prod.ts – Production variables
• Used with Angular’s fileReplacements During the build for --prod.

4. angular.json

Central CLI configuration.

• Defines how your app is built, served, and tested.
• Key sections:
• "projects": Your app config
• "architect": Details like build, serve, and test commands
• "styles": Global styles to include
• "fileReplacements": For switching environments

5. package.json

Lists project dependencies, scripts, and versions.

• "dependencies" – Needed at runtime
• "devDependencies" – Needed for development (e.g., testing, building)
• "scripts" – Commands like start, test, lint

6. tsconfig.json

TypeScript compiler options.

• Controls type-checking, module formats, and includes/excludes.
• Extended by other files like tsconfig.app.json, tsconfig.spec.json

7. main.ts

The main entry point of the application.Bootstraps AppModule.

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

8. index.html

Main HTML page that Angular mounts to.Contains the <app-root></app-root> selector where your root component gets loaded.

9. styles.css or styles.scss

Global stylesheet for the application.All global styles (not scoped to components) go here.

10. polyfills.ts

Includes necessary polyfills for browser compatibility.Example: core-js, zone.js

Example Tree (Simplified)

my-app/
├── e2e/
├── node_modules/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   ├── assets/
│   ├── environments/
│   │   ├── environment.ts
│   │   └── environment.prod.ts
│   ├── index.html
│   ├── main.ts
│   ├── styles.css
├── angular.json
├── package.json
├── tsconfig.json

Step 3: Angular Modules

In Angular, modules help you organize your application into cohesive blocks of functionality. The Angular compiler needs at least one module to bootstrap the app: the root module (AppModule).

What is an Angular Module?

An Angular module is defined using the @NgModule() decorator.

@NgModule({
  declarations: [...],  // Components, directives, pipes
  imports: [...],       // Other modules (BrowserModule, RouterModule, etc.)
  providers: [...],     // Services or injectables
  bootstrap: [AppComponent]  // Root component to load
})
export class AppModule { }

Key Properties of @NgModule

Types of Modules

1. Root Module (AppModule)

• Bootstraps the app.
• Loaded via main.ts.
• Declares global providers and components.

2. Feature Modules

• Encapsulates a specific feature of the app.
• Promotes modularization, lazy loading, and reusability.

@NgModule({
  declarations: [UserProfileComponent],
  imports: [CommonModule]
})
export class UserModule {}

3. Shared Module

• Contains reusable components, directives, and pipes.
• Imported by feature modules, not root.

@NgModule({
  declarations: [CustomButtonComponent],
  exports: [CustomButtonComponent, CommonModule]
})
export class SharedModule {}

4. Lazy-Loaded Modules

• Loaded on demand to improve performance and reduce initial load time.
• Loaded using Angular Router.
• Important: Lazy-loaded modules should not be imported in AppModule.

const routes: Routes = [
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
];

Common Angular Built-in Modules

Best Practices

• Keep each module focused on a single responsibility.
• Do not declare components in multiple modules.
• Export only what's necessary in shared modules.
• Use lazy loading for large feature modules.
• Always import CommonModule in feature/shared modules, not BrowserModule.

Real Example: Feature + Shared Module

// shared/shared.module.ts
@NgModule({
  declarations: [CustomPipe],
  exports: [CustomPipe, CommonModule],
  imports: [CommonModule]
})
export class SharedModule { }

// features/user/user.module.ts
@NgModule({
  declarations: [UserComponent],
  imports: [CommonModule, SharedModule]
})
export class UserModule { }

Step 4: Components

In Angular, components are the building blocks of the UI. Every view you see in the app — a page, a form, a button — is typically controlled by a component.

What is a Component?

A component is a TypeScript class marked with the @Component() decorator. It controls a section of the user interface (UI) called a "view."

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent {
  title = 'Hello Angular!';
}

Anatomy of a Component

• selector: The custom HTML tag used to embed this component. Example: <app-hello></app-hello>
• templateUrl / template: URL to an external HTML file or inline HTML.

template: `<h1>Hello {{ title }}</h1>`

• styleUrls / styles: Array of CSS/SCSS file paths or inline styles.

styles: ['h1 { color: blue; }']

Lifecycle Hooks (Execution Phases of a Component)

Data Binding in Components

• Interpolation – {{ value }} Bind component class values to HTML.

  <h1>{{ title }}</h1>

• Property Binding – [property]="value" Bind element properties like src, disabled, value.

  <input [value]="username">

• Event Binding – (event)="method()" Call a component method when an event occurs.

  <button (click)="sayHello()">Click Me</button>

• Two-way Binding – [(ngModel)] Used for two-way data flow (in and out). Requires FormsModule.

  <input [(ngModel)]="name">

Passing Data Between Components

• Parent to Child – @Input()

@Input() title: string;

<app-card [title]="parentTitle"></app-card>

• Child to Parent – @Output()

@Output() onClick = new EventEmitter<string>();

<app-card (onClick)="handleEvent($event)"></app-card>

View Encapsulation (Scoped CSS)

Angular provides three encapsulation modes:

• Emulated: Scoped styles using attributes (default)
• None: Global styles
• ShadowDom: Uses native Shadow DOM

@Component({
  ...
  encapsulation: ViewEncapsulation.Emulated
})

Component Communication Patterns

Best Practices

• Follow a naming convention: user.component.ts, user.component.html
• Keep components small and focused.
• Use OnPush change detection when possible for performance.
• Avoid putting business logic inside components (use services instead).
• Use ngOnDestroy to clean up observables/subscriptions.

Sample Example

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent {
  @Input() productData: Product;
  @Output() productClicked = new EventEmitter();

  onClick() {
    this.productClicked.emit(this.productData);
  }
}
    

Real World Example

@Component({
  selector: 'app-greet',
  template: `<h2>Hello, {{ name }}</h2>`,
  styles: [`h2 { color: green; }`]
})
export class GreetComponent {
  @Input() name: string = 'World';
}

Step 5:Directives and Pipes

Directives are instructions in the DOM. In Angular, they enhance HTML by adding behavior, structure, or custom logic. There are three types of directives:

1. Structural Directives

They change the DOM layout by adding or removing elements.

*ngIf

Conditionally includes a template:

<div *ngIf="isLoggedIn">Welcome back!</div>

Using else block:

<div *ngIf="isLoggedIn; else loginBlock">Welcome</div>
<ng-template #loginBlock><p>Please log in</p></ng-template>

*ngFor

Loops through data collections:

<li *ngFor="let item of items; let i = index">
  {{ i + 1 }}. {{ item }}
</li>

*ngSwitch, *ngSwitchCase, *ngSwitchDefault

Switch case logic:

<div [ngSwitch]="role">
  <p *ngSwitchCase="'admin'">Admin Panel</p>
  <p *ngSwitchCase="'user'">User Dashboard</p>
  <p *ngSwitchDefault>Guest Page</p>
</div>

2. Attribute Directives

They change the appearance or behavior of elements.

ngClass

Applies CSS classes dynamically:

<div [ngClass]="{ 'active': isActive }">Click Me</div>

ngStyle

Applies inline styles dynamically:

<p [ngStyle]="{ 'font-size.px': fontSize, color: fontColor }">
  Styled text
</p>

Custom Attribute Directive

You can create your own directive:

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

Usage:

<p appHighlight>Highlighted paragraph</p>

3. Component Directives

Technically, every component is a directive with a template.

Best Practices for Directives

• Use attribute directives for behavior (like hover, drag).
• Use structural directives for layout control.
• Keep directive names descriptive and prefix them.
• Clean up event listeners in ngOnDestroy().

Pipes

Pipes transform data in templates, similar to filters.

Built-in Pipes

Chaining Pipes

You can use multiple pipes together:

{{ name | uppercase | slice:0:3 }}

Custom Pipe

Example of a custom pipe:

@Pipe({ name: 'reverse' })
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

Usage:

<p>{{ 'Angular' | reverse }}</p>  

Pure vs Impure Pipes

Lifecycle Hooks

Angular Module Types Summary

• AppModule: Root module
• FeatureModule: Encapsulated feature
• SharedModule: Shared components/pipes
• CoreModule: Singleton services

Advanced Tips & Best Practices

• Use trackBy with *ngFor
• Split features into lazy-loaded modules
• Use async pipe instead of manual subscription
• Write logic in components/services, not templates

Conclusion

The Angular Cheat Sheet serves as a handy reference for both beginners and experienced developers looking to build scalable, high-performance web applications using Angular. By consolidating core concepts like components, directives, services, routing, and dependency injection in one place, it enables faster development and fewer errors. Whether you're quickly revisiting syntax or clarifying Angular lifecycle hooks, this cheat sheet is a time-saving tool that enhances your productivity. Use this cheat sheet as your go-to reference for quick insights, best practices, and key Angular concepts as you continue your journey toward becoming a professional Angular developer.