Why Components Shouldn’t Know About APIs: The Hidden Coupling Most Angular Teams Ignore

The Angular Pattern Almost Everyone Starts With

A developer creates a page.

The page needs data.

The obvious solution is:

export class CustomersComponent {

customers: Customer[] = [];
  constructor(
    private customerService: CustomerService
  ) {}
  ngOnInit() {
    this.customerService
      .getCustomers()
      .subscribe(customers => {
        this.customers = customers;
      });
  }
}

The code works.

The API responds.

The UI updates.

The feature ships.

For small applications, nobody notices a problem.

For large applications, this seemingly harmless pattern slowly becomes one of the biggest sources of architectural coupling.

Not a Member? Read for FREE here.

The Component Knows Too Much

Look carefully at the component.

It knows:

• When data loads
• Which API endpoint exists
• How loading happens
• How errors are handled