Menu
I'm learning Angular 2. For that, I'm trynig to create basic example.
I have a class with a variable that contains this string: M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z
I'm trying to use that string as a parameter for a svg element
Just to check:
This svg works:
<svg fill="white" height="64" width="64">
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>
The variable icon in the template contains the correct string. I'm trying to do like this:
<svg fill="black" height="24" width="24">
<path d={ icon } />
</svg>
And Adding " to the parameter d. But I cannot make it work
775
Attribute binding syntax is like property binding. In property binding, we only specify the element between brackets. But in the case of attribute binding, it starts with the prefix attar, followed by a dot (.), and the name of the attribute.
Property binding uses the [] syntax for data binding.
One-way data binding in Angular (i.e. unidirectional binding) is a way to bind data from the component to the view (DOM) or vice versa - from view to the component. It is used to display information to the end-user which automatically stays synchronized with each change of the underlying data.
Data binding in AngularJS is the synchronization between the model and the view. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well.
You need to use attribute binding with SVG elements:
<path [attr.d]="icon" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
