Angular Basics Cheat Sheet: Essential Concepts for Beginners

Introduction

Angular is a popular TypeScript-based web application framework developed and maintained by Google. It provides a comprehensive solution for building single-page applications with a component-based architecture. This cheat sheet covers the essential concepts and techniques you need to know when starting with Angular.

Setting Up Angular

Installing Angular CLI

The Angular CLI (Command Line Interface) is the official tool for initializing, developing, and maintaining Angular applications.

# Install Angular CLI globally
npm install -g @angular/cli

# Check installation and version
ng version

Creating a New Project

# Create a new Angular project
ng new my-project-name

# Create with specific options
ng new my-project-name --routing --style=scss

Running Your Application

# Navigate to your project directory
cd my-project-name

# Start the development server
ng serve

# Start and automatically open in browser
ng serve --open
# or
ng serve -o

Angular Project Structure

my-project-name/
├── node_modules/         # Third-party libraries
├── src/                  # Source files
│   ├── app/              # Application code
│   │   ├── app.component.ts       # Root component
│   │   ├── app.component.html     # Root component template
│   │   ├── app.component.css      # Root component styles
│   │   ├── app.component.spec.ts  # Root component tests
│   │   ├── app.module.ts          # Root module
│   ├── assets/           # Static assets (images, etc.)
│   ├── environments/     # Environment configuration
│   ├── index.html        # Main HTML file
│   ├── main.ts           # Entry point
│   ├── styles.css        # Global styles
├── angular.json          # Angular workspace configuration
├── package.json          # NPM dependencies and scripts
├── tsconfig.json         # TypeScript configuration

Angular Building Blocks

Components

Components are the main building blocks of Angular applications. They control a section of the UI.

Creating a Component

# Generate a new component using Angular CLI
ng generate component component-name
# or shorter syntax
ng g c component-name

Component Structure

// my-component.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  // Properties
  title = 'My Component';
  items = ['Item 1', 'Item 2', 'Item 3'];
  
  // Methods
  handleClick() {
    alert('Button clicked!');
  }
}

<!-- my-component.component.html -->
<h1>{{ title }}</h1>
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>
<button (click)="handleClick()">Click me</button>

Modules

Modules in Angular help organize the application into cohesive blocks of functionality.

Basic Module Structure

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { MyComponent } from './my-component/my-component.component';

@NgModule({
  declarations: [
    AppComponent,
    MyComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Services

Services provide functionality that’s not directly related to views. They are used for data fetching, logging, and other operations.

Creating a Service

# Generate a new service using Angular CLI
ng generate service service-name
# or shorter syntax
ng g s service-name

Basic Service Structure

// data.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'  // This makes the service a singleton
})
export class DataService {
  private data = ['Item 1', 'Item 2', 'Item 3'];
  
  constructor() { }
  
  getData() {
    return this.data;
  }
  
  addData(item: string) {
    this.data.push(item);
  }
}

Using a Service in a Component

// my-component.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent implements OnInit {
  items: string[] = [];
  
  // Inject the service in the constructor
  constructor(private dataService: DataService) { }
  
  ngOnInit(): void {
    // Get data from service when component initializes
    this.items = this.dataService.getData();
  }
  
  addItem(newItem: string) {
    this.dataService.addData(newItem);
    this.items = this.dataService.getData();
  }
}

Data Binding

Angular offers several ways to connect your component’s data to its template:

Interpolation (One-way: Component to View)

<h1>{{ title }}</h1>
<p>Welcome, {{ user.name }}</p>
<p>{{ 'Hello, ' + user.name }}</p>
<p>{{ 2 + 2 }}</p> <!-- Displays: 4 -->

Property Binding (One-way: Component to View)

<img [src]="imageUrl">
<button [disabled]="isDisabled">Click me</button>

Event Binding (One-way: View to Component)

<button (click)="handleClick()">Click me</button>
<input (keyup)="handleKeyUp($event)">

Two-way Binding (using ngModel)

First, import FormsModule in your module:

// app.module.ts
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule  // Add this
  ],
  // ...
})

