update the example

qwefgh90 · Dec 20, 2023 · ed2a498 · ed2a498
1 parent 465642e
commit ed2a498
Show file tree

Hide file tree

Showing 2 changed files with 381 additions and 304 deletions.
diff --git a/projects/demo/src/app/example.component.ts b/projects/demo/src/app/example.component.ts
@@ -7,7 +7,7 @@ import {
   SimpleChanges,
 } from '@angular/core';
 import { Subject } from 'rxjs';
-import { NgTerminal } from 'ng-terminal';
+import { KindOfCharacterAttributes, NgTerminal } from 'ng-terminal';
 import { FormControl } from '@angular/forms';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { Terminal } from 'xterm';
@@ -20,7 +20,6 @@ import { WebLinksAddon } from 'xterm-addon-web-links';
   styleUrls: ['./example.component.css'],
 })
 export class ExampleComponent implements AfterViewInit {
-
   readonly title = 'NgTerminal Live Example';
   readonly color = 'accent';
   readonly prompt = '\n' + FunctionsUsingCSI.cursorColumn(1) + '$ ';
@@ -43,7 +42,6 @@ export class ExampleComponent implements AfterViewInit {
 
   @ViewChild('term', { static: false }) child?: NgTerminal;
 
-
   ngAfterViewInit() {
     if (!this.child) return;
     this.underlying = this.child.underlying!!;
@@ -52,10 +50,34 @@ export class ExampleComponent implements AfterViewInit {
     this.child.setXtermOptions({
       fontFamily: '"Cascadia Code", Menlo, monospace',
       theme: this.baseTheme,
-      cursorBlink: true
+      cursorBlink: true,
     });
-    this.child.write('$ NgTerminal Live Example');
-    this.child.write(this.prompt);
+    this.child.write(
+      '$ NgTerminal Live Example\n' + FunctionsUsingCSI.cursorColumn(1)
+    );
+    this.child.write(
+      FunctionsUsingCSI.characterAttributes(
+        KindOfCharacterAttributes.SetforegroundcolortoRed,
+        KindOfCharacterAttributes.Bold
+      )
+    );
+    this.child.write(
+      `$ 1) Try the data binding in the input below.\n` +
+        FunctionsUsingCSI.cursorColumn(1)
+    );
+    this.child.write(FunctionsUsingCSI.characterAttributes(KindOfCharacterAttributes.Normal));
+    this.child.write(
+      `$ 2) Try dragging on the ${FunctionsUsingCSI.characterAttributes(KindOfCharacterAttributes.SetbackgroundcolortoGreen)}borders\
+${FunctionsUsingCSI.characterAttributes(KindOfCharacterAttributes.Normal)} and set \
+${FunctionsUsingCSI.characterAttributes(KindOfCharacterAttributes.SetbackgroundcolortoCyan)}row and\
+ col${FunctionsUsingCSI.characterAttributes(KindOfCharacterAttributes.Normal)}\
+.\n` +
+        FunctionsUsingCSI.cursorColumn(1)
+    );
+    this.child.write(
+      FunctionsUsingCSI.characterAttributes(KindOfCharacterAttributes.Bold)
+    );
+    this.child.write(`$ `);
     this.child.onData().subscribe((input) => {
       if (!this.child) return;
       if (input === '\r') {