Angular is a popular framework for building web applications. Developed by Google, Angular provides developers with a powerful set of tools and features to build modern, dynamic, and scalable web applications. It is built on top of TypeScript, a superset of JavaScript, which provides features such as static typing, classes, and interfaces.
This cheat sheet provides a quick reference for some of the most commonly used features in Angular. Divided into themes such as Components, Data Binding, Directives, Services, Dependency Injection, Pipes, Modules, and Routing, the cheat sheet covers everything from component decorators to route configurations.
Components are the building blocks of an Angular application. They encapsulate a specific feature or functionality and can be reused throughout the application. Data binding allows you to connect the data from your components to your templates, allowing for dynamic updates to your application. Directives provide a way to add custom behavior to elements in your templates.
Services are used to provide functionality that can be shared across multiple components. Dependency Injection is a powerful feature of Angular that allows you to easily inject dependencies into your components and services. Pipes allow you to transform the data in your templates. Modules help you organize your application into logical and manageable units. Routing allows you to navigate between different views in your application.
Cheat Sheet
Components
Syntax
Description
@Component()
Decorator that indicates the following class is a component
selector
Defines the name of the HTML tag that represents the component
template
Defines the inline template for the component
templateUrl
Defines the URL to the external template for the component
style
Defines the inline styles for the component
styleUrls
Defines the URLs to the external style sheets for the component
Data Binding
Syntax
Description
{{ expression }}
Interpolation: displays the value of the expression
[property]="expression"
Property binding: sets the value of a property to the value of the expression
(event)="expression"
Event binding: invokes the expression when the event occurs
[(ngModel)]="expression"
Two-way binding: combines property and event binding for a form element
Directives
Syntax
Description
*ngIf="expression"
Structural directive: removes or recreates the element based on the value of the expression
[ngClass]="expression"
Attribute directive: adds or removes a class based on the value of the expression
[ngStyle]="expression"
Attribute directive: adds or removes styles based on the value of the expression
Services
Syntax
Description
@Injectable()
Decorator that indicates the following class is a service
constructor(private dependency: Dependency)
Constructor injection: injects a dependency into the service
Dependency Injection
Syntax
Description
providers: [Service]
Registers a service with the Angular injector
constructor(private dependency: Dependency)
Constructor injection: injects a dependency into a component or service
Pipes
Syntax
Description
`{{ value
pipeName: args }}`
@Pipe({name: 'pipeName'})
Decorator that indicates the following class is a pipe
transform(value: any, ...args: any[]): any
Defines the pipe’s transformation function
Modules
Syntax
Description
@NgModule()
Decorator that indicates the following class is a module
imports: [Module]
Registers a module that this module depends on
declarations: [Component, Directive, Pipe]
Registers the components, directives, and pipes that belong to this module
exports: [Component, Directive, Pipe]
Makes the components, directives, and pipes available to other modules
providers: [Service]
Registers the services that belong to this module
Routing
Syntax
Description
RouterModule.forRoot(routes)
Registers the top-level routes for the application
RouterModule.forChild(routes)
Registers the child routes for a feature module
path: 'path'
Defines the URL path for a route
component: Component
Defines the component that should be displayed when the route is activated