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)
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
Some of the outdated:
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