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 class="maps-container map-widget m-b-25">
<div class="map" data-addresses="[4.4, -4.4]"
data-icon="assets/images/map-marker.png"
data-zoom="16" data-street-view="1">
</div>
</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">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>This is title</h1>
</div>
</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.