CODEWITHSUNDEEP
angular
Edwill
Edwill

Reputation: 23

Input property not binding on attribute selector

Good day,

I have the following Angular2 component:

import {Component, Input} from 'angular2/core';
import {NameValue} from '../models/namevalue';
import {CrmService} from '../services/crmservice';

@Component({
    selector: '[crmlookup]',
    templateUrl: '/app/directives/rendernamevalue.html'
})

export class CrmLookupComponent {
    @Input() fieldname: string;
    public values;

    constructor(public _crmService: CrmService) {
    }

    ngOnInit() {
        this._crmService.get(this.fieldname).subscribe(res => this.values = res);
    }
}

My HTML looks as follows:

<select crmlookup [fieldname]="new_department"></select>

It binds fine, but the fieldname internal input field is never initialized with the string value I specify in the markup.

Note that new_department must be a string value, it's not a property in the parent component. I've also tried specifying it as [fieldname]="'new_department'" which also doesn't work. The value is undefined in the constructor as well as the ngOnInit event.

Upvotes: 2

Views: 4389

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202296

If you want to provide a string literal value for the fieldname input, you could try this:

<select crmlookup [fieldname]="'new_department'"></select>

or 

<select crmlookup fieldname="new_department"></select>

Using [fieldname] will evaluate an expression based on elements of the component associated with the template.

Hope it helps you, Thierry

Upvotes: 3

Related Questions