Angular - How to reference class variables in a component template?

1
votes

I'm quite new to Angular, so please forgive me if I use some wrong/weird terms in my question.

I have this Angular component that calculates two different urls, based on user's inputs. Now, I would like to inject the calculated urls in the associated angular component, so that the final HTML would produce a div with the following behavior: - Loads with a static image (referenced by url2) in the background; - When clicked, an iframe (referencing url1) would be dynamically added as a child element of the main div

See corresponding TypeScript code below (simplified to make it easier to read):

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { Store } from '@ngrx/store';

@Component({
    selector: 'my-component-selector',
    template: `
        <table  width="100%">
            <tr>
                <td>
                    <div class="ng-scope embed-responsive embed-responsive-16by9">
                        <div class="embed-responsive-item" onclick="$('<iframe>',{src:'URL1 PLACEHOLDER',style:'border:0;width:100%;height:100%;',frameborder:0,allowfullscreen:true,scrolling:'no'}).appendTo(this);" style="background-image:url('URL2 PLACEHOLDER');background-size:contain;background-position:center center;background-repeat:no-repeat;cursor:pointer;"></div>
                    </div>
                </td>
            </tr>
        </table>
    `
})

export class MyComponent implements OnInit{

    url1;
    url2;

    constructor(private store: Store<State>, private sanitizer: DomSanitizer) {
        this.url1 = 'https://my.url.com/remote?param1=10&param2=20';
        this.url2 = 'https://my.url.com/remote?param1=30&param2=40';
    }

    ngOnInit() {
        this.url1 = 'https://my.url.com/remote?param1=10&param2=20';
        this.url2 = 'https://my.url.com/remote?param1=30&param2=40';
    }
}

Everything works fine if I write the two urls directly in the Angular component code (see URL1 PLACEHOLDER and URL2 PLACEHOLDER). However, what I am struggling with is trying to use the contents of the class variables "url1" and "url2" in the corresponding placeholders.

I tried using "this.url1" and "this.url2", {{url1}} and {{url2}}, {{this.url1}} and {{this.url2}} and a few other options, including biding the variable content using something like "[src]" in the iframe code, but all of them end up in an error or the variable name itself being added to the resulting HTML code.

Could someone please tell me how to make that reference?

Thanks in advance!

1
jqueryangularcomponents

1 Answers

0
votes

Instead of achieving this in jquery way. You can easily be done in Angular Way using ngIf to load iframe when we click image.

https://stackblitz.com/edit/angular-2b4oqr