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