Build a Small Angular App

Site Admin · 11 Sep 2026 · 6 views

Build a Small Angular App

Combine components, services, and forms into a working customer list. The app will manage a small catalog with add and display features.

The service

Start with a service that owns the data:

@Injectable({ providedIn: 'root' })
export class CustomerService {
  customers = [
    { id: 1, name: 'Ada' },
    { id: 2, name: 'Linus' },
  ];

  add(name: string) {
    const next = { id: Date.now(), name };
    this.customers.push(next);
  }
}

The component

Inject the service, expose the list, and add a form control:

import { FormControl, Validators } from '@angular/forms';

export class AppComponent {
  constructor(public customers: CustomerService) {}
  name = new FormControl('', Validators.required);

  submit() {
    if (this.name.value) {
      this.customers.add(this.name.value.trim());
      this.name.reset();
    }
  }
}

The template

<input [formControl]="name" placeholder="Customer name" />
<button (click)="submit()">Add</button>

<ul>
  <li *ngFor="let c of customers.customers">{{ c.name }}</li>
</ul>

How it fits together

The template binds the input to the name control, the button calls submit, and submit delegates to the service. The service mutates the shared array, and the ngFor loop re-renders because Angular references the same list object. Change detection picks up the update automatically.

Next steps

Add HttpClient to load customers from a backend, a router to split screens, and ngClass to highlight certain rows. The pattern stays the same: template binds to class, class delegates to service.