Implementing delete row utility in a html page in Angular 4 Application

Issue

I am trying to delete a row in an Angular application in a HTML page. Though just now the values on the HTML page are not coming from any back end application.

I have written a clear function which clears or resets the dropdown value. But now I want to delete the whole row. Like the content as well as the drop down box.

<form name="myForm" (ngSubmit)="onSubmit()">

<h1>Provider Network Setup</h1>
<h2>Network Association</h2>
<table align=center width=900>
    <tr>
        <th>NETWORK LEVEL</th>
        <th>TYPE</th>
        <th>PROFESSIONAL NETWORK SET</th>
        <th>FACILITY NETWORK SET </th>
    </tr>
    <tr>
        <!--th>LEVEL Name 1<br>level 1<br> <button (click)="myForm.resetFields();">clear</button> &nbsp; <a href="">Delete</a></th-->
        <!--th>LEVEL Name 1<br>level 1<br> <button (click)="onSubmit();">clear</button> &nbsp; <a href="">Delete</a></th-->
        <th>LEVEL Name 1
            <br>level 1
            <br>
            <button class="btn btn-primary btn-large center" type="button" (click)="clearFirstRow(model1, model2)">Clear</button> &nbsp;
            <a href="">Delete</a>
        </th>
        <th>IN Network</th>
        <th>
            <select name="x1" [(ngModel)]="model1">                    
                <option value="Standard Network">Standard Network</option>
                <option value="No Network Restrictions">No Network Restrictions</option>
                <option value="Not Covered">Not Covered</option>
                <option value="Alternative Network">Alternative Network</option>
                <option value="plan Specific Network">plan Specific Network</option>
            </select>
            <br>
            <a href="">networkset 1</a>
        </th>
        <th>
            <select name="x2" [(ngModel)]="model2">
                <option value="Standard Network">Standard Network</option>
                <option value="No Network Restrictions">No Network Restrictions</option>
                <option value="Not Covered">Not Covered</option>
                <option value="Alternative Network">Alternative Network</option>
                <option value="plan Specific Network">plan Specific Network</option>
            </select>
            <br>
            <p>networkset 2</p>
        </th>

    </tr>

    <tr>
        <th>LEVEL Name 2
            <br>level 2
            <br>
            <button class="btn btn-primary btn-large center" type="button" (click)="clearSecondRow(model21, model22)">Clear</button> &nbsp;
            <a href="">Delete</a>
        </th>
        <th>IN Network</th>
        <th>
            <select name="y1" [(ngModel)]="model21">
                <option value="Standard Network">Standard Network</option>
                <option value="No Network Restrictions" selected>No Network Restrictions</option>
                <option value="Not Covered">Not Covered</option>
                <option value="Alternative Network">Alternative Network</option>
                <option value="Plan Specific Network">plan Specific Network</option>
            </select>
            <br>
            <p>networkset 1</p>
        </th>
        <th>
            <select name="y2" [(ngModel)]="model22">
                <option value="Standard Network">Standard Network</option>
                <option value="No Network Restrictions">No Network Restrictions</option>
                <option value="Not Covered">Not Covered</option>
                <option value="Alternative Network">Alternative Network</option>
                <option value="Plan Specific Network" selected>plan Specific Network</option>
            </select>
            <br>
            <p>networkset 2</p>
        </th>

    </tr>
 </form>

Can someone please guide me in writing delete function to delete a row in HTML page in Angular 4.0 application. TIA

Solution

I would suggest that you add your row objects to an array (I’m making the assumption here that you want to delete the entire row that is containing both drop downs, if this is not the case, the principle can still be applied)

For example

this.rows = [{
    'heading': 'LEVEL Name 1',
    'networkSet1': 'Standard Network',
    'networkSet2': 'Standard Network'
}, {
    'heading': 'LEVEL Name 2',
    'networkSet1': 'Standard Network',
    'networkSet2': 'Standard Network'
}];

Then you build up your HTML using a ngFor

<tr *ngFor="let row of rows">
    <th>
        <br>{{row.heading}}
        <br>
        <button class="btn btn-primary btn-large center" type="button" (click)="clearFirstRow(row.networkSet1, row.networkSet2)">Clear</button> &nbsp;
        <a href="">Delete</a>
    </th>
    <th>IN Network</th>
    <th>
        <select name="x1" [(ngModel)]="row.networkSet1">                    
            <option value="Standard Network">Standard Network</option>
            <option value="No Network Restrictions">No Network Restrictions</option>
            <option value="Not Covered">Not Covered</option>
            <option value="Alternative Network">Alternative Network</option>
            <option value="plan Specific Network">plan Specific Network</option>
        </select>
        <br>
        <a href="">networkset 1</a>
    </th>
    <th>
        <select name="x2" [(ngModel)]="row.networkSet2">
            <option value="Standard Network">Standard Network</option>
            <option value="No Network Restrictions">No Network Restrictions</option>
            <option value="Not Covered">Not Covered</option>
            <option value="Alternative Network">Alternative Network</option>
            <option value="plan Specific Network">plan Specific Network</option>
        </select>
        <br>
        <p>networkset 2</p>
    </th>
</tr>

Now you can delete an entire row by removing it from the array and passing the index from your HTML using $index

deleteRow(index): void{
    this.rows.splice(index,1);
}

Answered By – Andre Lombaard

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.