📝 Angular Cheat Sheet for Developers

Hey everyone! 👋

I’ve put together a comprehensive Angular Cheat Sheet to help you quickly reference important concepts, commands, and patterns when working on your Angular projects. Whether you're a seasoned developer or just getting started, this guide should serve as a handy resource.

Let’s dive in!

🔗 Core Concepts

• Angular: JavaScript binding framework.
• Testing: Jasmine.
• Typescript: Superset of JavaScript.

📦 Decorators

• Decorator: @Component, @Directive
  • Metadata for classes and methods.
• Component Directive: @Component
  • Defines view, logic, and template.
• Structural Directive: ngIf, ngFor
  • Modifies DOM elements conditionally.
• Attribute Directive: [ngClass], [ngStyle]
  • Alters behavior or appearance dynamically.

🔗 Bindings

• Interpolation: {{ value }}
  • Binds data directly into templates.
• Event Binding: (click)="onClick()"
  • Handles events triggered by user.
• Property Binding: [src]="imagePath"
  • Sets property values within template.
• Two-Way Binding: [(ngModel)]="userInput"
  • Synchronizes data between view/model.

🚧 Routing and Guards

• Guards: canActivate, canLoad
  • Controls access to routes/modules.
• canActivate: canActivate: [AuthGuard]
  • Checks route access before navigation.
• canLoad: canLoad: [AuthGuard]
  • Restricts module loading with conditions.

💡 Component and Templates

• Components: @Component
  • Encapsulates UI logic and template.
• Templates: templateUrl, template
  • Defines HTML structure for component.

🚀 Lifecycle Hooks

• ngOnInit: ngOnInit()
  • Initializes component after data binding.
• ngOnChange: ngOnChanges()
  • Detects input property changes automatically.
• ngOnDestroy: ngOnDestroy()
  • Cleans up resources before destruction.

🧩 Directives and Pipes

• Ng Content: <ng-content></ng-content>
  • Projects content into component slots.
• ngIf: ngIf="condition"
  • Conditionally includes or excludes elements.
• ngModel: [(ngModel)]="model"
  • Facilitates two-way data binding easily.
• ngClass: [ngClass]="{'active': isActive}"
  • Dynamically applies classes to elements.
• ngSwitch: ngSwitch="expression"
  • Conditionally displays matching elements.
• Pipes: {{ value | pipeName }}
  • Transforms data in templates easily.

📦 Modules and Services

• Modules: @NgModule
  • Groups components, directives, and services.
• Services: @Injectable, constructor(private service: Service)
  • Provides reusable logic across components.

🔌 Additional Concepts

• Dependency Injection: constructor(private service: Service)
  • Supplies dependencies automatically to components.
• Lazy Loading: loadChildren
  • Loads modules only when needed.
• Observables: Observable, rxjs
  • Manages asynchronous data streams.
• Resolvers: resolve: Resolver
  • Pre-fetches data before activating routes.

⚙️ Commands and Tools

• ngServe: Command
  • Runs Angular development server locally.
• ngBuild: Command
  • Compiles application for production deployment.
• Forms: ReactiveFormsModule, FormsModule
  • Handles user input and validation.
• HTTP Client: HttpClientModule, HttpClient
  • Communicates with backend APIs effectively.

🧠 Angular Architecture

• SPA: Single-page application
  • Loads content dynamically without refreshing.
• Angular Architecture: MVC pattern
  • Uses modular, component-based architecture.
• Routing: RouterModule
  • Navigates between different application views.

---

I hope this cheat sheet helps you in your Angular development journey. 🚀

Feel free to bookmark it or share it with your fellow developers!

If you have any additions or suggestions, drop them in the comments below. Happy coding! 💻

Connect with me:
LinkedIn: https://www.linkedin.com/in/nikko-ferwelo-358b11213/
GitHub: https://github.com/NullVoidKage

Comments

[Yutamago]

There's a lot of outdated concepts here and many important new concepts are missing.

And without links to the specific articles in the documentation at angular.dev (or the tutorials) I find this cheat sheet pretty useless.

2/10

[Yutamago]

Some of the outdated:

• the structural directives got replaced
• the most commonly used attribute directives are not mentioned
• Binding section doesn't mention host binding
• canActivate and canMatch got deprecated and replaced
• lifecycle hooks are not the best practice anymore and got replaced with signal alternatives
• signals not mentioned
• inject() not mentioned
• nobody uses ngmodules anymore
• standalone components not mentioned
• RouterModule replaced with provideRouter()

Anyone with experience could write this article 10x better than this AI generated crap.