Text decoration is a style property that controls how text is displayed, such as whether it is underlined, struck through, or overlined. In Angular, you can bind to the text-decoration style property using either property binding or style binding.
Property Binding
Property binding is used to bind a property of an element to a property of a component. To bind to the text-decoration style property using property binding, you would use the following syntax:
<span [style.textDecoration]="decoratedText"></span>
In this example, the decoratedText property is bound to the text-decoration style property of the <span> element. The value of the decoratedText property will be used to set the value of the text-decoration style property.
Style Binding
Style binding is used to bind a style object to an element’s style properties. To bind to the text-decoration style property using style binding, you would use the following syntax:
<span [style]="{'text-decoration': decoratedText}"></span>
In this example, a style object is created with the text-decoration property set to the value of the decoratedText property. This style object is then bound to the <span> element’s style properties.
Example
The following example demonstrates how to bind to the text-decoration style property using both property binding and style binding:
<app-root></app-root>
<ng-template #app-root>
<div>
<span [style.textDecoration]="decoratedText">Underlined text</span>
<span [style]="{'text-decoration': decoratedText}">Overlined text</span>
</div>
</ng-template>
In this example, the decoratedText property is set to 'underline'. This means that the first <span> element will have an underline, and the second <span> element will have an overline.
Binding to Multiple Styles
You can also bind to multiple styles using style binding. To do this, you would create a style object with the properties you want to bind to. For example, the following code binds to the text-decoration, font-weight, and color style properties:
HTML
<span [style]="{'text-decoration': decoratedText, 'font-weight': 'bold', 'color': 'red'}"></span>
This code will set the text-decoration property to the value of the decoratedText property, the font-weight property to 'bold', and the color property to 'red'.
Conclusion
Binding to the text-decoration style property is a simple way to control how text is displayed in Angular. You can use either property binding or style binding to bind to this property.