How to add html row dynamically with unique ID in table Angular4

Question

There is no limit for adding this row inside table you can use loop or anything to add row pragmatically. And remember that there is nested loop inside the row and user can also delete the whole row in one click.

This is my html.

<div class="fullWrap" style="margin-top: 20px;">
<h4 class="blue">Prescription</h4>
<table class="medicineInstGrid addPrescriptionGrid">
    <tr class="head">
        <th rowspan="2">Name Of Medicine</th>
        <th rowspan="2" width="50">Dose</th>
        <th rowspan="2" width="100">Dose Type</th>
        <th colspan="2">Breakfast</th>
        <th colspan="2">Lunch</th>
        <th colspan="2">Evening Snack</th>
        <th colspan="2">Dinner</th>
        <th rowspan="2" width="50">Days</th>
        <th rowspan="2">Comments</th>
    </tr>
    <tr class="head">
        <th>Before</th>
        <th>After</th>
        <th>Before</th>
        <th>After</th>
        <th>Before</th>
        <th>After</th>
        <th>Before</th>
        <th>After</th>
    </tr>
    <tr>
        <td>
            <div class="fullWrap medicineSearchWrap">   
                <input type="text" name="" required value="{{medSearchOnClickName}}" 
                    #searchMedBox (keyup)="getSearchMedInput(searchMedBox.value)" > 
                <div class="fullWrap" *ngIf="medicineSearchDropDown">
                    <div class="innerLoadingWrap" style="z-index:999;width: 400px" *ngIf="medSearchLoader">
                        <md-spinner strokeWidth="7"></md-spinner>
                    </div>
                    <ul class="fullWrap medicineSearchResult" >
                        <li *ngFor="let medList of searchMedicine" >
                            <div class="fullWrap" style="padding: 10px" (click)="getMedicineOnClick(medList.name, medList.form); medicineSearchDropDown=false">
                                <div class="fullWrap">
                                    <h4>
                                        {{medList.name}} (<div class="rupeeIcon"></div>{{medList.price}})</h4>
                                    <p>{{values}}</p>
                                </div>
                                <div class="fullWrap">
                                    <span class="pullLeft">{{medList.manufacturer}}</span>
                                    <span class="pullRight">
                                        <b>Constituents: </b> 
                                        <span *ngFor="let constituents of medList.constituents">
                                            {{constituents.name}} 
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </td>
        <td>
            <div class="fullWrap">
                <input type="text" name="" required>
            </div>
        </td>
        <td>
            <div class="fullWrap">
                <input type="text" value="{{medSearchOnClickDoseType}}" name="">
            </div>
        </td>
        <td>
            <div class="customCheckBox" style="margin-bottom:0">
                <input type="checkbox" name="" value="">
                <div class="check"></div>
            </div>
        </td>
        <td>
            <div class="customCheckBox" style="margin-bottom:0">
                <input type="checkbox" name="" value="">
                <div class="check"></div>
            </div>
        </td>

        <td>
            <div class="customCheckBox" style="margin-bottom:0">
                <input type="checkbox" name="" value="">
                <div class="check"></div>
            </div>
        </td>
        <td>
            <div class="customCheckBox" style="margin-bottom:0">
                <input type="checkbox" name="" value="">
                <div class="check"></div>
            </div>
        </td>

        <td>
            <div class="customCheckBox" style="margin-bottom:0">
                <input type="checkbox" name="" value="">
                <div class="check"></div>
            </div>
        </td>
        <td>
            <div class="customCheckBox" style="margin-bottom:0">
                <input type="checkbox" name="" value="">
                <div class="check"></div>
            </div>
        </td>

        <td>
            <div class="customCheckBox" style="margin-bottom:0">
                <input type="checkbox" name="" value="">
                <div class="check"></div>
            </div>
        </td>
        <td>
            <div class="customCheckBox" style="margin-bottom:0">
                <input type="checkbox" name="" value="">
                <div class="check"></div>
            </div>
        </td>
        <td>
            <div class="fullWrap">
                <input type="text" name="" required>
            </div>
        </td>
        <td>
            <div class="fullWrap">
                <input type="text" name="">
            </div>
        </td>
    </tr>

