• Software

2 minute read

No comments

Angular Cheatsheet

Briana Ings

September 10, 2023

0

0

0

ng new my-app

ng serve

ng generate component my-component

{{ variableName }}

[src]="imageUrl"

(click)="methodName()"

[(ngModel)]="propertyName"

 *ngIf="showElement">Visible when showElement is true

 *ngFor="let item of items">{{ item }}

 [ngSwitch]="value">
   *ngSwitchCase="'case1'">Content for case 1

Component Interaction

Input Binding

 [inputProperty]="parentProperty">

Output Binding

 (outputEvent)="parentMethod($event)">

Forms

Template-Driven Forms

 #form="ngForm" (ngSubmit)="submitForm(form)">
   type="text" name="name" ngModel>
   type="submit">Submit

Reactive Forms

 [formGroup]="formGroup" (ngSubmit)="submitForm()">
   type="text" formControlName="name">
   type="submit">Submit

HTTP Requests

Import HttpClientModule

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

Making a GET Request

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

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

Router Outlet

Services

Creating a Service

ng generate service my-service

Injecting a Service

constructor(private myService: MyService) {}

Lifecycle Hooks

ngOnInit

ngOnInit() {
  // Initialization logic here
}

ngOnChanges

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!