Skip to content
>_devvkit
$devvkit learn --librarie angular-guide

Angular Guide

[angular][frontend][spa][typescript]
JavaScript / TypeScript
Install
npm install -g @angular/cli
ng new my-app --ssr --style=scss

Angular is a full-featured platform — not just a framework. It includes routing, forms, HTTP client, animations, and a CLI that generates components, services, and modules.

The core concepts are components (templates + logic), directives (DOM manipulation), services (business logic), and modules (organizational units). Dependency injection is built into the framework.

Angular 17+ uses standalone components by default, making modules optional. Signals (writable signals, computed, effects) replace Zone.js change detection for better performance.

Setup

Create project— New Angular app.
ng new my-app --standalone --ssr=false
cd my-app
ng serve

Components

Generate component— Create a component.
ng g component users
# Creates users/component.ts, .html, .css, .spec.ts
Standalone component— Self-contained component.
@Component({
  selector: 'app-user',
  standalone: true,
  imports: [CommonModule],
  template: <h2>{{ user.name }}</h2>
})
export class UserComponent {
  @Input() user!: User
}

Templates

Template syntax— Interpolation and binding.
<p>{{ title | uppercase }}</p>
<img [src]="avatarUrl" />
<button (click)="handleClick()">Click</button>
<input [(ngModel)]="name" />
Control flow— Built-in @if/@for.
@if (users.length > 0) {
  @for (user of users; track user.id) {
    <li>{{ user.name }}</li>
  }
} @else {
  <p>No users</p>
}

Services & DI

Service— Injectable business logic.
@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient)
  getUsers() { return this.http.get<User[]>('/api/users') }
}

// In component:
const userService = inject(UserService)

Routing

Router setup— Configure routing.
export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users/:id', component: UserComponent, canActivate: [authGuard] },
]

// bootstrap:
bootstrapApplication(App, { providers: [provideRouter(routes)] })

Signals

Signal— Reactive state primitive.
import { signal, computed, effect } from '@angular/core'

const count = signal(0)
const doubled = computed(() => count() * 2)
effect(() => console.log('Count:', count()))

count.set(5)
count.update(c => c + 1)

Forms

Reactive forms— Type-safe forms.
const form = new FormGroup({
  name: new FormControl('', Validators.required),
  email: new FormControl('', [Validators.required, Validators.email]),
})

<form [formGroup]="form" (ngSubmit)="submit()">
  <input formControlName="name" />
  <input formControlName="email" />
  <button type="submit">Submit</button>
</form>