# angular-magnolia

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

Latest version **1.0.4** (published 2019-12-19) · 0 weekly downloads

## Install

```sh
npm install angular-magnolia
pnpm add angular-magnolia
yarn add angular-magnolia
bun add angular-magnolia
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2019-12-19 |
| First published | 2019-09-24 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 317.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | amanzoni |

## Links

- npm: https://www.npmjs.com/package/angular-magnolia
- npm.io page: https://npm.io/package/angular-magnolia

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 1.0.4 (latest) — 2019-12-19
- 1.0.3 — 2019-10-30
- 1.0.2 — 2019-09-24
- 1.0.1 — 2019-09-24
- 1.0.0 — 2019-09-24

## README

# Angular - Magnolia integration library

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

[https://git.magnolia-cms.com/projects/DEMOS/repos/services-demos-headless/browse](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](https://nexus.magnolia-cms.com/service/local/repositories/magnolia.incubator.releases/content/info/magnolia/magnolia-services-licence/1.0.2/magnolia-services-licence-1.0.2.jar) module
- [magnolia-headless-rendering-1.0.5](https://nexus.magnolia-cms.com/service/local/repositories/magnolia.incubator.releases/content/info/magnolia/rendering/magnolia-headless-rendering/1.0.5/magnolia-headless-rendering-1.0.5.jar) module

> You will need your Magnolia account credentials to download modules.


<br><br>

## Getting started

### Installation

To install the library in your angular project. <br>
`npm install angular-magnolia`
<br>

### Configuration

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

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

<br>
Finally, in the app component class, add a subscriber to the router events changes.<br>
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.
 
```javascript
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);
      }

      ...
    });
  }
  ...
}
```

<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](https://git.magnolia-cms.com/projects/INCUBATOR/repos/angular-magnolia/browse/projects/angular-magnolia/src/lib/area/list.area.html).

<br>

In case you define an area without component, you can also directly use the Magnolia context service.
```javascript
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;
    });
  }
}
```

<br>

### Define a component

Make your component extends `MagnoliaComponent` and define a input parameter named `component`.
```javascript
import {Component, Input, OnInit} from '@angular/core';
import {MagnoliaComponent} from 'angular-magnolia';

@Component()
export class MyComponent implements OnInit, MagnoliaComponent {
  @Input() component: any;

  ...
}
```

<br>You can they use directly that variable in the component template.
```html
<div>
  <div>
    <div>{{ component.address }}</div>
    <div>{{ component.phone }}</div>
    <div>{{ component.fax }}</div>
  </div>
</div>
```

<br><br>

## License

DX Core

---
_Source: https://npm.io/package/angular-magnolia · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._