astro-angular
An Angular integration for Astro
Setup
Install dependencies
yarn add astro-angular --dev
Add Angular to integrations
array and enable experimental.integrations
import { defineConfig } from 'astro/config';
import angular from 'astro-angular';
export default defineConfig({
integrations: [angular()],
experimental: {
integrations: true
}
});
Defining A Component
The Astro Angular integration only supports bootstrapping standalone components:
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
@Component({
selector: 'app-hello',
standalone: true,
imports: [CommonModule],
template: `
<p>Hello from Angular!!</p>
<p *ngIf="show">help</p>
<button (click)="toggle()">Toggle</button>
`
})
export class HelloComponent {
show = false;
toggle() {
this.show = !this.show;
}
}
And add the Angular component to the Astro component:
---
import { HelloComponent } from '../components/hello.component.ts';
---
<HelloComponent client:visible />