Angular

bash

npm install @flattype/angular @flattype/models

// main.ts
bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withInterceptors([flatInterceptor])), // every HttpClient call can read Flat Notation
    provideFlatType({ baseURL: "/api" }),
  ],
});

@Component({
  imports: [FlatModelPipe],
  template: `
    @for (u of users.value()?.data; track u.id) { <li>{{ u.fullName }}</li> }
    <p>{{ (raw() | flatModel: Address)?.city }}</p>
    <p>{{ events.done() ? "Done" : "Loading… " + events.rows().length }}</p>
  `,
})
export class UsersComponent {
  page = signal(1);
  users = flatResource(() => `/users?page=${this.page()}`, { model: UsersPage }); // refetches when page changes
  events = flatStream(() => "/export", { model: Row, table: "rows" });           // rows while downloading
  raw = toSignal(inject(HttpClient).get("/api/address"));                        // plain HttpClient works too
}

API	What it does
`flatInterceptor`	Adds `Accept: text/x-flat, application/json` and decodes either format, error bodies included. Skip a request with `FLAT_TYPE_SKIP` in its `HttpContext`
`flatResource(() => url, options)`	`value`, `error` and `isLoading` signals plus `reload()`. Runs on HttpClient and cancels the old request when the URL changes
`flatStream(() => url, options)`	`rows`, `done` and `error` signals plus `restart()`. Uses `fetch`, because HttpClient can't stream
`flatModel` pipe, `mapModel` / `mapModelList`	Model mapping in templates and in RxJS pipelines

Angular 19+ (built with partial compilation, so it works with every later version). A runnable Angular 22 app with Playwright tests in three browsers is in examples/angular-app.

Angular ​

Angular