CODEWITHSUNDEEP
javascriptjqueryhtmlangularangular8
Dash
Dash

Reputation: 834

Angular 8: Custom HTML Attribute doesn't work inside component html

I have an angular 8 application where I'm using custom html attributes in html and later using jQuery to retrieve those attributes to set background image, height etc of div and other dom elements.

The custom attribute code goes below:

var sayit_js_bg_image = jQuery('.sayit_js_bg_image');

if (jQuery(sayit_js_bg_image).length > 0) {
        jQuery(sayit_js_bg_image).each(function () {
            jQuery(this).css('background-image', 'url(' + jQuery(this).attr('data-src') + ')');
        });
    }
<div class="sayit_js_bg_image" data-src="assets/imgs/clipart/standard_post/back-1.jpg">
  
  <div class="sayit_overlay sayit_fimage_overlay_type_light"></div>

  <div class="sayit_title_wrapper col push-middle">
    <div class="sayit_post_category_cont">
      <a href="#">Germany</a>
      <span class="sayit_post_date">July 10, 2018</span>
    </div>

    <h1 class="sayit_post_title">Some text</h1>
  </div>
</div>

The jQuery code loaded in app.js file which is referred under scripts section of angular.json

This code works fine in index.html but when I move this into any component it doesn't work. FYI - if I use the above image path inside an img element it works so I don't think path reference is a problem.

The components are loaded using angular routing as following:

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
  },
  {
    path: 'about',
    loadChildren: () => import('./about/about.module').then(m => m.AboutModule)
  },
  {
    path: 'advertise',
    loadChildren: () => import('./advertise/advertise.module').then(m => m.AdvertiseModule)
  },
  {
    path: 'post',
    loadChildren: () => import('./post/post.module').then(m => m.PostModule)
  }
];

Even external image urls doesn't work, I suspect it's something to do with the routing but can't figure put what exactly is this.

I followed one articles and followed a proposed solution:

data-src="assets/imgs/clipart/standard_post/back-1.jpg" [attr.data]="data-src"

but that doesn't work either.

I'm confused what I'm doing wrong. Appreciate any help here.

TIA.

Upvotes: 1

Views: 2206

Answers (1)

Dash
Dash

Reputation: 834

I'll answer my question in case someone lands here with a similar situation.

The problem in my case was - for some strange reason the data-src attribute was not recognized by the "sayit_js_bg_image" css class on component load.

To overcome, I had to set the css property "background-image" explicitly inside the .ts file of that component.

<div class="sayit_title_container row sayit_js_height sayit_block_with_fimage" [attr.data-src]="assets/imgs/clipart/standard_post/back-1.jpg">
  //Other elements
</div>

Declared a css class named "sayit_title_container" to use in .ts file.

ngAfterViewInit() {
    $(".sayit_title_container").each(function () {
      $(this).css('background-image', 'url(' + $(this).attr('data-src') + ')');
    });
  }

Inside ngAfterViewInit set the background of the div to the image passed.

Hope someone finds it helpful!

Upvotes: 1

Related Questions