</table>

<div class="normalSection" style="padding: 0 5px">
    <div class="greyAddBtn">
        <h4 class="blue adddMore">+ Add More</h4>
    </div>
</div>

and i want to add this section inside table multiple times with unique id on click of Add more button.

    <tr>
        <td>
            <div class="fullWrap medicineSearchWrap">   
                <input type="text" name="" required value="{{medSearchOnClickName}}" 
                    #searchMedBox (keyup)="getSearchMedInput(searchMedBox.value)" > 
                <div class="fullWrap" *ngIf="medicineSearchDropDown">
                    <div class="innerLoadingWrap" style="z-index:999;width: 400px" *ngIf="medSearchLoader">
                        <md-spinner strokeWidth="7"></md-spinner>
                    </div>
                    <ul class="fullWrap medicineSearchResult" >
                        <li *ngFor="let medList of searchMedicine" >
                            <div class="fullWrap" style="padding: 10px" (click)="getMedicineOnClick(medList.name, medList.form); medicineSearchDropDown=false">
                                <div class="fullWrap">
                                    <h4>
                                        {{medList.name}} (<div class="rupeeIcon"></div>{{medList.price}})</h4>
                                    <p>{{values}}</p>
                                </div>
                                <div class="fullWrap">
                                    <span class="pullLeft">{{medList.manufacturer}}</span>
                                    <span class="pullRight">
                                        <b>Constituents: </b> 
                                        <span *ngFor="let constituents of medList.constituents">
                                            {{constituents.name}} 
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </td>
        <td>
            <div class="fullWrap">
                <input type="text" name="" required>
            </div>
        </td>
        <td>
            <div class="fullWrap">
                <input type="text" value="{{medSearchOnClickDoseType}}" name="">
            </div>
        </td>
        <td>
            <div class="customCheckBox" style="margin-bottom:0">
                <input type="checkbox" name="" value="">
                <div class="check"></div>
            </div>
        </td>
        <td>
            <div class="customCheckBox" style="margin-bottom:0">
                <input type="checkbox" name="" value="">
                <div class="check"></div>
            </div>
        </td>

        <td>
            <div class="customCheckBox" style="margin-bottom:0">
                <input type="checkbox" name="" value="">
                <div class="check"></div>
            </div>
        </td>
        <td>
            <div class="customCheckBox" style="margin-bottom:0">
                <input type="checkbox" name="" value="">
                <div class="check"></div>
            </div>
        </td>

        <td>
            <div class="customCheckBox" style="margin-bottom:0">
                <input type="checkbox" name="" value="">
                <div class="check"></div>
            </div>
        </td>
        <td>
            <div class="customCheckBox" style="margin-bottom:0">
                <input type="checkbox" name="" value="">
                <div class="check"></div>
            </div>
        </td>

        <td>
            <div class="customCheckBox" style="margin-bottom:0">
                <input type="checkbox" name="" value="">
                <div class="check"></div>
            </div>
        </td>
        <td>
            <div class="customCheckBox" style="margin-bottom:0">
                <input type="checkbox" name="" value="">
                <div class="check"></div>
            </div>
        </td>
        <td>
            <div class="fullWrap">
                <input type="text" name="" required>
            </div>
        </td>
        <td>
            <div class="fullWrap">
                <input type="text" name="">
            </div>
        </td>
    </tr>

Rajnish Rajput · Accepted Answer · 2017-08-31 03:30:24Z

1

First create a model of your row.

Then create a global variable as an array or if you have model then use your model as a type of your variable.

medicineAddList = Array<AddMedicineModel>() ; // your medicine model class

Then create a addMore method

    addMore() {
       var medData = new AddMedicineModel()   // creating object of your model class
       this.medicineAddList.push(medData) ;
}

In your HTML loop your row with your array

<tr *ngfor="let medObj in medicineAddList">

Add addMore method in your add more button

<h4 class="blue adddMore" (click)="addMore()"> Add More</h4>

Hope this will help you :)

answered Aug 31, 2017 at 3:30

Rajnish Rajput

5051 gold badge4 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

How to add html row dynamically with unique ID in table Angular4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related