DEV Community

Nikko Ferwelo
Nikko Ferwelo

Posted on

πŸ“ 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

Top comments (2)

Collapse
 
yutamago profile image
Info Comment hidden by post author - thread only accessible via permalink
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

Collapse
 
yutamago profile image
Info Comment hidden by post author - thread only accessible via permalink
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.

Some comments have been hidden by the post's author - find out more