CODEWITHSUNDEEP
htmlangularangular4-forms
Akhil
Akhil

Reputation: 381

Display data in text box, in angular 4 dynamically

I want to show textbox dynamically when searching an item. The data should be displayed inside the text box. How ever my output only shows the item below the text box.

(I am a fresher if any problem in my question please pardon me)

Like Below image

enter image description hereenter image description here

here is my Html code

<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">

        <div class="form-group">
            <label>Item Code</label>

                <input type="text" class="form-control" placeholder="Item Code" required=""/> 
            <ng-container *ngFor="let item of itemdetails;">{{item.ItemCode}}</ng-container>                                                              
        </div>

    </div>
</div>

Upvotes: 0

Views: 15225

Answers (4)

nash11
nash11

Reputation: 8650

You can set the value to your input using the value attribute.

<ng-container *ngFor="let item of itemdetails;">
  <input type="text" class="form-control" placeholder="Item Code" [value]="item.ItemCode" required/>
</ng-container>

This will give you a one-way binding for the value (changes in template will not reflect in component).

If you want to bind the values to the component via two-way binding, I suggest you read up on Template driven forms (ngModel) and Reactive forms (formControl)

Here is a working example on StackBlitz showing all 3 ways.

Upvotes: 0

Okere Chukwudi
Okere Chukwudi

Reputation: 191

You could use template driven form or reactive form to achieve this. For template driven form, i just wrote a working code on stackbliz you can open it and check it out. DEMO: https://stackblitz.com/edit/angular-yaiuxn

Upvotes: 0

Shinjo
Shinjo

Reputation: 695

You can try using [(ngModel)] to bind the data.

<div class="form-group">
    <label>Item Code</label>
    <ng-container *ngFor="let item of itemdetails;">
        <input type="text" class="form-control" placeholder="Item Code" required="" [(ngModel)]="item.ItemCode" />
    </ng-container>
</div>

Upvotes: 1

Chanaka Weerasinghe
Chanaka Weerasinghe

Reputation: 5742

Here is working

Example 

<div class="container">
  <div class="row">
    <div class="search-hero">
      <input class="form-control" type="text" name="search" [(ngModel)]="searchText" autocomplete="off" placeholder="&#61442;  Start searching for a hero by id or name or country">
    </div>
      <li *ngFor="let hero of data | filter:searchText" > 
        {{hero.name}}
      </li>
  </div>

.ts

searchText;
  data = [
    { id: 11, name: 'CHanaka Nice', country: 'India' },
    { id: 12, name: 'MNarco' , country: 'USA'},

  ];

Upvotes: 0

Related Questions