External HTML Template interpolation

Question

I'm new to Angular 2.0 and angular in general. I've been digging around for a few days now on this problem, and I can't seem to find a word about it anywhere. I have a component that calls an external HTML in the TemplateURL as follows:

@Component({
  selector: 'Form-template',
  templateUrl: "app/components/HTMLReferences/CommentsForm.html",
  styleUrls: ["app/components/CSSReferences/CommentForm.css"]
  })

Nothing crazy here.

Now in my template I need to load an object variable, "frequencies", to populate the drop down box. The code inside the external HTML template is as follows:

 <div class="dropdown">
    <select id="frequency"
            class="form-control"
            #frequency="ngModel"
            ngModel
            required>
      <option value=""></option>
      <option *ngFor="let frequency of frequencies" value="{{ frequency.id }}">
        {{frequency.label}}
      </option>
    </select>
  </div>

again, nothing special. The object is in the component's export class as follows:

export class FormTemplateComponent  {
  frequencies = [
    { id: 1, label: 'Daily' },
    { id: 2, label: 'Weekly' },
    { id: 3, label: 'Monthly' }
  ];
}

When I load the page nothing appears in the drop down box. Here's a screen shot:

My FromTemplateComponent is also available in the NGModules file under declarations.

I have to be missing something incredibly silly in all this, but I just can't seem to figure it out. Thoughts?

Aravind · Accepted Answer · 2017-02-28 03:48:30Z

1

You should be using property binding as below

<div class="dropdown">
    <select id="frequency"
            class="form-control"
            [(ngModel)]="frequency"
            required>
      <option value=""></option>
      <option *ngFor="let frequency of frequencies" [value]="frequency.id">
        {{frequency.label}}
      </option>
    </select>

You can log and check using (change) event in your select statement as

<select id="frequency" (change)="changed(frequency)">
....

which is available in the below demo plunker

LIVE DEMO

answered Feb 28, 2017 at 3:48

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

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

5 Comments

Tom L'esperance Over a year ago

This does not appear to solve the issue. I can make this work when I declare everything inside of the same file. The problem comes in from using the TemplateURL: attribute on the @component decorator. As soon as I point to the external file, everything breaks. It's almost like the frequencies object in the export class isn't being sent to the my external HTML file.

Tom L'esperance Over a year ago

found the problem! sneaky sneaky. I forgot to set name ="frequencies". Original code works. I'm just a ditz. Could kick myself in the shin. Thank you for the help. I think I need to try the rubber duck debug next time.

Aravind Over a year ago

Oopssss guess no one would make such a mistake. So my answer turns useless?

Tom L'esperance Over a year ago

not useless. It got the gears spinning in a new direction. Seeing the error messages I got against the new error messages clicked on the lights. Thanks so much!

Aravind Over a year ago

Cool then happy coding :)

Tom L'esperance · Accepted Answer · 2017-02-28 04:51:39Z

1

Always remember children: when using ngModel, make sure you set the name correctly.

answered Feb 28, 2017 at 4:51

Tom L'esperance

7941 gold badge6 silver badges19 bronze badges

Collectives™ on Stack Overflow

External HTML Template interpolation

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related