(AngularJS) Routing with Dynamic Parameters

In the department.component.html view, I input a checkboxes per row, so users can select which department they would like to delete.

<tr *ngFor="let department of departments ;trackBy: trackId">
               <td>

                    <input type="checkbox"
                           (change)="getSelectedDepartmentID(department)"
                           [checked]="department.checked"
                           id="checkbox_"
                     />

                </td>
</tr>

<!-- this is the delete button -->
    <div class="row">
        <div class="col-sm-4">
        <button type="button"
                (click)="deleteSelectedDepartments()"
                replaceUrl="true"
                class="btn btn-danger btn-sm">
            <span class="hidden-md-down" jhiTranslate="entity.action.delete">Delete Department</span>
        </button>
        </div>
    </div>

In the department.component.ts view

The getSelectedDepartmentID function aims to retrieve the department ID that the user has chosen to delete.

The deleteSelectedDepartment aims to call a popup component to get confirmation from the users.

 getSelectedDepartmentID(department:any) {

    var department_id: number;
    department_id = department.id;


    if(this.selectedDepartment == null || !this.selectedDepartment.hasOwnProperty(department_id)) {
        this.selectedDepartment[department_id] = true;
    } else if(this.selectedDepartment.hasOwnProperty(department_id)) {
        if(this.selectedDepartment[department_id]) {
            this.selectedDepartment[department_id] = false;
        } else {
            this.selectedDepartment[department_id] = true;
        }
    }  //if else

}

deleteSelectedDepartments() {

    for(var key in this.selectedDepartment) {
        var value = this.selectedDepartment[key];
        if(value) {

            this.router.navigate(['department-checkbox-delete'], { queryParams: this.selectedDepartment});

        }
    }

}

The problem lies in the “this.router.navigate” portion. As selectedDepartment consists of a key-value pair, I do not know how to add it to the router.navigate method, or rather the route.ts file.

I’m not super proficient in angularjs, just started out.

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/10/17/angularjs-routing-with-dynamic-parameters/
via @lzomedia #developer #freelance #web #lzomedia.com