user728630 user728630 - 1 year ago 128
Javascript Question

Define input type dynamically in HTML5 using Angular 2

Below code doesn't seem to be working. Is it even possible in Angular 2?

<table class="table table-responsive" style="border:0">
<tr *ngFor="#column of columns" style="height:20px;">
<td class="text-right" style="padding-top:10px;border:0">
<h4> {{column | case}}: </h4>
<td class="text-center" style="padding-top:10px;border:0">
<input type="{{column == 'created_date' ? date : text}}" class="form-control" />

Answer Source

You seems to have a typo for string fields. Change the code to this:

type="{{column == 'created_date' ? 'date' : 'text'}}"

Since the value of the type variable should be a string, you need to put quotes around them otherwise, they will be treated as a variable defined in the associated scope.

So the final output will be:

<input type="{{column == 'created_date' ? 'date' : 'text'}}" class="form-control" />
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download