Angular Components and Angular SSR

@awc-ui/angular provides standalone component proxies and Angular form value accessors. Imports register their custom elements automatically.

Use Angular 20.3.31 or newer. The wrapper and examples use the patched Angular 20 compiler and runtime; applications on Angular 17–19 must upgrade Angular before updating the wrapper.

npm install @awc-ui/angular @awc-ui/core

Load the theme once in your application entry:

import '@awc-ui/core/css/tokens.css';

For a standalone component, import the controls and accessors into its template scope, alongside Angular’s forms module:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MdButton, MdTextField, TextValueAccessor } from '@awc-ui/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, MdButton, MdTextField, TextValueAccessor],
  template: `
    <md-text-field label="Email" type="email" [(ngModel)]="email"></md-text-field>
    <md-button variant="filled">Continue</md-button>
  `,
})
export class AppComponent {
  email = '';
}

For convenience, imports: [FormsModule, AwcUiModule] supplies every component and accessor. Use ReactiveFormsModule for formControl and formControlName. NgModule applications also put AwcUiModule in imports.

importProvidersFrom(AwcUiModule) does not add directives to a standalone component’s template scope. provideAwcUi() is only needed for applications using the lazy loader with raw tags; imported proxies already register themselves.

Radio controls bind the selected option’s value, preserving each radio’s identity. Import both MdRadio and RadioValueAccessor for individual imports:

<md-radio name="plan" value="basic" [(ngModel)]="plan">Basic</md-radio>
<md-radio name="plan" value="pro" [(ngModel)]="plan">Pro</md-radio>

Initialize plan to 'basic' or 'pro'; resetting the form to null clears the selection. Multi-select accessors normalize a form reset to an empty array.

Angular SSR and prerendering

Angular can server-render the surrounding application normally. AWC UI’s @awc-ui/core/hydrate module then transforms the rendered md-* markup into Declarative Shadow DOM, preserving styles and content in the server response. On the client, the imported Angular proxies register their custom elements and hydrate that server-rendered output.

Forward the request’s BootstrapContext when bootstrapping on the server. Angular uses it to keep the platform injector scoped to that request:

src/main.server.ts

import { bootstrapApplication, type BootstrapContext } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { config } from './app/app.config.server';

export default (context: BootstrapContext) =>
  bootstrapApplication(AppComponent, config, context);

For a custom Node server, import CommonEngine from @angular/ssr/node.

The repository includes a validated Angular SSR reference app and a multi-route Angular SSR showcase. Read the shared SSR guide for the transform options and framework support matrix.