4

In angular 2, it possible to set values within the html view of a component like this? It's already rendered in PHP:

//html page:
<dropdown [(options)]="['Available', 'Busy', 'Away', 'Offline']"></dropdown>

I have never seen this done anywhere online, so I assume it can't be done. But is there a workaround? For example if I had 100 dropdown components on the page with their own options model, I'd potentially have to make 100 requests to the server if doing it the angular way. Thoughts?

Simon
  • 2,484
  • 6
  • 35
  • 54

1 Answers1

2
 //html page:
 <dropdown [options]="['Available', 'Busy', 'Away', 'Offline']"></dropdown>

  • This template is perfectly OK for angular, as long as you use it for one-way binding using [prop]="expression" or prop="{{expression}}",

    WORKING PLUNKER

  • because the moment you try to do two-way binding [(prop)]="expression" over an Array Value it will fail, that's because expression must be a component property to do two-way binding.

    It will throw a Teplate parse error, to be precise.

    BROKEN PLUNKER

Mark Rajcok
  • 362,217
  • 114
  • 495
  • 492
Ankit Singh
  • 24,525
  • 11
  • 66
  • 89
  • Wonderfully explained answer. Thank you for taking the time to answer my question. – Simon May 21 '16 at 10:17
  • here is a similar issue for setting values on root elements which is worth referencing: https://github.com/angular/angular/issues/1858. Basically this question is going against best practice. – Simon May 24 '16 at 02:16
  • Getting the attributes from html: http://stackoverflow.com/questions/33326376/angular-2-component-input-not-working/33329647#33329647 – Simon May 24 '16 at 02:17