Home ERROR DOMException: Failed to execute 'setAttribute' on 'Element': '{{' is not a valid attribute name

Questions

ERROR DOMException: Failed to execute 'setAttribute' on 'Element': '{{' is not a valid attribute name

September 6, 2022

Before the question, code is not completed yet so some methods are empty and *ngIf directives might be wrong (logic-wise, not syntax-wise). But even without them I got the same error so I didn’t bother to remove them for now.

I’m following a angular course and expecting a screen like this when I click any of the edit buttons or create button:

Course-version

But after loading page without any errors, if I click any of the buttons (create or edit), I’m getting this error on the console and can’t find why after a long try:

my-version

Similar problems I found on Stackoverflow mostly caused of simple syntax errors but I couldn’t find any syntax issues with my code so far. Maybe someone will see the issue and correct me.

You can find all the codes below.

Here is my edit-task.component.html

<div *ngIf="task">
    <h2 {{ task.taskName }}></h2>
        <div>
            Task ID:
            <input [(ngModel)]="task.taskId" placeholder="Task ID"/>
        </div>
        <div>
            Name:
            <input [(ngModel)]="task.taskName" placeholder="Name"/>
        </div>
        <div>
            Responsible ID:
            <input [(ngModel)]="task.responsibleId" placeholder="Responsible ID"/>
        </div>
    <button (click)="updateTask(task)" *ngIf="task.taskId != null">Save</button>
    <button (click)="deleteTask(task)" *ngIf="task.taskId != null">Delete</button>
    <button (click)="createTask(task)" *ngIf="task.taskId == null">Create</button>
</div>

Here is app.component.html

<button (click)="initNewTask()">Create new task</button>

<table>
  <thead>
    <th>Task ID: </th>
    <th>Task Name: </th>
    <th>Resp ID: </th>
    <th></th>
  </thead>
  <tbody>
    <tr *ngFor="let task of tasks" >
      <td>{{ task.taskId }}</td>
      <td>{{ task.taskName }}</td>
      <td>{{ task.responsibleId }}</td>
      <td><button (click)="editTask(task)">Edit</button></td>
    </tr>
  </tbody>
</table>


<app-edit-task [task]="taskToEdit"></app-edit-task>

Here is edit-task.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { Task } from 'src/app/models/task';

@Component({
  selector: 'app-edit-task',
  templateUrl: './edit-task.component.html',
  styleUrls: ['./edit-task.component.css']
})
export class EditTaskComponent implements OnInit {

  @Input() task?: Task;

  constructor() { }

  ngOnInit(): void {
  }

  updateTask(task:Task){

  }
  deleteTask(task:Task){
    
  }
  createTask(task:Task){
    
  }

}

And here is app.component.ts

import { TaskService } from './services/task.service';
import { Task } from './models/task';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  tasks: Task[] = [];
  taskToEdit?: Task;

  constructor(private taskService: TaskService){}

  ngOnInit() : void {
    
    this.taskService
    .getTasks()
    .subscribe((result: Task[]) => (this.tasks = result));
    
  }

  initNewTask(){
    this.taskToEdit = new Task();
  }

  editTask(task: Task){
    this.taskToEdit = task;
  }
}