Can't bind to 'cdkCopyToClipboard' since it isn't a known property of 'button'

[mugambiwarwema]

ISSUE 01

I intend to copy some string to the clipboard. With this, I have a ButtonViewComponent as seen below

@Component({
  selector: 'button-view',
  styleUrls: ['./pages.component.scss'],
  template: `
          <button nbButton status="info" size="small" (click)="onClick()"  [cdkCopyToClipboard]="rowData.checkout_url" [disabled]="rowData.orderStatus == 'Pending'">Copy To Clipboard</button>
          `,
})

export class CopyKeyButtonComponent implements ViewCell {

This component resides in the path

src/app/pages/CopyKeyButtonComponent .ts

In pages.module.ts I have added the API reference for Angular CDK clipboard as follows

import {ClipboardModule} from '@angular/cdk/clipboard';

then I added it to the imports list

  imports: [
    PagesRoutingModule,
    ThemeModule,
    NbMenuModule,
    DashboardModule,
    MiscellaneousModule,
    ClipboardModule,
  ],

Perhaps I am doing it wrong, please advise.

ISSUE 02

I have applied the dark theme. However, when I type some text into a smart-table cell the font is black, when I move the cursor away, the text becomes white(on a white cell, and I cannot see the contents of the cell.

Please see attached file called nebular. I have typed some text under Product-Name but when I focus on another cell-item, the white text color renders it unreadable.

ISSUE 03

I am having trouble adding some white space to the user1 element found under @theme/components/header. I wish to move it to the extreme right of the header. Here is my code and css file of the header.component

In header.component.scss I have

 .example-spacer {
    flex: 1 1 auto;

in header.component.html I have

<div class="header-container">
  <div class="logo-container">
    <a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
      <nb-icon icon="menu-2-outline"></nb-icon>
    </a>
    <a class="logo" href="#" (click)="navigateHome()">BC-Sparrows</a>
  </div>

  <span class="example-spacer"></span>

<div class="header-container">
  <nb-actions size="medium">
   <nb-actions></nb-actions>
    <nb-action class="user-action">
      <nb-user [nbContextMenu]="userMenu"
               [onlyPicture]="userPictureOnly"
               [name]="user?.username"
               nbContextMenuTag="logout-menu">
      </nb-user>
    </nb-action>
  </nb-actions>
</div>

Please assist where possible. Much thanks and remember to keep safe and sanitize :-)

[hubatruck]

Hi mugambiwarwema,

Issue 2 is present for the cosmic theme, I was able to make the text visible by editing

src/app/@theme/styles/_overrides.scss

so now it looks something like this:

@import "./themes";

@mixin nb-overrides() {
  nb-select.size-medium button {
    padding: 0.4375rem 2.2rem 0.4375rem 1.125rem !important;

    nb-icon {
      right: 0.41rem !important;
    }
  }

  // this fixes the cell color problem
  table-cell-default-editor {
    color: black !important;
  }
}

You can change it to any color you want by replacing the 'black' color with a HEX or RGB color. Note: I don't think this is the most efficient way to change the style of the cell.

---

Regarding issue 3, you are missing a closing div tag for the first <div class="header-container"> element. If you add that, the user profile element will go automatically to the right side of the screen.

<div class="header-container">
  <div class="logo-container">
    ...
  </div>
</div>          <!-- this is missing from your example -->

[mugambiwarwema]

Silly me :-)

Issue 3 solved. Thanks @hubatruck