Trying to bind string with data-* in angular 4

Question

Trying to implement slider in angular 4.

The following is slider.component.ts

import { Component, OnInit } from '@angular/core';
import { HomeService } from './../services/banner/home.service';
import { apiUrl } from './../services/global.constant';
@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})
export class SliderComponent implements OnInit {

  constructor(private service: HomeService) { }
  slider: any[];
  url=apiUrl;
  ngOnInit() {
  	this.service.getBanners()
      .subscribe(slider => {
      	if(slider.success==1)
      		this.slider = slider.data;
      	else
      		alert("Image fetcher was not able to get any slider images.");
      	  console.log(this.slider)} 
       );
    
  }

}

Following is slider.component.html

 <div class="rev_slider_wrapper fullwidthbanner-container">
    <div id="homepage-slider" class="rev_slider" data-version="5.0">
         <ul>
                                    <!-- SLIDE 1-->
            <li *ngFor="let image of slider" data-title="Slide 1" data-index="slide-1" data-thumb="{{url}}{{image.image}}">
                                        <!-- MAIN IMAGE -->
                <img src="{{url}}{{image.image}}" alt="Slide 1" data-bgposition="center top" data-kenburns="on" data-duration="7000" data-scalestart="100" data-scaleend="110" data-offsetstart="-50 100" data-offsetend="100 -150" data-bgfit="105" data-bgfitend="100" data-bgpositionend="center bottom">
                                        <!-- LAYERS -->
                                        <!-- LAYER NR. 1 -->
                <div class="tp-caption tp-resizeme mdl-typography--display-3 mdl-typography--font-thin oxy-color-light" data-x="left" data-hoffset="500" data-y="top" data-voffset="250" data-transform_in="o:0;e:Power4.easeIn;" data-transform_idle="o:1;s:1000;" data-transform_out="o:0;s:500;e:Power4.easeOut;" data-start="1000"> THIS IS FAB! </div>
                                        <!-- LAYER NR. 2 -->
                <div class="tp-caption tp-resizeme" data-x="left" data-y="top" data-hoffset="500" data-voffset="335" data-start="1500" data-transform_in="o:0;e:Power1.easeIn;" data-transform_idle="o:1;s:500;" data-transform_out="o:0;s:500;e:Power4.easeOut;" style="height: 1px; width: 200px;background: #fff;"> </div>
                                        <!-- LAYER NR. 3 -->
                <div class="tp-caption tp-resizeme mdl-typography--title mdl-typography--font-light oxy-color-light" data-x="left" data-y="top" data-hoffset="500" data-voffset="360" data-start="2000" data-transform_in="o:0;e:Power4.easeIn;" data-transform_idle="o:1;s:600;" data-transform_out="o:0;s:600;e:Power1.easeOut;">
                
                    <p style="font-size: 21px; line-height: 1.5"> All the latest trends and labels are available.<br> Get ready for Autumn with our latest range of stylish clothing.<br>
                    <strong>Free Delivery</strong> on all items over $50<br> </p>
                </div>
                                        <!-- LAYER NR. 4 -->
                <div class="tp-caption tp-resizeme tp-caption-mdl-button mdl-button mdl-button--raised mdl-button--colored" data-x="left" data-y="top" data-hoffset="500" data-voffset="480" data-start="3000" data-transform_in="o:0;y:100;" data-transform_idle="x:0;o:1;s:600;" data-transform_out="o:0;s:800;e:Power1.easeOut;">
                <a href="#" style="color: #fff;">Shop Womens</a>
            </div>
            </li>
                                    <!-- SLIDE 2-->
                                   
            </ul>
        </div>
     </div>

It throws template parse error for the data-thumb attribute.

Data-thumb attribute comes with the theme to implement the slider. The following error snippet is thrown at the console.

Uncaught Error: Template parse errors:
Can't bind to 'thumb' since it isn't a known property of 'li'. ("- SLIDE 1-->
            <li *ngFor="let image of slider" data-title="Slide 1" data-index="slide-1" [ERROR ->]data-thumb="{{url}}{{image.image}}">
                                        <!-- MAIN IMAGE -->
    "): ng:///AppModule/SliderComponent.html@4:87
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24668)
    at JitCompiler._parseTemplate (compiler.js:34621)
    at JitCompiler._compileTemplate (compiler.js:34596)
    at eval (compiler.js:34497)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34497)
    at eval (compiler.js:34367)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34366)

Following is json array fetched using the service.

0: {id: 3, title: "Banner-3", url: "23", image: "resources/assets/images/banner_images/1502370366.banner_3.jpg", type: "category"} 1: {id: 4, title: "Banner-4", url: "17", image: "resources/assets/images/banner_images/1502370387.banner_4.jpg", type: "category"} 2: {id: 5, title: "Banner-5", url: "19", image: "resources/assets/images/banner_images/1502370406.banner_5.jpg", type: "category"}length: 3__proto__: Array(0)

Answer 1

Angular by default does property binding. If there is no such property, you'll get an error.

Use instead explicit attribute binding

attr.data-thumb="{{url}}{{image.image}}"

or

[attr.data-thumb]="url + image.image"