How to use ngx-monaco-editor - 10 common examples

import { MatSnackBarModule } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    CommonModule,
    // NoopAnimationsModule,
    MatIconModule,
    HttpModule,
    CoreModule,
    // AppRoutingModule,
    DashboardModule,
    EditorModule,
    MonacoEditorModule.forRoot(new MonacoConfig().config),
    SharedModule,
    MatSnackBarModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

/*
  This program and the accompanying materials are
  made available under the terms of the Eclipse Public License v2.0 which accompanies
  this distribution, and is available at https://www.eclipse.org/legal/epl-v20.html
  
  SPDX-License-Identifier: EPL-2.0
  
  Copyright Contributors to the Zowe Project.

import { FormsModule } from '@angular/forms';
import { MonacoEditorModule, NGX_MONACO_EDITOR_CONFIG } from 'ngx-monaco-editor';
import { CodeEditorComponent } from './components/code-editor/code-editor.component';
import { CodeEditorService } from './services/code-editor-service.service';


export function monacoEditorConfigFactory(codeEditorService: CodeEditorService) {
    return codeEditorService.getConfig();
}

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        // We re-provide module's internal NGX_MONACO_EDITOR_CONFIG, see the providers
        MonacoEditorModule.forRoot({})
    ],
    declarations: [CodeEditorComponent],
    exports: [
        CommonModule,
        FormsModule,
        MonacoEditorModule,
        CodeEditorComponent
    ],
    providers: [
        {
            provide: NGX_MONACO_EDITOR_CONFIG,
            useFactory: monacoEditorConfigFactory,
            deps: [ CodeEditorService ]
        }
    ]
})

import { ScriptLoaderService } from './_services/script-loader.service';
import { ThemeRoutingModule } from './theme/theme-routing.module';
import { AuthModule } from './auth/auth.module';
import { SharedModule } from './shared/shared.module';
import { MonacoEditorModule } from 'ngx-monaco-editor';

@NgModule({
    declarations: [ThemeComponent, AppComponent],
    imports: [
        SharedModule,
        BrowserModule,
        BrowserAnimationsModule,
        AppRoutingModule,
        ThemeRoutingModule,
        AuthModule,
        MonacoEditorModule.forRoot(), // use forRoot() in main app module only.
    ],
    providers: [ScriptLoaderService],
    bootstrap: [AppComponent],
})
export class AppModule { }

ActiveProcessCountTickerComponent,
    ActiveProcessesModalComponent,
    InstallationConflictResolutionDialogComponent,
    AvailableUpgradesTickerComponent,
    AvailableUpgradesModalDialogComponent,
    SelectModalComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    HttpClientModule,
    ReactiveFormsModule,
    FormsModule,
    MonacoEditorModule.forRoot({
      baseUrl: environment.assetsPath,
      defaultOptions: {
        language: "javascript",
        scrollBeyondLastLine: false,
        minimap: {
          enabled: false
        },
        scrollbar: {
          useShadows: true,
          verticalHasArrows: false,
          horizontalHasArrows: false,
          vertical: "visible",
          verticalScrollbarSize: 12,
          horizontalScrollbarSize: 12,
          arrowSize: 30
        },

HelpModalComponent,
    TeamMemberModalComponent,
    TeamMemberDeleteModalComponent,
    LabelDeleteModalComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    NgxResourceFactoryModule.forRoot(),
    NgbModule,
    FontAwesomeModule,
    PerfectScrollbarModule,
    NgSelectModule,
    FormsModule,
    ReactiveFormsModule,
    MonacoEditorModule.forRoot(),
    NgPipesModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot(),
    NgxAnxFormsModule.forRoot(),

    ServicesModule.forRoot(),
  ],
  providers: [
    {
      provide: PERFECT_SCROLLBAR_CONFIG,
      useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: JwtInterceptor,
      multi: true

NavlistIconComponent,
    SearchIconComponent,
    ReplacePipe,
    ComponentsListComponent,
    IconsListComponent,
    DocDirective,
    ExamplesTabDocComponent,
    ExamplesIconDocComponent,
    ComponentViewerComponent,
    TypographyComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    NgbModule,
    MonacoEditorModule.forRoot({ baseUrl: './assets' }),
    AppRoutingModule,
    IconCollectionModule,
    ExamplesModule,
    ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
    PerfectScrollbarModule,
    HttpClientModule,
    BrowserAnimationsModule
  ],
  bootstrap: [AppComponent],
  entryComponents: [
    TextareaShowcaseComponent,
    LinksShowcaseComponent,
    AutocompleteShowcaseComponent,
    ButtonShowcaseComponent,
    RadioButtonShowcaseComponent,
    CheckboxShowcaseComponent,

const pipesArray = [
  pipes.CapitalizePipe,
  pipes.GroupByPipe,
  pipes.HideColumnsPipe,
  pipes.ExtensionPipe,
  pipes.ChartIconPipe
];

const directivesArray = [
  directives.SingleClickDirective,
  directives.DisableControlDirective
];

@NgModule({
  imports: [MonacoEditorModule.forRoot(), TreeModule.forRoot()],
  declarations: [...pipesArray, ...directivesArray],
  exports: [...pipesArray, ...directivesArray, MonacoEditorModule, TreeModule],
  providers: pipesArray
})
export class SharedModule {}

component: SearchResultsComponent
            }
        ]
    },

]);

@NgModule({
    imports: [
        AvatarModule,
        CommonModule,
        FormsModule,
        DashboardModuleRoutes,
        DiagnosticDataModule,
        SharedModule,
        MonacoEditorModule.forRoot(),
        AngularSplitModule,
        CollapsibleMenuModule,
        NgxSmartModalModule.forRoot(),
        NgSelectModule,
        MarkdownModule.forRoot(),
        HighchartsChartModule
    ],
    providers: [
        ApplensDiagnosticService,
        SearchService,
        ApplensCommsService,
        ApplensSupportTopicService,
        InitResolver,
        {
            provide: ResourceService,
            useFactory: ResourceServiceFactory,

TooltipShowcaseComponent,
  TagShowcaseComponent,
  UsermenuShowcaseComponent
];

@NgModule({
  declarations: exampleComponents,
  entryComponents: exampleComponents,
  exports: exampleComponents,
  imports: [
    BrowserModule,
    CommonModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    MonacoEditorModule.forRoot(),
    IconCollectionModule,
    AccordionModule,
    AutocompleteModule,
    BadgeModule,
    BreadcrumbModule,
    ButtonModule,
    CaptchaModule,
    CheckboxModule,
    CheckboxPanelModule,
    DatepickerModule,
    DropdownModule,
    FieldModule,
    FileSelectorModule,
    GhettoboxModule,
    LightboxModule,
    LinksModule,

routing,
        FormsModule,
        HttpClientModule,
        MaterialModule,
        AppExtensionsModule,
        FlexLayoutModule,
        CoreModule.forRoot(),
        ContentModule.forRoot(),
        InsightsModule.forRoot(),
        ProcessModule.forRoot(),
        ProcessServicesCloudModule,
        ExtensionsModule.forRoot(),
        ThemePickerModule,
        ChartsModule,
        AppCloudSharedModule,
        MonacoEditorModule.forRoot()
    ],
    declarations: [
        AppComponent,
        LogoutComponent,
        AppLayoutComponent,
        HomeComponent,
        SearchBarComponent,
        SearchResultComponent,
        SearchExtendedComponent,
        LogComponent,
        ProcessServiceComponent,
        ShowDiagramComponent,
        FormViewerComponent,
        FormNodeViewerComponent,
        AppsViewComponent,
        FilesComponent,