# Angular

MuxForms on Angular loads embed.js in src/index.html, places data-form-id on a template ref in ContactComponent, and calls window.MuxForms.mount in ngAfterViewInit. Allow your deployed SPA origin.

## Angular

| Piece | Detail |
| --- | --- |
| index.html | defer script |
| ContactComponent | ViewChild + AfterViewInit |
| Router | Component recreated per visit |
| Allowlist | Production SPA URL |

## contact.component.ts

```
import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";

@Component({
  selector: "app-contact",
  template: `<h1>Contact</h1><div #host data-form-id="FORM_UUID"></div>`,
})
export class ContactComponent implements AfterViewInit {
  @ViewChild("host") host!: ElementRef<HTMLDivElement>;

  ngAfterViewInit() {
    window.MuxForms?.mount(this.host.nativeElement);
  }
}
```

## src/index.html

```
<script src="https://www.muxforms.com/embed.js" defer></script>
```

## FAQ

### Standalone components?

Same AfterViewInit pattern.

### HttpClient submit?

POST JSON from a service with secret from environment.ts (build-time injection via CI).

### Zone.js?

Mount outside Angular zone if you see double renders—rare with embed.

### Ivy SSR?

Run mount only in browser (isPlatformBrowser).

---

HTML version: https://www.muxforms.com/docs/angular
Source: MuxForms (https://www.muxforms.com)