feat(angular): add HttpClient to the host app to demo the saving of the editing code text to API

Author: ls-infra

verify/angular/src/app/app.component.css

@@ -1,12 +1,11 @@
-<h2>Monaco Language Client Angular Client Two way data binding Example</h2>
-<div>
-    @if(wrapperConfig) {
+<h2>Angular Monaco Editor demo with saving code to a mock HTTP server </h2>
+<div class="editor-container">
     <monaco-angular-wrapper
-        [wrapperConfig]="wrapperConfig"
+        [wrapperConfig]="wrapperConfig()"
+        [monacoEditorId]="editorId"
+        [editorInlineStyle]="editorInlineStyle()"
         (onTextChanged)="onTextChanged($event)"
     ></monaco-angular-wrapper>
 
-    }
-
-    {{ codeText() }}
+    <button class="save-button" (click)="save()">Save</button>
 </div>

verify/angular/src/app/app.component.html

@@ -3,31 +3,50 @@
  * Licensed under the MIT License. See LICENSE in the package root for license information.
  * ------------------------------------------------------------------------------------------ */
 
-import { AfterViewInit, Component, signal } from '@angular/core';
+import { AfterViewInit, Component, inject, signal } from '@angular/core';
 import { WrapperConfig } from 'monaco-editor-wrapper';
-import { MonacoAngularWrapperComponent } from '../monaco-angular-wrapper.component';
+import { MonacoAngularWrapperComponent } from '../monaco-angular-wrapper/monaco-angular-wrapper.component';
 import { buildJsonClientUserConfig } from 'monaco-languageclient-examples/json-client';
+import { SaveCodeService } from '../save-code.service';
+import { firstValueFrom } from 'rxjs';
 @Component({
     selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.css'],
+    templateUrl: "./app.component.html",
+    styleUrls: ["./app.component.scss"],
     standalone: true,
     imports: [MonacoAngularWrapperComponent],
 })
 export class AppComponent implements AfterViewInit {
-    wrapperConfig: WrapperConfig | undefined;
-    title = 'angular-client';
+    private saveCodeService = inject(SaveCodeService);
+    wrapperConfig = signal<WrapperConfig | undefined>(undefined); // this can be updated at runtime
 
+    title = 'angular demo for saving code';
+    editorId = 'monaco-editor-root'; // this can be parameterized or it can be in a loop to support multiple editors
+    editorInlineStyle = signal('height: 50vh;');
     readonly codeText = signal('');
 
     async ngAfterViewInit(): Promise<void> {
-        const config = buildJsonClientUserConfig({
-            htmlContainer: document.getElementById('monaco-editor-root')!,
-        });
-        this.wrapperConfig = config;
+        const editorDom = document.getElementById(this.editorId);
+        if (editorDom) {
+            const config = buildJsonClientUserConfig({
+                htmlContainer: editorDom,
+            });
+            this.wrapperConfig.set(config);
+        }
     }
 
     onTextChanged(text: string) {
         this.codeText.set(text);
     }
+
+    save = async () => {
+        try {
+            const response = await firstValueFrom(
+                this.saveCodeService.saveCode(this.codeText())
+            );
+            alert('Code saved:' + JSON.stringify(response));
+        } catch (error) {
+            console.error('Error saving code:', error);
+        }
+    };
 }

verify/angular/src/app/app.component.scss

@@ -4,5 +4,8 @@
  * ------------------------------------------------------------------------------------------ */
 
 import { bootstrapApplication } from '@angular/platform-browser';
+import { provideHttpClient } from '@angular/common/http';
 import { AppComponent } from './app/app.component';
-bootstrapApplication(AppComponent);
+bootstrapApplication(AppComponent, {
+    providers: [provideHttpClient()],
+});

verify/angular/src/app/app.component.ts

@@ -0,0 +1,9 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+@Injectable({ providedIn: 'root' })
+export class SaveCodeService {
+    private http = inject(HttpClient);
+    saveCode(codeText: string) {
+        return this.http.post('http://localhost:3003/save-code', { code: codeText });
+    }
+}