teachingai/angular

When to use this skill

Use this skill whenever the user wants to:

• Build single-page applications (SPA) with Angular
• Create Angular components, services, directives, and pipes
• Implement routing, lazy-loading, and navigation guards
• Work with reactive forms or template-driven forms
• Use dependency injection and Angular modules
• Integrate RxJS observables and the async pipe
• Set up Angular CLI projects and generate scaffolding
• Optimize performance with OnPush change detection

How to use this skill

Workflow

1. Identify the request area from the user's question (component creation, routing, forms, services, etc.)
2. Apply Angular best practices following the official style guide
3. Generate TypeScript code using Angular conventions and decorators
4. Verify the solution compiles and follows the dependency injection pattern

1. Project Setup

# Create a new Angular project
ng new my-app --routing --style=scss

# Generate components and services
ng generate component features/user-list
ng generate service core/services/user

2. Component Example

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Observable } from 'rxjs';
import { UserService } from '../../core/services/user.service';
import { User } from '../../core/models/user.model';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserListComponent implements OnInit {
  users$!: Observable<User[]>;

  constructor(private userService: UserService) {}

  ngOnInit(): void {
    this.users$ = this.userService.getUsers();
  }
}

3. Service with HttpClient

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UserService {
  private readonly apiUrl = '/api/users';

  constructor(private http: HttpClient) {}

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.apiUrl);
  }

  createUser(user: User): Observable<User> {
    return this.http.post<User>(this.apiUrl, user);
  }
}

4. Routing with Lazy Loading

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  {
    path: 'users',
    loadChildren: () =>
      import('./features/users/users.module').then(m => m.UsersModule)
  }
];

Best Practices

• Use OnPush change detection and pure pipes for performance
• Organize code into Core, Shared, and Feature modules
• Prefer constructor injection; register services with providedIn: 'root' for singletons
• Unsubscribe from observables to prevent memory leaks (use takeUntil or the async pipe)
• Use reactive forms for complex validation scenarios
• Lazy-load feature modules to reduce initial bundle size

Resources

• Official documentation: https://angular.io/docs
• Angular CLI: https://angular.io/cli
• RxJS: https://rxjs.dev/

Keywords

angular, Angular CLI, components, services, RxJS, dependency injection, routing, reactive forms, TypeScript, SPA, OnPush, lazy loading, modules, directives, pipes