1 files changed, 27 insertions, 24 deletions
diff --git a/usecaseui-portal/src/app/views/maas/use/code-block.directive.ts b/usecaseui-portal/src/app/views/maas/use/code-block.directive.ts
index 31247184..08efe92c 100644
--- a/usecaseui-portal/src/app/views/maas/use/code-block.directive.ts
+++ b/usecaseui-portal/src/app/views/maas/use/code-block.directive.ts
@@ -1,4 +1,4 @@
-import { AfterViewChecked, AfterViewInit, Directive, ElementRef, Renderer2 } from '@angular/core';
+import { Directive, ElementRef, Renderer2, Input } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { NzMessageService } from 'ng-zorro-antd';
 import { ClipboardService } from 'ngx-clipboard';
@@ -6,33 +6,36 @@ import { ClipboardService } from 'ngx-clipboard';
 @Directive({
   selector: '[appCodeBlock]'
 })
-export class CodeBlockDirective implements AfterViewChecked {
+export class CodeBlockDirective {
+  @Input() set appCodeBlock(status: string) {
+    if (status === 'finished') {
+      setTimeout(() => {
+        this.setCopyButton();
+      }, 0);
+      
+    }
+  }
 
   constructor(private el: ElementRef, private renderer: Renderer2, private clipboardService: ClipboardService,
     private message: NzMessageService, private translate: TranslateService
   ) { }
 
-  ngAfterViewChecked() {
-    this.setCopyButton();
-  }
-
-setCopyButton() {
-  const preElements = this.el.nativeElement.querySelectorAll('pre');
-
-  preElements.forEach(pre => {
-    const codeElement = pre.querySelector('code');
-    const copyButtonExists = pre.querySelector('button.copy-button');
-    if (codeElement && !copyButtonExists) {
-      const copyButton = this.renderer.createElement('button');
-      this.renderer.addClass(copyButton, 'copy-button');
-      this.renderer.setProperty(copyButton, 'innerHTML', 'Copy');
-      this.renderer.listen(copyButton, 'click', () => {
-        this.clipboardService.copyFromContent(codeElement.innerText);
-        this.message.success(this.translate.instant('maas.copy_to_clipboard'));
-      });
-      this.renderer.insertBefore(pre, copyButton, codeElement);
-    }
-  });
-}
+  setCopyButton() {
+    const preElements = this.el.nativeElement.querySelectorAll('pre');
 
+    preElements.forEach(pre => {
+      const codeElement = pre.querySelector('code');
+      const copyButtonExists = pre.querySelector('button.copy-button');
+      if (codeElement && !copyButtonExists) {
+        const copyButton = this.renderer.createElement('button');
+        this.renderer.addClass(copyButton, 'copy-button');
+        this.renderer.setProperty(copyButton, 'innerHTML', 'Copy');
+        this.renderer.listen(copyButton, 'click', () => {
+          this.clipboardService.copyFromContent(codeElement.innerText);
+          this.message.success(this.translate.instant('maas.copy_to_clipboard'));
+        });
+        this.renderer.insertBefore(pre, copyButton, codeElement);
+      }
+    });
+  }
 }