Then use it in your template:

<input [(ngModel)]="name">
<p>Hello, {{ name }}</p>

Directives

Directives are classes that add behavior to elements in your Angular applications.

Built-in Structural Directives

These change the DOM layout by adding and removing elements.

ngIf (Conditional Rendering)

<!-- Simple condition -->
<div *ngIf="isVisible">This element will show if isVisible is true</div>

<!-- With else block -->
<div *ngIf="isVisible; else notVisible">Content when visible</div>
<ng-template #notVisible>Content when not visible</ng-template>

<!-- With then and else -->
<div *ngIf="isVisible; then visibleBlock else notVisibleBlock"></div>
<ng-template #visibleBlock>Content when visible</ng-template>
<ng-template #notVisibleBlock>Content when not visible</ng-template>

ngFor (List Rendering)

<!-- Basic usage -->
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

<!-- With index -->
<ul>
  <li *ngFor="let item of items; let i = index">{{ i }}: {{ item }}</li>
</ul>

<!-- With additional variables -->
<ul>
  <li *ngFor="let item of items; let i = index; let isFirst = first; let isLast = last">
    {{ i }}: {{ item }} 
    <span *ngIf="isFirst">(First item)</span>
    <span *ngIf="isLast">(Last item)</span>
  </li>
</ul>

ngSwitch

<div [ngSwitch]="color">
  <p *ngSwitchCase="'red'">The color is red</p>
  <p *ngSwitchCase="'blue'">The color is blue</p>
  <p *ngSwitchCase="'green'">The color is green</p>
  <p *ngSwitchDefault>The color is something else</p>
</div>

Attribute Directives

These change the appearance or behavior of an existing element.

ngClass

<!-- Single class with condition -->
<div [ngClass]="{'active': isActive}">This div is active</div>

<!-- Multiple classes -->
<div [ngClass]="{'active': isActive, 'disabled': isDisabled, 'special': isSpecial}">
  This div has multiple conditional classes
</div>

<!-- Using component method -->
<div [ngClass]="getClasses()">Classes from method</div>

getClasses() {
  return {
    'active': this.isActive,
    'disabled': this.isDisabled,
    'special': this.isSpecial
  };
}

ngStyle

<!-- Single style with condition -->
<div [ngStyle]="{'color': textColor}">This text has dynamic color</div>

<!-- Multiple styles -->
<div [ngStyle]="{'color': textColor, 'font-size': fontSize + 'px', 'font-weight': isBold ? 'bold' : 'normal'}">
  This div has multiple dynamic styles
</div>

<!-- Using component method -->
<div [ngStyle]="getStyles()">Styles from method</div>

getStyles() {
  return {
    'color': this.textColor,
    'font-size': this.fontSize + 'px',
    'font-weight': this.isBold ? 'bold' : 'normal'
  };
}

Pipes

Pipes transform values for display in your templates.

Built-in Pipes

<!-- Date pipe -->
<p>{{ today | date }}</p>                   <!-- Apr 15, 2023 -->
<p>{{ today | date:'shortDate' }}</p>       <!-- 4/15/23 -->
<p>{{ today | date:'fullDate' }}</p>        <!-- Saturday, April 15, 2023 -->
<p>{{ today | date:'MM/dd/yyyy' }}</p>      <!-- 04/15/2023 -->

<!-- Uppercase/Lowercase -->
<p>{{ name | uppercase }}</p>               <!-- JOHN DOE -->
<p>{{ name | lowercase }}</p>               <!-- john doe -->

<!-- Number formatting -->
<p>{{ price | number }}</p>                 <!-- 1,234.56 -->
<p>{{ price | number:'1.2-2' }}</p>         <!-- 1,234.56 -->

<!-- Currency -->
<p>{{ price | currency }}</p>               <!-- $1,234.56 -->
<p>{{ price | currency:'EUR' }}</p>         <!-- €1,234.56 -->

<!-- Percent -->
<p>{{ 0.75 | percent }}</p>                 <!-- 75% -->

