How to use @Attribute decorator in Angular

Clique aqui para ler em Português.

The @Attribute decorator allows passing data from a parent to a child component in a way very similar to the @Input decorator.

But @Attribute is very limited in comparison to @Input as it only allows passing simple static string data.

How to use

First, you must decorate a constructor parameter.

In the code below I used the readonly keyword just as a preference matter, your parameter doesn’t need to be read-only and you can use any access modifier you want.

@Component({
  selector: "app-hello",
  template: `{{ parameter }}`,
})
export class HelloComponent {
  constructor(@Attribute("message") readonly parameter: string) {}
}

So you can pass a static string as a normal HTML attribute. Note that the attribute name must be the same as the argument passed to @Attribute.

@Component({
  selector: "app-root",
  template: `<app-hello message="Hello"></app-hello>`,
})
export class AppComponent {}

How DO NOT use

You cannot use data binding with @Attribute. The code below shows four WRONG ways to use this decorator.

@Component({
  selector: "app-root",
  template: `
    <app-hello [attr.message]="'Hello'"></app-hello>
    <app-hello [message]="'Hello'"></app-hello>
    <app-hello message="{{ hello }}"></app-hello>
    <app-hello [message]="hello"></app-hello>
  `,
})
export class AppComponent {
  hello = "World";
}

Final thoughts

Although the @Input decorator is more flexible, sometimes a simple static string may be more suitable. In these times the @Attribute decorator may be very useful.

I hope this article was helpful.