Create a new Angular project Skill

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

Identify the request area from the user's question (component creation, routing, forms, services, etc.)
Apply Angular best practices following the official style guide
Generate TypeScript code using Angular conventions and decorators
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

Agent Skills: Create a new Angular project

Install this agent skill to your local

Skill Files