Angular pass parameters to a function

Question

I am trying to pass a parameter to a function for a given ID. Here is the code of the content of my HTML.

<header class="card-header">
        <p class="card-header-title">
            {{taskName}}
        </p>
        <p class="card-header-icon">
            <span [ngClass]="colorClass">
                <i class="fas fa-circle"></i>
            </span>
            <button class="card-footer-item button is-primary" (click)='deleteTaskById('{{id}}')'>X</button>
        </p>
    </header>

I am a beginner in Angular and I am wondering how can I pass the content of {{id}} in my function in the easiest way.

I have the following error message on my console :

    compiler.js:215 Uncaught Error: Template parse errors:
Unexpected closing tag "button". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("        </span>
            <button class="card-footer-item button is-primary" (click)='deleteTaskById('{{id}}')'>X[ERROR ->]</button>
        </p>
    </header>

Here is my function implementation :

  deleteTaskById(idCard){
    let card = {
      id: idCard,
      deadline: "",
      description: "",
      responsible: {},
      state: "",
      endDate: "",
      priority: ""
    };
    this.taskService.delete(idCard).subscribe(res => {

    });
    console.log("delete task : " + card.id);
  }

Thanks for you help.

can u add the function implementation here? cuz you are fetching the "id" from the .ts code to the template, then pass "id" to the .ts code again, which is not a good practice. — Raed Khalaf
– Raed Khalaf, Commented Jun 12, 2018 at 11:17
I tried this and I got the following warning compiler.js:215 Uncaught Error: Template parse errors: Parser Error: Got interpolation ({{}}) where expression was expected at column 16 in [deleteTaskById('{{id}}')] in ng:///AppModule/TasksCardComponent.html@9:54 (" <i class="fas fa-circle"></i> </span> <button class="card-footer-item button is-primary" [ERROR ->](click)="deleteTaskById('{{id}}')">X</button> </p> </header> — Ilan
– Ilan, Commented Jun 12, 2018 at 11:17
The function works well, I have the ID in my console.log when I put an ID like 1. I will add it if you want. — Ilan
– Ilan, Commented Jun 12, 2018 at 11:19

Sajeetharan · Accepted Answer · 2018-06-12 11:16:45Z

3

It should be just

<button class="card-footer-item button is-primary" (click)="deleteTaskById(id)">X</button>

answered Jun 12, 2018 at 11:16

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular pass parameters to a function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related