Magnolia Angular Editor

import { Component, Input } from '@angular/core';
import { EditorContextService } from '@magnolia/angular-editor';
import { HomeComponent } from './pages/home.component';

const config = {
  componentMapping: {
    'spa:pages/Home': HomeComponent,
  },
};

@Component({
  selector: 'app-root',
  template: `<editable-page [content]="content"></editable-page>`,
  styles: [],
})

export class AppComponent {
  @Input() content: any;

  constructor(private editorContext: EditorContextService) {
    this.editorContext.setComponentMapping(config.componentMapping);
    this.getContent();
  }

  async getContent() {
    const contentRes = await fetch('http://localhost:8080/magnoliaAuthor/.rest/pages/spa-home');
    const content = await contentRes.json();

    if (this.editorContext.inIframe()) {
      const templateAnnotationsRes = await fetch(
        'http://localhost:8080/magnoliaAuthor/.rest/template-annotations/v1/spa-home'
      );
      const templateAnnotations = await templateAnnotationsRes.json();

      this.editorContext.setTemplateAnnotations(templateAnnotations);
    }

    this.content = content;
  }
}

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

@Component({
  template: `
    <div>
      <h2>{{ title }}</h2>
    </div>
  `,
  standalone: true,
})
export class TitleComponent {
  @Input() title: string;
}

import { EditorContextService } from '@magnolia/angular-editor';

export class AppComponent {
  constructor(private editorContext: EditorContextService) {
    // ...
  }

  async getPage() {
    const requestUrl = 'https://foo.bar/travel/?mgnlPreview=false&mgnlChannel=desktop';
    const spaRootNodePath = '/home';
    const languages = ['en', 'de'];
    const magnoliaContext = this.editorContext.getMagnoliaContext(requestUrl, spaRootNodePath, languages);

    /*
    magnoliaContext = {
      isMagnolia: true,
      isMagnoliaEdit: true,
      isMagnoliaPreview: false,
      nodePath: /home/travel,
      currentLanguage: 'en',
      searchParams: { mgnlChannel: 'desktop', mgnlPreview: 'false', variants: 'all' },
      search: '?mgnlPreview=false&mgnlChannel=desktop&variants=all&lang=en'
    }
    */

    // Fetch page content
    const pagesRes = await fetch(PAGES_API + magnoliaContext.nodePath + magnoliaContext.search);

    // Fetch template annotations
    if (magnoliaContext.isMagnolia) {
      const templateAnnotationsRes = await fetch(TEMPLATE_ANNOTATIONS_API + magnoliaContext.nodePath);
    }
  }
}