Selection Bar

JamSelectionBar

import { JamSelectionBarModule } from 'ngx-jsonapi-material';

SelectionBarConfig

Configuration for opening a modal selection bar with the SelectionBar service.

Properties

Name	Value type	Required	Description
selection	SelectionModel<any>	true
label	string	false

Selector: jam-selection-bar-container

This component will render the content of the selection bar.

<jam-selection-bar-container></jam-selection-bar-container>

This component makes use of the form of selection of angular material, so for it make sure to have in the code of the parent component, that is to say from where it will be called the selection bar, the code that of selection of material.

Parent component .html

You must have something like the following

<table>
    <thead>
        <tr>
           <th>
               <mat-checkbox
                   name="master"
                   (change)="callCheckboxEvents($event)"
                   [checked]="selection.hasValue() && isAllSelected()"
                   [indeterminate]="selection.hasValue() && !isAllSelected()"
                ></mat-checkbox>
           </th>
           <th>...</th>
           <th>...</th>
        </tr>
    <thead>
    <tr *ngFor="let book of books.data">
        <td>
            <mat-checkbox
                (dblclick)="$event.stopPropagation()"
                (change)="callCheckboxEvents($event, book)"
                [checked]="selection.isSelected(book)"
            ></mat-checkbox>
        </td>
        <td>...</td>
        <td>...</td>
    </tr>
<table>

Parent component .ts

You must have something like the following

{
    // more code...

    public callCheckboxEvents(event, row?): void {
        if (event.checked) this.openSelection();
        if (event && row) {
            this.selection.toggle(row);
        } else if (event) {
            this.masterToggle();
        }
        this.selectionBarService.selected(this.selection);
    }

    /** Selects all rows if they are not all selected; otherwise clear selection. */
    public masterToggle(): void {
        if (this.isAllSelected()) {
            this.selection.clear();
        } else {
            this.books.data.forEach(row => {
                this.selection.select(row);
            });
        }
    }

    /** Checks if the number of selected rows matches the total number of rows */
    public isAllSelected(): boolean {
        const numSelected = this.selection.selected.length;
        const numRows = this.books.data.length;

        return numSelected === numRows;
    }

    // more code...
}

Simple selection bar

Siguiendo en tu componente padre debes iniciar tu barra de seleccion.

{
    // code...

    public openSelection() {
        let selection_Bar_config = this.selection_bar_config;
        selection_Bar_config .selection = this.selection;
        this.selectionBarService.init(BooksSelectionBarComponent, selection_Bar_config , {});
    }
}