Unable to bind data in angular 2

Question

I'm trying to bind countries data into my px-component which is a typeahead.

Codepen link here.

On binding the data directly in html the typeahead is suggesting the list of countries. But when I try the same by passing data from class its not binding.

var AppComponent = ng
  .Component({
    selector: 'my-app'
  })
  .View({
    template: `<div> 
<h3>Case 1 : Working dropdown:</h3>
<px-typeahead placeholder="Enter your search query" local-candidates='["Alabama","Alaska","American Samoa","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","District Of Columbia", "South Dakota","Tennessee","Texas","Utah","Vermont","Virgin Islands","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'></px-typeahead> 
<br>
<h3>Case 2 : Not working dropdown if data is bind from controller:</h3>
    <px-typeahead placeholder="Enter your search query" local-candidates={{countries}}></px-typeahead> 
{{countries}}
    </div>`
  })
  .Class({
    constructor: function() {      
       this.countries=["United States", "Antigua and/or Barbuda", "Argentina", "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan"]
    }
  });

Think the component px-typeahead is expecting the data in its attribute local-candidates to be an array with ''. I tried different ways of binding countries like {{countries}},"countries" etc.But didn't work.

What is <px-typeahead> ?? its your one of the component selector name ? — Chandru
– Chandru, Commented Sep 15, 2017 at 9:35

Petter Friberg · Accepted Answer · 2017-09-15 09:38:11Z

1

The correct syntax (for two-way data binding) is [local-candidates]="countries", which will work in your CodePen.

edited Sep 15, 2017 at 9:38

Petter Friberg

21.8k10 gold badges67 silver badges116 bronze badges

answered Sep 15, 2017 at 9:24

malifa

8,1552 gold badges44 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ramesh Rajendran Over a year ago

Did you read I tried different ways of binding countries like {{countries}},"countries" etc but didn't work. from the OP question? So you should clarify with OP in comment before answering.

malifa Over a year ago

Ehm why? Yea of course i read it and both ways he mention don't work with two-way data-binding. What am i discussing here iwth you? Comments are for dicussing the question, not for answering. if the answer would have been off-topic (for example if the OP asks something but the answer would be a different topic) then i would understand your concerns, but its just a plain simple answer to a simple question.

Collectives™ on Stack Overflow

Unable to bind data in angular 2

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related