I am seeking a way to customize attributes on the host element for Angular 1.5 components.
What is the purpose?
- I would like to assign a class to a component in order to apply specific styles. For example, if the parent component has
display: flexset, I may need to set theflexproperty on the component as well. - It can be beneficial to conditionally add a class based on the component's state.
- In certain scenarios, utilizing ARIA attributes can enhance the accessibility of a component.
Below is a basic example illustrating what I aim to achieve (though it does not function properly, I am searching for a similar solution):
angular.module("app").component('hello', {
attributes() {
return {
class: "hello " + (this.greeting ? "hello--visibile" : ""),
data-greeting: this.greeting
}
},
bindings: {
greeting: "<",
}
})
Angular 2.0 appears to support this functionality, however, I haven't found any documentation suggesting its availability in version 1.5. Is there a workaround for achieving this within the constraints of .component for those of us still using it?
In the past, I might have used replace: true to address this issue, but that option has been deprecated and is not even supported with .component.