Skip to content
Orbix Angular · Tailwind CSS v1.0.1

Starter kit

orbix-angular-starterkit/ is the same Angular application without the demo pages: start a new project from it and copy pages or components from the full template when you need them.

What it includes

  • The application shell: sidebar, topbar, footer, page header, theme customizer, command palette, notifications and language menus.
  • The app, auth and blank layouts and the router.
  • The nine basic authentication pages (sign in, sign up, forgot and reset password, lock screen, two-step verification, email verification, signed out, success).
  • One empty start page at /; unknown URLs return to it.
  • The Tailwind CSS CSS engine, the five languages with RTL, the theme runtime, the page lifecycle, the oxAttrs, oxDataGrid and oxCalendar directives and the test suite.

What it leaves out: the demo pages, the components and page scripts only they use, the demo data and the chart library. Menu links to removed pages point to # until you add your own.

Starter kit

Install

Exactly as the full template (see Installation):

cd orbix-angular-starterkit
npm install
npm start

Bring a page from the full template

  1. Copy the page component (.ts and .html) from orbix-angular/src/pages/... to the same folder of the starter kit.
  2. Copy the components it imports (@/components/apps/product-card → src/components/apps/product-card.ts and .html).
  3. Add its line to src/app/pages.ts and its menu entry to src/app/menu.ts.
  4. Every translation file of the full template is already in the starter kit (src/locales/).
  5. If it calls injectPageScript(init), copy the script from src/scripts/ (and src/data/ for demo data). For charts, also copy src/core/charts.ts and src/directives/chart.ts and run npm install echarts.
  6. Run npm run build and npm test.

Connect authentication

The auth pages are screens only, so you can plug in the authentication you prefer (your API, Auth0, Firebase, Supabase, Clerk...). The sign-in form validates its fields in src/scripts/auth.ts and then navigates to data-auth-next (the dashboard). To call your API instead, handle the submit in the form component (src/components/auth/sign-in.ts and sign-in.html):

// src/components/auth/sign-in.ts
private readonly router = inject(Router);

protected async onSubmit(event: SubmitEvent): Promise<void> {
  event.preventDefault();
  const data = new FormData(event.target as HTMLFormElement);
  const response = await fetch('/api/login', { method: 'POST', body: data, credentials: 'include' });
  if (response.ok) await this.router.navigateByUrl('/');
}
<!-- src/components/auth/sign-in.html -->
<form class="fd-form" novalidate (submit)="onSubmit($event)">
  <!-- the fields of the sign-in form -->
</form>

Remove data-auth-form from that form so the demo validation does not run, keep the input name attributes your API expects (email, password, remember), and protect your pages with a guard on the app layout route of src/app/app.routes.ts that checks the session:

// src/app/app.routes.ts: on the route of the 'app' layout
canActivateChild: [() => inject(Session).isSignedIn() || inject(Router).parseUrl('/auth/basic/sign-in')],