CODEWITHSUNDEEP
htmlangulartypescriptangular2-formsangular2-directives
BeniaminoBaggins
BeniaminoBaggins

Reputation: 12503

Pass string to directive from html

I'm trying to add a "clipboard" directive using this example.

However I want to compute the string to copy to the clipboard.

I want to pass the result of a function which returns a string, to my directive.

Currently, it passes "getCopyDetails(supplier)" string, to the directive.

As I am trying to pass a computed string to the button (which contains the directive) in html:

<button [clipboard]="foo, getCopyDetails(supplier)" (clipboardSuccess)="onSuccess()">Copy</button>

Which causes the error.

code:

clipboard.directive.ts:

import {Directive,ElementRef,Input,Output,EventEmitter, ViewChild, AfterViewInit} from "@angular/core";
import Clipboard from "clipboard";
import { SupplierSearchComponent } from "../components/suppliersearch.component"

declare var jQuery:any;

@Directive({
  selector: "[clipboard]"
})
export class ClipboardDirective implements AfterViewInit {
  clipboard: Clipboard;

   @Input("clipboard")
   elt:ElementRef;

   text: string;

  @Output()
  clipboardSuccess:EventEmitter<any> = new EventEmitter();

  @Output()
  clipboardError:EventEmitter<any> = new EventEmitter();

  constructor(private eltRef:ElementRef, text) {
    this.text = text
  }

  ngAfterViewInit() {
    this.clipboard = new Clipboard(this.eltRef.nativeElement, {
      target: () => {
        return this.elt;
      }
    } as any);

    this.clipboard.on("success", (e) => {
      this.clipboardSuccess.emit();
    });

    this.clipboard.on("error", (e) => {
      this.clipboardError.emit();
    });
  }

  ngOnDestroy() {
    if (this.clipboard) {
      this.clipboard.destroy();
    }
  }
}

search.component.html:

<div  class="website" *ngIf="xxx.website !== undefined"><a #foo href="{{formatUrl(xxx.website)}}" target="_blank" (click)="someclickmethod()">{{xxx.website}}</a></div>
<button [clipboard]="foo, getCopyDetails(supplier)" (clipboardSuccess)="onSuccess()">Copy</button>

snippet from search.component.ts (same component as above):

getCopyDetails(supplier: Supplier): string {
    var details: string = "";

    details += xxx.yyy + "\n\n";
    details += xxx.yyy + "\n";
    details += xxx.yyy + "\n";
    details += xxx.yyy + "\n";
    details += xxx.yyy + "\n";

    return details;
}

Another programmer's old html code (he used "ngx-clipboard": "^5.0.8" plugin which is a wrapper around clipboard.js which I am using for the clipboard) has been commented out and I have basically tried to apply it to my directive in the html above:

<!--<button class="btn anchor" (click)="supplierCopyDetailsClick()" ngxClipboard [cbContent]="getCopyDetails(supplier)">Copy details</button>-->

How do I pass the string obtained from getCopyDetails() to my directive?

Judging from this SO answer I can do my-object='{"Code":"test"}' within the HTML and then use that in my directive to copy it. I am a little unsure what code I place in my directive to hold that object though.

Upvotes: 0

Views: 764

Answers (1)

Julia Passynkova
Julia Passynkova

Reputation: 17899

You can inject using Angular DI ONLY: @Injectable() services, Parents Components or InjectionToken.

So text is incorrect.

constructor(private eltRef:ElementRef, text) {
  this.text = text
}

Upvotes: 1

Related Questions