Angular Cheatsheet
Tags: angular, webdev, beginners, typescript
Published: 2023-09-10 00:35:54

Angular is a powerful front-end framework for building dynamic web applications. Whether you're a seasoned Angular developer or just getting started, having a handy cheat sheet can be a valuable resource for speeding up development and solving common tasks. In this Angular cheat sheet, we'll cover key concepts, directives, and tips to help you work efficiently with Angular.

## **Getting Started with Angular**

### **Creating a New Angular Project**

```shell
ng new my-app
```

### **Starting the Development Server**

```shell
ng serve
```

### **Generating a New Component**

```shell
ng generate component my-component
```

## **Angular Basics**

### **Interpolation (Binding Values)**

```html
{{ variableName }}
```

### **Property Binding**

```html
[src]="imageUrl"
```

### **Event Binding**

```html
(click)="methodName()"
```

### **Two-Way Data Binding**

```html
[(ngModel)]="propertyName"
```

## **Structural Directives**

### **`*ngIf`**

```html
<div *ngIf="showElement">Visible when showElement is true</div>
```

### **`*ngFor`**

```html
<div *ngFor="let item of items">{{ item }}</div>
```

### **`*ngSwitch`**

```html
<div [ngSwitch]="value">
  <div *ngSwitchCase="'case1'">Content for case 1</div>
  <div *ngSwitchCase="'case2'">Content for case 2</div>
  <div *ngSwitchDefault>Default content</div>
</div>
```

## **Component Interaction**

### **Input Binding**

```html
<app-child [inputProperty]="parentProperty"></app-child>
```

### **Output Binding**

```html
<app-child (outputEvent)="parentMethod($event)"></app-child>
```

## **Forms**

### **Template-Driven Forms**

```html
<form #form="ngForm" (ngSubmit)="submitForm(form)">
  <input type="text" name="name" ngModel>
  <button type="submit">Submit</button>
</form>
```

### **Reactive Forms**

```html
<form [formGroup]="formGroup" (ngSubmit)="submitForm()">
  <input type="text" formControlName="name">
  <button type="submit">Submit</button>
</form>
```

## **HTTP Requests**

### **Import HttpClientModule**

```javascript
import { HttpClientModule } from '@angular/common/http';
```

### **Making a GET Request**

```javascript
import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

this.http.get('https://api.example.com/data').subscribe(data => {
  console.log(data);
});
```

## **Routing**

### **Configuring Routes**

```javascript
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];
```

### **Router Outlet**

```html
<router-outlet></router-outlet>
```

## **Services**

### **Creating a Service**

```javascript
ng generate service my-service
```

### **Injecting a Service**

```javascript
constructor(private myService: MyService) {}
```

## **Lifecycle Hooks**

### **`ngOnInit`**

```javascript
ngOnInit() {
  // Initialization logic here
}
```

### **`ngOnChanges`**

```javascript
ngOnChanges(changes: SimpleChanges) {
  // Handle changes here
}
```

## **Tips and Tricks**

- Use the Angular CLI for code generation and project setup.
- Leverage Angular CLI's powerful commands like `ng generate component` and `ng generate service`.
- Utilize Angular's dependency injection system for managing services.
- Follow best practices for component and module organization.
- Take advantage of Angular's built-in directives for data binding and DOM manipulation.
- Regularly check Angular's official documentation and community resources for updates and solutions to common issues.

This Angular cheat sheet provides a quick reference guide to some of the most commonly used features and concepts in Angular development. Keep it handy as you work on your Angular projects, and don't hesitate to explore the official Angular documentation and community resources for more in-depth information and tutorials. Happy coding!