Tree Core

BREAKING CHANGES 1.2.0 => 1.3.0

The component service using the NodeDiscoverableInterface aren't necessary and replace by the @Node decorator.

Provide the core features to represent a page or a subpart of a page using a JSON tree:

* is the node wrapper component that inject a node and there children.
* Make sure to add the target component to the entryComponents array in your module.

A basic example

We want to add the image node type available in the tree.

$3

``
image/
image.component.ts
`

$3

`typescript
import { Component } from '@angular/core';
import { NodeComponentInterface } from '@lheido/tree-core';

@Component({
selector: 'app-image',
template:


})
@Node({ type: 'image', label: 'Image'})
export class ImageComponent extends NodeComponentBase implements NodeComponentInterface {

data: { url: string, title?: string, alt?: string };

}
`

$3

`typescript
import { NgModule } from '@angular/core';

import { TreeCoreModule } from '@lheido/tree-core';
import { ImageComponent } from './image/image.component';

@NgModule({
declarations: [
//... other declarations.
ImageComponent,
],
imports: [
//... other imports.
TreeCoreModule,
],
entryComponents: [
ImageComponent,
],
// ...
})
export class MyModule {}
`

$3

This is the tree entry point.

`angular2html

`

Advanced

The tree core module provide a hook system to alter the injection process.
This should be useful to add custom behavior to the available node components.

To use the hook system you must be define a service that implement the NodeAfterInjectionHook interface and add it to your ngModule providers array.

`typescript
import { Injectable } from '@angular/core';
import { NodeInjectionHook, NodeComponentInterface, NodeInterface } from '@lheido/tree-core';

@Injectable({
providedIn: 'root'
})
export class MyBehaviorOnNodeInjectionHook implements NodeInjectionHook {
onAfterInjection(component: NodeComponentInterface, node: NodeInterface) {
// You can add your custom behaviors to the component instance here.
// The node param contains the initial node object.
}
}
`

`typescript
@NgModule({
// ...
providers: [
{ provide: 'NodeInjectionHook', useClass: MyBehaviorOnNodeInjectionHook, multi: true }
]
})
export class MyModule {}
``