<!-- Slice -->
<p>{{ [1,2,3,4,5] | slice:1:3 }}</p>        <!-- [2,3] -->

<!-- JSON -->
<pre>{{ user | json }}</pre>                <!-- Pretty-printed JSON -->

<!-- Chaining pipes -->
<p>{{ today | date:'fullDate' | uppercase }}</p>

Creating a Custom Pipe

# Generate a new pipe using Angular CLI
ng generate pipe pipe-name
# or shorter syntax
ng g p pipe-name

// truncate.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 25, trail: string = '...'): string {
    if (!value) {
      return '';
    }
    
    if (value.length <= limit) {
      return value;
    }
    
    return value.substring(0, limit) + trail;
  }
}

In your template:

<p>{{ longText | truncate:10:'...' }}</p>

Component Communication

Parent to Child: @Input

Parent component:

// parent.component.ts
@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <app-child [data]="parentData" [message]="'Hello from parent'"></app-child>
  `
})
export class ParentComponent {
  parentData = [1, 2, 3, 4, 5];
}

Child component:

// child.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <h2>Child Component</h2>
    <p>Message: {{ message }}</p>
    <ul>
      <li *ngFor="let item of data">{{ item }}</li>
    </ul>
  `
})
export class ChildComponent {
  @Input() data: number[] = [];
  @Input() message: string = '';
}

Child to Parent: @Output

Child component:

// child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <h2>Child Component</h2>
    <button (click)="sendMessage()">Send Message to Parent</button>
    <button (click)="sendData()">Send Data to Parent</button>
  `
})
export class ChildComponent {
  @Output() messageEvent = new EventEmitter<string>();
  @Output() dataEvent = new EventEmitter<number>();
  
  sendMessage() {
    this.messageEvent.emit('Hello from child component');
  }
  
  sendData() {
    this.dataEvent.emit(42);
  }
}

Parent component:

// parent.component.ts
@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <p>Message from child: {{ childMessage }}</p>
    <p>Data from child: {{ childData }}</p>
    <app-child 
      (messageEvent)="receiveMessage($event)"
      (dataEvent)="receiveData($event)">
    </app-child>
  `
})
export class ParentComponent {
  childMessage = '';
  childData = 0;
  
  receiveMessage(message: string) {
    this.childMessage = message;
  }
  
  receiveData(data: number) {
    this.childData = data;
  }
}

Forms

Angular provides two approaches to forms: Template-driven forms (simpler) and Reactive forms (more robust).

Template-driven Forms

First, import FormsModule:

// app.module.ts
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  // ...
})
export class AppModule { }

Then create your form:

<!-- template-form.component.html -->
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <div>
    <label for="name">Name</label>
    <input 
      type="text" 
      id="name" 
      name="name" 
      [(ngModel)]="model.name" 
      required 
      #name="ngModel">
    <div *ngIf="name.invalid && (name.dirty || name.touched)">
      Name is required.
    </div>
  </div>
  
  <div>
    <label for="email">Email</label>
    <input 
      type="email" 
      id="email" 
      name="email" 
      [(ngModel)]="model.email" 
      required 
      email 
      #email="ngModel">
    <div *ngIf="email.invalid && (email.dirty || email.touched)">
      <div *ngIf="email.errors?.['required']">Email is required.</div>
      <div *ngIf="email.errors?.['email']">Email is invalid.</div>
    </div>
  </div>
  
  <button type="submit" [disabled]="myForm.invalid">Submit</button>
</form>

<div *ngIf="submitted">
  <h2>Submitted Values</h2>
  <p>Name: {{ model.name }}</p>
  <p>Email: {{ model.email }}</p>
</div>

// template-form.component.ts
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-template-form',
  templateUrl: './template-form.component.html'
})
export class TemplateFormComponent {
  model = {
    name: '',
    email: ''
  };
  
  submitted = false;
  
  onSubmit(form: NgForm) {
    if (form.valid) {
      console.log('Form submitted', this.model);
      this.submitted = true;
    }
  }
}

Reactive Forms

First, import ReactiveFormsModule:

// app.module.ts
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  // ...
})
export class AppModule { }