title: Angular 6 tree diagram
body: <p>I want to implement a tree diagram - something like this <a href="https://www.npmjs.com/package/angular2-tree-diagram" rel="nofollow noreferrer">angular2-tree-diagram</a>. Precisely, my task is a question-answer hierarchy where the question and answer will be propagated depending on the question and answer of the current node. </p>
  
  <p>However, <a href="https://www.npmjs.com/package/angular2-tree-diagram" rel="nofollow noreferrer">this</a> package was made for Angular 2. I am trying to integrate it with Angular 6 and could not able to succeed in this occasion.</p>
  
  <p>Main module [app.module.ts] script:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
  import { AppComponent } from './app.component';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { AppMaterialModule } from './app-material.module';
  import {
    FormsModule,
    ReactiveFormsModule
  } from '../../node_modules/@angular/forms';
  import { HeaderComponent } from './navigation/header/header.component';
  import { FlexLayoutModule } from '@angular/flex-layout';
  import { FooterComponent } from './navigation/footer/footer.component';
  import { MobileSidemenuComponent } from './navigation/sidemenu/mobile-sidemenu/mobile-sidemenu.component';
  import { LoginComponent } from './login/login.component';
  import { PhonebookComponent } from './phonebook/phonebook.component';
  import { TestWelcomePageComponent } from './test-welcome-page/test-welcome-page.component';
  import { AppRoutingModule } from './app-routing.module';
  
  import { FlashMessagesModule } from 'angular2-flash-messages';
  import { FlashMessagesService } from 'angular2-flash-messages';
  
  import { NgFlashMessagesModule } from 'ng-flash-messages';
  
  import { MatDialogModule } from '@angular/material';
  import { HttpModule } from '@angular/http';
  import { TasksComponent } from './tasks/tasks.component';
  import { NewsComponent } from './news/news.component';
  
  import { AuthTokenInterceptor, ErrorInterceptor } from './interceptor';
  import { RecordTaskFormInterceptor } from './interceptor';
  import { PerformanceDialogComponent } from './performance-dialog/performance-dialog.component';
  import { ProblemOverviewComponent } from './problem-overview/problem-overview.component';
  import { TaskOrProblemTrackingComponent } from './task-or-problem-tracking/task-or-problem-tracking.component';
  import { RecordDeviationComponent } from './record-deviation/record-deviation.component';
  import { CreateInformationComponent } from './create-information/create-information.component';
  import { AdminDomainSettingComponent } from './admin-domain-setting/admin-domain-setting.component';
  import { AccountSettingComponent } from './account-setting/account-setting.component';
  
  import { DashboardComponent } from './dashboard/dashboard.component';
  import { NewsDialogComponent } from './news/news-dialog/news-dialog.component';
  import { HomeComponent } from './home/home.component';
  import { ProblemSolvingComponent } from './problem-solving/problem-solving.component';
  import { ProblemStepperComponent } from './problem-solving/problem-stepper/problem-stepper.component';
  import { DeviationFormComponent } from './problem-solving/deviation-form/deviation-form.component';
  import { SpecificationFormComponent } from './problem-solving/specification-form/specification-form.component';
  import { DescriptionFormComponent } from './problem-solving/description-form/description-form.component';
  import { DirectcauseFormComponent } from './problem-solving/directcause-form/directcause-form.component';
  import { AnalysisFormComponent } from './problem-solving/analysis-form/analysis-form.component';
  import { ImplementationFormComponent } from './problem-solving/implementation-form/implementation-form.component';
  import { FishboneDiagramComponent } from './problem-solving/fishbone-diagram/fishbone-diagram.component';
  import { RecordTaskFormComponent } from './record-deviation/record-task-form/record-task-form.component';
  import { RecordProblemFormComponent } from './record-deviation/record-problem-form/record-problem-form.component';
  
  
  import { TreeDiagram } from 'angular2-tree-diagram';
  @NgModule({
    declarations: [
      AppComponent,
      HeaderComponent,
      MobileSidemenuComponent,
      FooterComponent,
      LoginComponent,
      PhonebookComponent,
      TestWelcomePageComponent,
      TasksComponent,
      NewsComponent,
      RecordTaskFormComponent,
      PerformanceDialogComponent,
      ProblemOverviewComponent,
      TaskOrProblemTrackingComponent,
      RecordDeviationComponent,
      CreateInformationComponent,
      AdminDomainSettingComponent,
      AccountSettingComponent,
      RecordProblemFormComponent,
      DashboardComponent,
      HomeComponent,
      NewsDialogComponent,
      ProblemSolvingComponent,
      ProblemStepperComponent,
      DeviationFormComponent,
      SpecificationFormComponent,
      DescriptionFormComponent,
      DirectcauseFormComponent,
      AnalysisFormComponent,
      ImplementationFormComponent,
      FishboneDiagramComponent
    ],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      AppMaterialModule,
      FlexLayoutModule,
      FormsModule,
      ReactiveFormsModule,
      AppRoutingModule,
      HttpModule,
      HttpClientModule,
      FlashMessagesModule.forRoot(),
      NgFlashMessagesModule.forRoot(),
      TreeDiagram
    ],
    providers: [
      { provide: HTTP_INTERCEPTORS, useClass: AuthTokenInterceptor, multi: true },
      { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
      { provide: HTTP_INTERCEPTORS, useClass: RecordTaskFormInterceptor, multi: true },
      FlashMessagesService,
      MatDialogModule
    ],
    bootstrap: [AppComponent],
    entryComponents: [LoginComponent, PhonebookComponent, NewsDialogComponent]
  })
  export class AppModule { }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any kind of help will be appreciated. Thanks</p>