Getting Started with Standalone Components in Angular (Complete Modern Guide)

ng generate component components/user-card

// user-card.component.ts
import { Component, input, output } from '@angular/core';
 
export interface User {
  id: string;
  name: string;
  email: string;
}
 
@Component({
  selector: 'app-user-card',
  standalone: true, // 👈 Default in modern Angular
  imports: [],      // 👈 Directly declare other components, directives, or pipes
  template: `
    <div class="user-card p-4 border rounded-xl shadow-xs">
      <h3 class="font-bold">{{ user().name }}</h3>
      <p class="text-neutral-500">{{ user().email }}</p>
      <button (click)="remove.emit(user().id)" class="btn-danger mt-2">
        Remove
      </button>
    </div>
  `
})
export class UserCardComponent {
  readonly user = input.required<User>();
  readonly remove = output<string>();
}

// user-list.component.ts
import { Component, signal } from '@angular/core';
import { UserCardComponent, User } from '../user-card/user-card.component';
 
@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [UserCardComponent], // 👈 Direct dependency declaration
  template: `
    <section class="user-list space-y-4">
      <h2>Active Team Members</h2>
 
      @for (member of members(); track member.id) {
        <app-user-card [user]="member" (remove)="onRemoveMember($event)" />
      } @empty {
        <p class="text-neutral-500">No members found.</p>
      }
    </section>
  `
})
export class UserListComponent {
  readonly members = signal<User[]>([
    { id: '1', name: 'Dany Paredes', email: 'dany@example.com' },
    { id: '2', name: 'Alex Johnson', email: 'alex@example.com' }
  ]);
 
  onRemoveMember(id: string) {
    this.members.update(list => list.filter(u => u.id !== id));
  }
}

// app.routes.ts
import { Routes } from '@angular/router';
 
export const routes: Routes = [
  {
    path: '',
    redirectTo: 'users',
    pathMatch: 'full'
  },
  {
    path: 'users',
    // Lazy load the standalone component on demand!
    loadComponent: () => import('./components/user-list/user-list.component')
      .then(m => m.UserListComponent)
  },
  {
    path: 'settings',
    loadComponent: () => import('./pages/settings/settings.component')
      .then(m => m.SettingsComponent)
  }
];

// app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter, withComponentInputBinding } from '@angular/router';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { routes } from './app.routes';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes, withComponentInputBinding()),
    provideHttpClient(withFetch())
  ]
};

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';
 
bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

// user-card.component.spec.ts (Vitest)
import { describe, it, expect, beforeEach } from 'vitest';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { UserCardComponent, User } from './user-card.component';
import { ComponentRef } from '@angular/core';
 
describe('UserCardComponent with Vitest', () => {
  let component: UserCardComponent;
  let componentRef: ComponentRef<UserCardComponent>;
  let fixture: ComponentFixture<UserCardComponent>;
 
  const mockUser: User = { id: '101', name: 'Dany Paredes', email: 'dany@example.com' };
 
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [UserCardComponent] // 👈 Import standalone component directly!
    }).compileComponents();
 
    fixture = TestBed.createComponent(UserCardComponent);
    component = fixture.componentInstance;
    componentRef = fixture.componentRef;
 
    // Set signal input value
    componentRef.setInput('user', mockUser);
    fixture.detectChanges();
  });
 
  it('should render user information correctly', () => {
    const el = fixture.nativeElement as HTMLElement;
    expect(el.querySelector('h3')?.textContent).toBe('Dany Paredes');
    expect(el.querySelector('p')?.textContent).toBe('dany@example.com');
  });
 
  it('should emit remove event with user ID when clicked', () => {
    let emittedId = '';
    component.remove.subscribe((id) => (emittedId = id));
 
    const button = fixture.nativeElement.querySelector('button');
    button.click();
 
    expect(emittedId).toBe('101');
  });
});