Angular incompatibility with html attributes


Angular incompatibility with html attributes



I have an imported css template written on bootstrap, and want to use it inside Angular app. CSS are imported from index.html



Application characteristics.
This is a SPA, and all of pages are loaded inside Navbar Component, with corresponding router-outlet wrapping.



Problem.
Any plugin will render included data only after "mechanical" refreshing page with browser "Reload this page" button. But if I change a src for image, from plugin custom attribute, for example


data-background="assets/images/slider_1.jpg"



to


img src="assets/images/slider_1.jpg"



, it will be loaded and shown from the first time.



Example of map plugin. Doesnt show nothing.





</div>



Example of slider plugin. No background image.


<section class="module-cover parallax text-center"
data-background="assets/images/slider_1.jpg"
data-overlay="0.5">




This is title



</div>
</section>



Example of grid item for blog. Here, it should follow masonry style, but renders like strict grid.


<section class="module-cover parallax text-center"
data-background="assets/images/slider_1.jpg"
data-overlay="0.5">



Seems like exactly these custom attributes don't react from a first loading.









By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

api-platform.com Unable to generate an IRI for the item of type

How to set up datasource with Spring for HikariCP?

Display dokan vendor name on Woocommerce single product pages