angular-magnolia

Angular - Magnolia integration library

Provide the Angular library allowing the seamless integration of content coming from Magnolia.

https://git.magnolia-cms.com/projects/DEMOS/repos/services-demos-headless/browse

This is an incubator(link to https://wiki.magnolia-cms.com/display/SERVICES/Incubator) module from Magnolia Professional Services. This feature will be productized in Q2 2020.

Requirements

• Magnolia DX Core
• magnolia-services-licence-1.0.2 module
• magnolia-headless-rendering-1.0.5 module

You will need your Magnolia account credentials to download modules.

Getting started

Installation

To install the library in your angular project.
npm install angular-magnolia

Configuration

Import the libraries in your module class and add its AngularMagnoliaModule to the imports by injecting the app environment.
Then add MagnoliaContextService to the providers.

import {NgModule} from '@angular/core';
import {environment} from "../environments/environment";
import {AppComponent} from './app.component';
import {AngularMagnoliaModule, MagnoliaContextService} from 'angular-magnolia';
 
@NgModule({
   imports: [
    ...
    AngularMagnoliaModule.forRoot(environment)
  ],
  declarations: [
    ...
  ],
  providers: [
    ...
    MagnoliaContextService,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Finally, in the app component class, add a subscriber to the router events changes.
When the event `NavigationStart` is triggered, we need to update accordingly the URL fragment in the Magnolia context service, so we can crawl the configuration of the new page.

import {Component} from '@angular/core';
import {Event, NavigationEnd, NavigationError, NavigationStart, Router} from '@angular/router';
import {AppSettings, Settings} from './app.settings';
import {MagnoliaContextService} from 'angular-magnolia';
 
@Component()
export class AppComponent {
  public settings: Settings;
 
  constructor(public appSettings:AppSettings, public router: Router, private mgnCtxService: MagnoliaContextService){
    this.settings = this.appSettings.settings;
 
    this.router.events.subscribe((event: Event) => {
      if (event instanceof NavigationStart) {
        this.mgnCtxService.setFragmentURL(event.url);
      }
 
      ...
    });
  }
  ...
}

Define an area

In your page or your component, define a DOM element and add the [cmsArea] directive. The name must be the same as the one defined in the related page or component yaml definition.
Then add the directive list-area to display the configured components one below the others.

<div [cmsArea]="'main'" list-area></div>

you can define your own area script by changing list-area with your own directive. Example here.

In case you define an area without component, you can also directly use the Magnolia context service.

import {Component, OnInit} from '@angular/core';
import {MagnoliaContextService} from "angular-magnolia";
 
@Component()
export class MyComponent implements OnInit {
 
  ngOnInit() {
    ...
 
    this.mgnCtxService.getAreaContent("main").then(formArea => {
      this.address = formArea.address;
      this.phone = formArea.phone;
      this.fax = formArea.fax;
      this.contactEmail = formArea.contactEmail;
      this.infoEmail = formArea.infoEmail;
    });
  }
}

Define a component

Make your component extends MagnoliaComponent and define a input parameter named component.

import {Component, Input, OnInit} from '@angular/core';
import {MagnoliaComponent} from 'angular-magnolia';
 
@Component()
export class MyComponent implements OnInit, MagnoliaComponent {
  @Input() component: any;
 
  ...
}

You can they use directly that variable in the component template.

<div>
  <div>
    <div>{{ component.address }}</div>
    <div>{{ component.phone }}</div>
    <div>{{ component.fax }}</div>
  </div>
</div>

License

DX Core