CODEWITHSUNDEEP
javascripthtmlangularangular-directivecustom-attributes
Mike Ciote
Mike Ciote

Reputation: 29

Angular does not work with custom html attributes

I have an imported css template written on bootstrap, and want to use it inside Angular app.

Seems like exactly custom html attributes don't react a loading from router.

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">

Upvotes: 0

Views: 1387

Answers (1)

Becario Senior
Becario Senior

Reputation: 714

You better use [attr.data]="name-of-custom-attr"

This way angular manages the use of custom html attributes correctly.

Upvotes: 1

Related Questions