CODEWITHSUNDEEP
angularhtmltypescript
kauschan
kauschan

Reputation: 486

Input based on type in Html

I have the following piece of code :

<table class="details-table" *ngIf="animal && animaldata">
    <tr *ngFor="let attribute of animaldata.Attributes">
        <td class="details-property">{{ attribute.AttributeLabel }}</td>
        <td [ngSwitch]="attribute.AttributeType">
            <div *ngSwitchCase="'String'">
               <input *ngIf="attribute.IsWritable" matInput [(ngModel)] = "animal[attribute.AttributeKey]" />             
               <span *ngIf="!attribute.IsWritable && attribute.IsReadable">{{ animal[attribute.AttributeKey] }}</span>
            </div>
            <div *ngSwitchCase="'Boolean'">
              **{help needed}**
            <div *ngSwitchDefault>{{ animal[attribute.AttributeKey] }}
            </div>
        </td>
    </tr>
</table>

I want to display different input fields based on the type of the attibute (for ex: string, boolean, Integer for now) based on if its writable. I have an Idea for string but i want to do a dropdown for boolean . Also is it just plain text for Integer? . I tried a couple of examples i found online for drop down but i feel i am doing something wrong . Can anyone provide an idea of this can be achieved ?. Also can someone comment if this is the right approach of the code can be simplified ? . Any help is much appreciated .

Thank you

Upvotes: 0

Views: 51

Answers (1)

muasif80
muasif80

Reputation: 6006

You can easily set the dropdown like below

<div *ngSwitchCase="'Boolean'">
<select *ngIf="attribute.IsWritable" [(ngModel)]="yourProperty">
  <option (value)="1">Select One</option>
  <option (value)="2">Select Two</option>
</select>

<span *ngIf="!attribute.IsWritable && attribute.IsReadable">{{ 
       animal[attribute.AttributeKey] }}</span>

It seems like you are missing the closing div

Upvotes: 2

Related Questions