Tanto [id]="item.id" como id="{{item.id}}" generarán el mismo resultado, ya que ambas son formas de vincular una variable a la plantilla. [] está usando la sintaxis vinculante y la iterpolación { {}}. Ambos usos están bien hasta donde yo sé y depende de su preferencia.

Por otro lado, [attr.id]="id" podría darte un resultado diferente. Esto pondrá el valor de la identificación de la variable en la identificación del atributo del html. por ejemplo: si la variable id=1234.

 <div [attr.id]="id"></div> => <div id="1234"></div>

Pero si tiene un componente con una entrada llamada "id" como:

 import { Component, Input } from '@angular/core'; @Component({ selector: 'hello-world', template: `<h1>Hello your ID is: {{id}}</h1>`, styles: [`h1 { font-family: Lato; }`], }) export class HelloComponent { @Input() id: string; }

Usar [attr.id] no es lo mismo que usar [id].

• [id] llenará la variable de entrada del componente llamado "id"
• [attr.id] definirá el atributo HTML "id"

Espero que esto ayude a resolver tu pregunta.

Necesitará saber la diferencia entre atributos y propiedades.

El primero esel enlace de propiedades , que se usa comúnmente para enlazar propiedades HTML dinámicas. Su caso de uso correcto es ese primer ejemplo [id]="item.id" , en el que la propiedad HTML es ID

La tercera es la interpolación de texto , comúnmente utilizada para "incorporar valores de cadena dinámicos en sus plantillas HTML". El caso de uso correcto debería ser <p>Audi has sold {{totalCarsSold}} cars in 2021</p> , donde totalCarsSold está definido en su componente. Aunque el tercero también funciona, no se recomienda vincular propiedades HTML.

El segundo, sin embargo, es el enlace de atributos . Dado que angular usa enlaces de propiedad, no puede "entender" el rol de ese atributo que se ha vinculado como propiedad. Por lo tanto, el prefijo .attr debe usarse para decirle a angular que ese es un atributo que se está usando. Por ejemplo, en el caso de una barra de progreso dinámica a continuación,

<div style="width: {{progress}}%" [attr.aria-valuenow]="progress"> {{progress}}% </div> dado que aria es un atributo, debe tener el prefijo .attr , o angular arroja un error Can't bind to 'aria-valuenow' since it isn't a known property of 'div'

Asegúrese de consultar los enlaces anteriores para ver casos de uso detallados, o esta respuesta en stackoverflow en el mismo