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.
Top comments (0)