How can I bind click event to an angular2 template interpolation?

Vaibhav Chauhan

Is it possible to bind click event to an interpolation? because when I am trying to execute the following code I get the following

ERROR Error: Uncaught (in promise):

Error: Template parse errors:

Parser Error: Got interpolation ({{}}) where expression was expected at column 7 in [upload({{config.fileLocation}})]

this is the template where we have faulty interpolation,

  <mat-card-actions>
      <button mat-raised-button type="button" (click)="upload({{config.fileLocation}})">Upload</button>
  </mat-card-actions>

and this is the angular component which is desired to be executed.

  upload(location = "/tmp/") {
  this.loader.open();

  const fileBrowser = this.fileInput.nativeElement;
  if (fileBrowser.files && fileBrowser.files[0]) {
    const formData: FormData = new FormData();
    formData.append('file', fileBrowser.files[0]);
    formData.append('data', JSON.stringify({
      "method": "filesystem.put",
      "params": [location + fileBrowser.files[0].name, { "mode": "493" }]
    }));

    this.http.post(this.apiEndPoint, formData).subscribe(
      (data) => {
        this.loader.close();
        this.snackBar.open("your files are uploaded", 'close', { duration: 5000 });
      },
      (error) => {
        this.loader.close();
        this.dialog.errorReport(error.status, error.statusText, error._body);

      }
    );
  };
}
Günter Zöchbauer

Just

(click)="upload(config.fileLocation)"

Never use {{}} together with [foo]="..." or (bar)="..."

[] and () already mark the attribute as Angular binding. {{}} also only allows string binding (stringifies every value), while the others allow binding of object values.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How can I bind click event in repeater element in winjs?

How can I bind the click event in ItemsControl of UWP?

Angular2 Click Event Not Updating Template

Angular 2 how can i add click event inside option?

kendo grid column: how to data bind click event in footer template?

How can I enable click on a svg line in angular2

How can i bind an extra click event to a hyperlink using jQuery 1.4?

Angular2 How to trigger (click) event

How can I handle the Angular (click) event for the middle mouse button?

Angular2 write on console from template click event

Angular - How can I write a condition in interpolation?

In mithril-js, how can vnode bind to click event

How can I bind a onclick event to a checkbox INSTEAD of a change event?

How can I add click event to kendoGridCellTemplate

How can I trigger a JavaScript event click

How can I delay a click to scroll event?

How I can get a click event

How to bind a click event in iOS?

Can I call jquery click() to follow an <a> link if I haven't bound an event handler to it with bind or click already?

How can I use two functions with same click event in angular 2/4?

How can I achieve the click event in week view of angular 2+ calendar?

Can't trigger event click inside ng-template angular

How to prevent an a element's click event what bind by angular?

Vetur template interpolation: How can I setup global virtual method for template by JsDoc? Without typescript

How can I combine the callback of the click event with the callback of the keydown event?

String interpolation in Angular2 event binding

How to bind vue click event with vue tables 2 (JSX)?

How can I convert strings of HTML into HTML in my template (Angular2/TypeScript)?

How can I use Electron's webview html element inside an angular2 template?