Angular lightbox: Can't bind to 'data-lightbox' since it isn't a known property of 'a'

Question

I read Angular. It says if you want to bind a property it should be wrapped with []. So here what I did, But I am getting error. Any idea what am I doing wrong?

My requirement is to have the value of data-lightbox is what I am setting/sending from another component(parent component)

image-display.component.ts

@Component({
    selector: 'app-image-display',
    templateUrl: './image-display.component.html',
    styleUrls: ['./image.component.css']
  })
  export class ImageDisplayComponent implements OnInit {
    @ViewChild('inspImage') image: ElementRef
    @Input() inspection: LineSideInspection
    inpsectionId: number;
    santizer: DomSanitizer

    constructor(private imageService: ImageDisplayService, private sanitizer: DomSanitizer) {}

    ngOnInit() {
      this.getMyImage('/getimage/' + this.inspection.id );
        this.inpsectionId = this.inspection.id;
    }
}

image-display.component.html

<a [href]="sanitize(inspImage.src)" [data-lightbox]="inspectionId" data-title="inspect.inspectionDescription"> 
    <img #inspImage width="110px" height="95px">
</a>

package.json:

"lightbox2": "^2.10.0",

I have explained and put all code and given so much details, still I got Downvote. Now I am not able to ask any question. Please Upvote or let me know how I can improve to get upvote... — SK., Oct 24 '18 at 15:21

score 0 · Answer 1 · answered May 18 '18 at 12:56

0

Try using -

<a [href]="sanitize(inspImage.src)" [attr.data-lightbox]="inspectionId" data-title="inspect.inspectionDescription"> 
    <img #inspImage width="110px" height="95px">
</a>

answered May 18 '18 at 12:56

Pardeep Jain

84,110
37
165
215

No error, but the lightbox doesn't work. If I see the generated html it doesn't have data-lightbox attribute. Itshows like this: – SK. May 18 '18 at 13:00
I found a way of doing it. Below is my answer. just fyi. Thanks though for you time to help me. – SK. Jul 20 '18 at 18:27
1

I have explained and put all code and given so much details, still I got Downvote. Now I am not able to ask any question. Can you please Upvote the question or let me know how I can improve to get upvote... – SK. Oct 24 '18 at 15:22

score 0 · Accepted Answer · answered Jul 20 '18 at 18:27

I found a way of showing title in the lightbox. Here is what I did:

In component.ts, I declared a string variable and assigned value in init method, then in html, I put that variable inside double brackets.

html:

<a [href]="sanitize(inspImage.src)" [data-lightbox]="inspectionId" data-title="{{inspectionName}}">

TS:

public inspectionName: string;

ngOnInit(){
    this.inspectionName = this.inspection.inspectionName;
}

Angular lightbox: Can't bind to 'data-lightbox' since it isn't a known property of 'a'

2 Answers2

Linked