docs: add usage for angular component in mdx

[marcjulian]

Which scope/s are relevant/related to the feature request?

Docs

Information

Astro has an integration for mdx and I wanted to use an Angular component in the mdx file. I couldn't find anything about mdx in docs for @analogjs/astro-angular.

Here is how it worked for me:

1. You need @astrojs/mdx and @analogjs/astro-angular installed and configured in astro.config.mjs

import { defineConfig } from "astro/config";
import mdx from "@astrojs/mdx";
import angular from "@analogjs/astro-angular";

// https://astro.build/config
export default defineConfig({
  site: "https://example.com",
  integrations: [mdx(), angular()]
});

2. Create an Angular component (e.g. src/components/hello.component.ts)

import { NgIf } from "@angular/common";
import { Component, Input } from "@angular/core";

@Component({
  selector: "app-hello",
  standalone: true,
  imports: [NgIf],
  template: `
    <p>Hello from Angular!!</p>

    <p *ngIf="show">{{ helpText }}</p>

    <button (click)="toggle()">Toggle</button>
  `,
})
export class HelloComponent {
  @Input() helpText = "help";

  show = false;

  toggle() {
    this.show = !this.show;
  }
}

3. Open/Create a .mdx file (e.g. pages/blog/using-mdx.mdx) and import the component below the front matter.

---
layout: "../../layouts/BlogPost.astro"
title: "Using MDX"
description: "Lorem ipsum dolor sit amet"
pubDate: "Jul 02 2022"
heroImage: "/placeholder-hero.jpg"
---

import { HelloComponent } from "../../components/hello.component";

<HelloComponent />

The Angular component is rendered correctly. To make it interactive add a client directive client:visible.

---
layout: "../../layouts/BlogPost.astro"
title: "Using MDX"
description: "Lorem ipsum dolor sit amet"
pubDate: "Jul 02 2022"
heroImage: "/placeholder-hero.jpg"
---

import { HelloComponent } from "../../components/hello.component";

<HelloComponent client:visible />

An error occurred after adding the client directive and the component wasn't interactive.

TypeError: Failed to fetch dynamically imported module: http://localhost:3000/@fs/Users/m/Dev/wip/astro-analog/src/components/hello.component

Solution is to add ts suffix to the component import.

---
layout: "../../layouts/BlogPost.astro"
title: "Using MDX"
description: "Lorem ipsum dolor sit amet"
pubDate: "Jul 02 2022"
heroImage: "/placeholder-hero.jpg"
---

+import { HelloComponent } from "../../components/hello.component.ts";
import { HelloComponent } from "../../components/hello.component";

<HelloComponent client:visible />

Now the error is gone, component loaded properly and interactive.

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• [x] Yes
• [ ] No

[marcjulian]

@brandonroberts I can add this to the readme. Should I create a new section below Defining A Component?

[brandonroberts]

@marcjulian yep, that works