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.
;;;; @
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.
;;;; @ public settings: Settings; { thissettings = thisappSettingssettings; thisrouterevents; } ...
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.
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.
;; @ implements OnInit { ... thismgnCtxService; }
Define a component
Make your component extends MagnoliaComponent
and define a input parameter named component
.
;; @ implements OnInit MagnoliaComponent @ component: any; ...
You can they use directly that variable in the component template.
{{ component.address }} {{ component.phone }} {{ component.fax }}
License
DX Core