The core package, provides the generic node component and the node discovery service.
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.
We want to add the image node type available in the tree.
```
image/
image.component.ts
`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 };
}
`
`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 {}
`
This is the tree entry point.
`angular2html`
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 {}