expose isCopySupported as a directive property

[surajpoddar16]

Can we expose isCopySupported as a directive property so that, users can conditionally show copy button. Right now I have to get reference of isCopySupported method from the ClipboardService in each component I want to use the directive. I can create a PR if this seems legitimate.

[maxisam]

I think so. Go ahead.

[surajpoddar16]

@maxisam seems like exposing isCopySupported will not solve this case. If NgIf is applied to the same element as the directive itself, it won't have access to the template reference variable for the same.

[surajpoddar16]

Though a user can still wrap it inside another element on which the directive can be applied

[surajpoddar16]

@maxisam I created a structural directive to support that conditionally renders target element based on isCopySupported flag. the code looks like this

import { ClipboardService } from './ngx-clipboard.service';

@Directive({
    // tslint:disable-next-line:directive-selector
    selector: '[ngxClipboardIfSupported]',
})
export class HdClipboardIfSupportedDirective implements OnInit {
    constructor(
        private _clipboardService: ClipboardService,
        private _viewContainerRef: ViewContainerRef,
        private _templateRef: TemplateRef<any>
    ) {}

    public ngOnInit() {
      if (this._clipboardService.isSupported) {
        this._viewContainerRef.createEmbeddedView(this._templateRef);
      }
    }
}

example implementation looks like this

<span
  *ngxClipboardIfSupported
  ngxClipboard
  cbContent="Foo bar"
  class="hevo-icon hevo-copy">
</span>

Should we provide a directive like this as well?

[maxisam]

yeah, I think we can. Make a pull request and I will take care of it. thx

[surajpoddar16]

created a PR #182

[maxisam]

it is out in [email protected] Thx!