Property Binding as function parameter in Html template of Angular 7

Question

I have an issue in html template. I want to call a function and pass a param to function. This param is a property in component class. How could I bind this property in function call. I have tried different options but could not get success.

1.

<input type="button" class='Button' value='Back' 
(click)="showGrid('{{"./app/setup/" + url}}')" />

2.

<input type="button" class='Button' value='Back' 
(click)="showGrid('./app/setup/ + {{url}}')" />

Using Getter in component.

get myUrl = function(){ return "./app/setup/" + ${this.Url} }

In html,

<input type="button" class='Button' value='Back' 
(click)="showGrid('{{myUrl}}')" />

How could I bind the property in function call. Please suggest.

Thanks,

If I remove it, it is taken as string in param. – TAB Jan 16 '19 at 06:17 — TAB, Jan 16 '19 at 06:17
in which format you want your param? – Abhishek Jan 16 '19 at 06:25 — Abhishek, Jan 16 '19 at 06:25

score 3 · Answer 1 · answered Jan 16 '19 at 06:16

3

Try this -

<input type="button" class='Button' value='Back' 
(click)="showGrid('./app/setup/' + url)" />

answered Jan 16 '19 at 06:16

M3ghana

1,231
1
9
19

score 1 · Accepted Answer · answered Jan 16 '19 at 06:27

1

Its always a good idea to have these literals as const. Never hardcode these values in view (html).

Use below approach.

app.component.ts

import {Component} from '@angular/core';

@Component({
    selector: 'app',
    templateUrl: 'app.component.html'
})
export class AppComponent {

    appUrls = APP_URLS;

    constructor() { }

    showGrid(url) {
        // to-do
    }
}

export const APP_URLS = {
    'BASEURL': '/something',
    'URL1': `./app/setup/${this.BASEURL}`,
};

app.component.html

<input type="button" class='Button' value='Back' (click)="showGrid(appUrls.URL1)" />

answered Jan 16 '19 at 06:27

Pankaj Prakash

2,300
30
31

In this case, `./app/setup/${this.BASEURL}` ${this.BASEURL} is not being resolved and due to this router path not resolved issue occured. – TAB Jan 16 '19 at 08:30
Put `APP_URLS` in some other file not in the component that gets resolved dynamically. – Pankaj Prakash Jan 16 '19 at 10:38
I am using a separate file for APP_URLS. export const AppLinks = { BASE_API_URL : 'http://localhost:8080', BASE_APP_URL : './api', MENU_URL: '/main/menu', SETUP_BASE : '${BASE_APP_URL}/setup', OPERATION_BASE : '${this.BASE_APP_URL}/operation', } – TAB Jan 18 '19 at 10:22
'${BASE_APP_URL}/Setup' is being used as it is. – TAB Jan 18 '19 at 10:23

score 0 · Answer 3 · answered Jan 16 '19 at 06:20

Try this

<input type="button" class='Button' value='Back' 
(click)="showGrid('./app/setup/' + url)" />

Or you can append ./app/setup/ in showGrid function as follows

HTML code

<input type="button" class='Button' value='Back' (click)="showGrid(url)" />

TS Code

showGrid(urlData){
  urlData = './app/setup/' + urlData;
}

Property Binding as function parameter in Html template of Angular 7

3 Answers3