Pass string to directive from html - html

Question

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.

Answer 1

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
}