angular-magnolia v1.0.4

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 { }

@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);
  }

  ...
});

} ... }

<br>

### 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.<br>
Then add the directive `list-area` to display the configured components one below the others.
```html
<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