Miss any of our Open RFC calls?Watch the recordings here! »

angular-magnolia

1.0.4 • Public • Published

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

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

Keywords

none

Install

npm i angular-magnolia

DownloadsWeekly Downloads

8

Version

1.0.4

License

none

Unpacked Size

325 kB

Total Files

41

Last publish

Collaborators

  • avatar