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:

• <tree-node [node]="node"> 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.

1. Create the component folder structure

image/
  image.component.ts

2. Define the image component

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

@Component({
  selector: 'app-image',
  template: `
    <img [attr.src]="data.url" *ngIf="data.url">
  `
})
@Node({ type: 'image', label: 'Image'})
export class ImageComponent extends NodeComponentBase implements NodeComponentInterface {

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

}

4. Add it to your NgModule

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

5. Use the tree-node component in your component.

This is the tree entry point.

<tree-node [node]="{ type: 'image', data: { url: 'https://placekitten.com/300/300' }, children: [] }"></tree-node>

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.

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.
  }
}

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