Primate Logo Primate
Guides Components

Use Angular

Add Angular components with the @primate/angular module.

1) Install

Install the Primate Angular package and Angular.

npm install @primate/angular @angular/core @angular/common

2) Configure

Load the Angular module in your configuration.

import config from "primate/config";
import angular from "@primate/angular";

export default config({
  modules: [
    angular(),
  ],
});

3) Write a component

Compose a component in TypeScript.

// components/welcome.component.ts
import { Component, Input } from "@angular/core";

@Component({
  template: `<h1>Hello, {{ name }}!</h1>`,
})
export class WelcomeComponent {
  @Input() name!: string;
}

4) Render the component

Use response.view in a route to render the template.

// routes/index.ts
import route from "primate/route";
import response from "primate/response";

export default route({
  get() {
    return response.view("welcome.component.ts", { name: "World" });
  },
});