How to use ngx-md - 10 common examples

TreeTableModule,
    ChartModule,
    CalendarModule,
    SpinnerModule,
    SliderModule,
    ToggleButtonModule,
    TabMenuModule,
    CarouselModule,
    TableModule,
    BlockUIModule,
    /* Cytoscape network graph */
    CytoscapeModule,
    // Local modules
    AppRoutingModule,
    ArchwizardModule,
    NgxMdModule.forRoot(),
    /**
     * store
     */
    StoreModule.forRoot({
      applications: ApplicationsStoreService.reducer,
      environments: EnvironmentsStoreService.reducer,
      graphs: GraphsStoreService.reducer,
      badges: BadgesStoreService.reducer,
      loaders: LoadersStoreService.reducer,
      helps: HelpsStoreService.reducer,
      config: ConfigStoreService.reducer,
      errors: ErrorsStoreService.reducer,
    }),
    /**
     * i18n
     */

path: '',
            component: LayoutComponent,
            children: [
                { path: 'example', loadChildren: './example/example.module#ExampleModule' },
                { path: 'validator', component: ValidatorComponent },
                { path: 'document', redirectTo: 'document/getting-started', pathMatch: 'full' },
                {
                    path: 'document/:id',
                    component: DocumentComponent
                }
            ]
        }
    ], environment.production ? { useHash: true, preloadingStrategy: PreloadAllModules } : { useHash: true }),
    NgZorroAntdModule.forRoot(),
    JsonSchemaModule,
    MarkdownModule.forRoot(),
    UEditorModule.forRoot({
        // **注：** 建议使用本地路径；以下为了减少 ng-alain 脚手架的包体大小引用了CDN，可能会有部分功能受影响
        // 指定ueditor.js路径目录
        path: '//apps.bdimg.com/libs/ueditor/1.4.3.1/',
        // 默认全局配置项
        options: {
            themePath: '//apps.bdimg.com/libs/ueditor/1.4.3.1/themes/'
        }
    }),
    NgxTinymceModule.forRoot({
        baseURL: '//cdn.bootcss.com/tinymce/4.7.4/'
    })
  ],
  providers: [
    StartupService,
    {

import { DocComponent } from './doc.component';
import 'prismjs/prism';
import 'prismjs/components/prism-typescript';

const DOC_ROUTES: Routes = [
  {
    path: '',
    component: DocComponent
  }
];

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    NgxMdModule.forRoot(),
    RouterModule.forChild(DOC_ROUTES)
  ],
  declarations: [DocComponent]
})
export class DocModule { }

import { HighlightModule } from 'ngx-highlightjs';
import { NgxMdModule } from 'ngx-md';
import { SchemaFormModule } from '../../lib/schema-form.module';
import { CodeSliderComponent } from './components/code-slider/code-slider.component';

const COMPONENTS = [CodeSliderComponent];
@NgModule({
    declarations: [...COMPONENTS],
    imports: [
        CommonModule,
        FormsModule,
        NgZorroAntdModule.forRoot(),
        AceEditorModule,
        SchemaFormModule,
        HighlightModule.forRoot({ theme: 'googlecode' }),
        NgxMdModule.forRoot()
    ],
    exports: [
        CommonModule,
        FormsModule,
        NgZorroAntdModule,
        AceEditorModule,
        SchemaFormModule,
        NgxMdModule,
        ...COMPONENTS
    ]
})
export class SharedModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: SharedModule,
            providers: []

import { AppComponent } from './app.component';
import { DemoComponent } from './demo/components/demo.component';
import { DemoModule } from './demo/demo.module';
import { ReadmeComponent } from './readme/components/readme.component';
import { ReadmeModule } from './readme/readme.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DemoModule,
    ReadmeModule,
    NgxMdModule.forRoot(),
    ImageUploadModule.forRoot(),
    RouterModule.forRoot([{
      path: '',
      redirectTo: 'demo',
      pathMatch: 'prefix'
    }, {
      path: 'demo',
      component: DemoComponent
    }, {
      path: 'readme',
      component: ReadmeComponent
    }], { useHash: true })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

@Component({
  selector: 'my-app',
  template: `
    
    ## HI
    
  `,
})
export class AppComponent {
  constructor() {
  }
}

@NgModule({
  imports: [BrowserModule, HttpClientModule, NgxMdModule.forRoot()],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserModule,
    NgbModule,
    HttpClientModule,
    TranslationModule.forRoot(l10nConfig),
    AppRoutingModule,
    OverlayModule,
    FormsModule,
    AceModule,
    LMarkdownEditorModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot(),
    NgxMdModule.forRoot(),
    SimplemdeModule.forRoot()
  ],
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '/'
    }, {
      provide: ACE_CONFIG,
      useValue: DEFAULT_ACE_CONFIG
    },
    NgbActiveModal
  ],
  bootstrap: [AppComponent],
  entryComponents: [
    SpinnerComponent,
    ModalDialogSignInComponent,

declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    HttpClientModule,
    CommonModule,
    RouterModule,
    AppRoutingModule,
    NgZorroAntdModule.forRoot(),
    DndModule.forRoot(),
    LayoutModule,
    NgxMdModule.forRoot(),
    UIGridModule,
  ],
  providers: [
    { provide: NZ_I18N, useValue: zh_CN },
    StartUpService,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { SharedModule } from '@sunbird/shared';
import { NgxMdModule } from 'ngx-md';
import { TimeAgoPipe } from 'time-ago-pipe';
import { NoteListComponent, InlineEditorComponent, NoteCardComponent, DeleteNoteComponent, PopupEditorComponent } from './components';
import { TelemetryModule } from '@sunbird/telemetry';
import { NgInviewModule } from 'angular-inport';

@NgModule({
  imports: [
    CommonModule,
    NotesRoutingModule,
    SuiModule,
    FormsModule,
    OrderModule,
    SharedModule,
    NgxMdModule.forRoot(),
    TelemetryModule,
    NgInviewModule
  ],
  declarations: [TimeAgoPipe, NoteListComponent, InlineEditorComponent,
    NoteCardComponent, PopupEditorComponent, DeleteNoteComponent],
  providers: [NotesService],
  exports: [NoteListComponent, PopupEditorComponent, NoteCardComponent]
})
export class NotesModule { }

import { AppRoutingModule } from './app.router.module';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    TablesComponent,
    PathComponent,
    VariableBindComponent,
    TodoComponent,
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    FormsModule,
    NgxMdModule.forRoot(),
    AppRoutingModule,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}