@illgrenoble/ngx-remote-desktop/demo/app/app.component.html

ngx-remote-desktop is an Angular2+ module for connecting to a remote desktop using the guacamole protocol

<div class="vdi-container">
  <ngx-remote-desktop [manager]="manager">
    <!-- Toolbar items -->
    <ngx-remote-desktop-toolbar-item align="left" *ngIf="manager.isConnected()" (click)="handleScreenshot()">
        <i class="fa fa-print"></i> Take screenshot
    </ngx-remote-desktop-toolbar-item>
    <ngx-remote-desktop-toolbar-item align="left" *ngIf="manager.isConnected()" (click)="handleClipboard()" >
        <i class="fa fa-clipboard"> </i> Clipboard
    </ngx-remote-desktop-toolbar-item>
    <ngx-remote-desktop-toolbar-item *ngIf="manager.isConnected()" (click)="handleDisconnect()" align="right">
      <i class="fa fa-sign-out"> </i> Disconnect
    </ngx-remote-desktop-toolbar-item>
    <ngx-remote-desktop-toolbar-item (click)="handleEnterFullScreen()" *ngIf="!manager.isFullScreen() && manager.isConnected()" align="right">
        <i class="fa fa-arrows-alt" aria-hidden="true"></i> Enter full screen
    </ngx-remote-desktop-toolbar-item>
    <ngx-remote-desktop-toolbar-item (click)="handleExitFullScreen()" *ngIf="manager.isFullScreen() && manager.isConnected()" align="right">
        Exit full screen
    </ngx-remote-desktop-toolbar-item>

    <!-- Override connection state messages -->
    <ngx-remote-desktop-connecting-message>
      <div class="ngx-remote-desktop-message-title ngx-remote-desktop-message-title-success">
        CONNECTING TO REMOTE DESKTOP
      </div>
      <div class="ngx-remote-desktop-message-body">
        Attempting to connect to the remote desktop. Waiting for response...
      </div>
    </ngx-remote-desktop-connecting-message>

    <!-- Status bar -->
    <ngx-remote-desktop-status-bar *ngIf="manager.isConnected()">
      <ngx-remote-desktop-status-bar-item>
          You are currently connected to: <strong>Machine 1</strong>
      </ngx-remote-desktop-status-bar-item>
      <ngx-remote-desktop-status-bar-item>
          <span>Need help? Look at our <a href="#">documentation</a></span>
      </ngx-remote-desktop-status-bar-item>
    </ngx-remote-desktop-status-bar>
    
  </ngx-remote-desktop>
</div>