feat(clipboard-if-supported): provide a directive for rendering eleme…

…nt if copy is supported (#182)

* feat(clipboard-if-supported): provide a directive for rendering element if copy is supported

provide a structural directive called ngxClipboardIfSupported that renders the host only if
isCopySupported returns true

README.md

@@ -117,6 +117,14 @@ Or updating parameters directly like so
 
 - `cbOnError` callback attribute is triggered when there's failure in copying with `$event:{isSuccess: false}`
 
+### Conditionally render host
+
+You can also use the structural directive *ngxClipboardIfSupported to conditionally render the host element
+
+```html
+<button ngxClipboard *ngxClipboardIfSupported [cbContent]="'target string'" (cbOnSuccess)="isCopied = true">Copy</button>
+```
+
 ## Example
 
 [stackblitz.com](https://stackblitz.com/github/maxisam/ngx-clipboard)

projects/ngx-clipboard/src/lib/ngx-clipboard-if-supported.directive.spec.ts

@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { ClipboardModule } from './ngx-clipboard.module';
+import { ClipboardService } from './ngx-clipboard.service';
+
+@Component({
+ // tslint:disable-next-line:component-selector
+ selector: 'test-cmp',
+ template: `
+ <span
+ *ngxClipboardIfSupported
+ ngxClipboard
+ cbContent="Foo Bar">
+ Copy Foo Bar
+ </span>`
+})
+class TestComponent {
+}
+
+function createTestComponent(): ComponentFixture<TestComponent> {
+ return TestBed.createComponent(TestComponent);
+}
+
+describe('ngxClipboardIfSupported directive', () => {
+ let fixture: ComponentFixture<TestComponent>;
+ let clipboardService: ClipboardService;
+ let spy: jasmine.Spy;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [TestComponent],
+ imports: [ClipboardModule],
+ });
+
+ clipboardService = TestBed.get(ClipboardService);
+ fixture = createTestComponent();
+ spy = spyOnProperty(clipboardService, 'isSupported', 'get');
+ });
+
+ it('should not render host when copy is not supported', async(() => {
+ spy.and.returnValue(false);
+ fixture.detectChanges();
+ expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(0);
+ }));
+
+ it('should render host when copy is supported', async(() => {
+ spy.and.returnValue(true);
+ fixture.detectChanges();
+ expect(fixture.debugElement.queryAll(By.css('span')).length).toEqual(1);
+ }));
+});

projects/ngx-clipboard/src/lib/ngx-clipboard-if-supported.directive.ts

@@ -0,0 +1,21 @@
+import { Directive, OnChanges, TemplateRef, ViewContainerRef, OnInit } from '@angular/core';
+
+import { ClipboardService } from './ngx-clipboard.service';
+
+@Directive({
+ // tslint:disable-next-line:directive-selector
+ selector: '[ngxClipboardIfSupported]',
+})
+export class ClipboardIfSupportedDirective implements OnInit {
+ constructor(
+ private _clipboardService: ClipboardService,
+ private _viewContainerRef: ViewContainerRef,
+ private _templateRef: TemplateRef<any>
+ ) {}
+
+ ngOnInit() {
+ if (this._clipboardService.isSupported) {
+ this._viewContainerRef.createEmbeddedView(this._templateRef);
+ }
+ }
+}

projects/ngx-clipboard/src/lib/ngx-clipboard.module.ts

@@ -2,10 +2,11 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { ClipboardDirective } from './ngx-clipboard.directive';
+import { ClipboardIfSupportedDirective } from './ngx-clipboard-if-supported.directive';
 
 @NgModule({
  imports: [CommonModule],
- declarations: [ClipboardDirective],
- exports: [ClipboardDirective]
+ declarations: [ClipboardDirective, ClipboardIfSupportedDirective],
+ exports: [ClipboardDirective, ClipboardIfSupportedDirective]
 })
 export class ClipboardModule {}

projects/ngx-clipboard/src/public_api.ts

@@ -5,3 +5,5 @@
 export * from './lib/ngx-clipboard.service';
 export * from './lib/ngx-clipboard.directive';
 export * from './lib/ngx-clipboard.module';
+export * from './lib/ngx-clipboard-if-supported.directive';
+