How to get the param from the routes [...slug]?

[adrian-ub]

content files

src/
└── content/
    └── docs/
        ├── installation/
        │   └── vite.md
        └── index.md

src/pages/docs/[...slug].page.ts

import { Component } from '@angular/core';

@Component({
template: ` `,
})
export default class DocsComponent {
  readonly doc$ = injectContent({
  	param: 'slug', // or '...slug'
    subdirectory: 'docs',
  }); // Not working
}

route try access
/docs (docs/index.md)
/docs/installation/vite (docs/installation/vite.md)

[adrian-ub]

import type { DocAttributes } from './docs.model'
import { injectContent, injectContentFiles, MarkdownComponent } from '@analogjs/content'
import { Location } from '@angular/common'
import { Component, inject } from '@angular/core'
import { toSignal } from '@angular/core/rxjs-interop'
import { map, of } from 'rxjs'

export function injectDocs<Attributes extends Record<string, any>>(folder: string, slug: string) {
  const contentFiles = injectContentFiles<Attributes>(contentFile => contentFile.filename.includes(`/src/content/${folder}`))

  const contentFile = contentFiles.find((contentFile) => {
    return contentFile.filename.includes(`${folder}/${slug}`)
  })

  if (!contentFile) {
    return of(null)
  }

  const parts = contentFile.filename.split('/').slice(3)
  const customFilename = parts.join('/').split('.md').join('')

  return injectContent<Attributes>({
    customFilename,
  }).pipe(
    map((doc) => {
      return {
        ...doc,
        slug: doc.slug.replace('/index', ''),
      }
    }),
  )
}

@Component({
  selector: 'app-docs-slug',
  imports: [MarkdownComponent],
  template: `
    @if (doc()) {
      <h2>{{ doc()?.attributes?.title }}</h2>
      <analog-markdown [content]="doc()?.content"></analog-markdown>
    } @else {
      <p>Documento no encontrado.</p>
    }
  `,
})
export default class DocsSlugPage {
  private readonly location = inject(Location)
  private readonly currentPath = this.location.path().replace(/^\//, '')
  private readonly pathParts = this.currentPath.split('/')
  private readonly slug = this.pathParts.slice(1).join('/')
  protected readonly doc = toSignal(
    injectDocs<DocAttributes>('docs', this.slug),
    { initialValue: null },
  )
}

[ajitzero]

Are you saying this isn't working: https://analogjs.org/docs/features/routing/content#using-the-analog-markdown-component

[ajitzero]

export interface PostAttributes {
  title: string;
  slug: string;
  description: string;
  coverImage: string;
}

readonly post$ = injectContent<PostAttributes>();

readonly slug$ = this.post$.pipe(map(post => post.slug));

[adrian-ub]

works when it's [slug].page.ts

Equivalent to path: ':slug'

When it is [...slug].page.ts which is equivalent to path: '**', This is where it doesn't work.

It turns out that this Angular route doesn't save the param in its router because it isn't defined, so route.paramMap would be {}

analog/packages/content/src/lib/content.ts

Line 105 in ffd4c04

return route.paramMap.pipe(

That's why in my temporary solution I use location.path() which does have the path you are entering.

[brandonroberts]

You can get the path using router.url inside the component. Catch-all routes get the whole path as part of the ActivatedRoute also