ngx datatable выбор флажков по умолчанию

Question

Используется ngx-datatable с checkboxable=true. Который отображается правильно, но теперь я хочу, чтобы все флажки были установлены по умолчанию при загрузке моего компонента. Вот реализация с данными -

<us-data-table [dataTableConfig]="userTableConfig" [data]="getData()"  (activate)="onActivate($event)"  [selected]="selected" (onSelection)='userSelected($event)'>
    <us-data-table-column name="Product Type">
        <ng-template let-rowIndex="rowIndex" let-row="row" let-value="value" us-data-table-column-cell>
            <div>{{row.row.userProdType}}</div>
        </ng-template>
    </us-data-table-column>
    <us-data-table-column name="User Name">
        <ng-template let-rowIndex="rowIndex" let-row="row" let-value="value" us-data-table-column-cell>
            <div>
                <input type="text" [(ngModel)]="row.row.userName" class="row
                        baseline-edit icon-image-preview" length="255" style="width:95%;margin-right:0px !important;">
                <i class="material-icons pull-right
                        icon_position">mode_edit</i>
            </div>
        </ng-template>
    </us-data-table-column>
    <us-data-table-column name="Start Date">
        <ng-template let-rowIndex="rowIndex" let-row="row" let-value="value" us-data-table-column-cell>                        
            <div class="row">
                <ejs-datepicker id='datepicker' class="usr_start_date" placeholder='Select a date' [value]="row.row.userStartDate" ></ejs-datepicker> <!-- [min]='minDate' [max]='maxDate' -->
                <div class="input-field col s12">
                        <span class="character-counter" style="float: right; font-size: 12px; height: 1px;"></span>
                </div>
            </div>
        </ng-template>
    </us-data-table-column>
</us-data-table>

Вся конфигурация с данными, вызываемая из конфигурации, как -

export class demoUserConfig {
    public configs: any = {
        TABLE: {
            USER_TABLE: {
                headerCheckboxable: true,
                selectionType: "checkbox",
                checkboxable: true,
                columns: [
                    {
                        name: "User Type",
                        headerClass: "",
                        cellClass: "",
                        columnType: "string",
                        columnKey: "userProdType",
                        columnOrder: 1,
                        isDefault: true,
                        isCustom: true
                    },
                    {
                        name: "User Name",
                        headerClass: "",
                        cellClass: "",
                        columnType: "string",
                        columnKey: "userName",
                        columnOrder: 2,
                        isDefault: true,
                        isCustom: true
                    },
                    {
                        name: "Start Date",
                        headerClass: "",
                        cellClass: "",
                        columnType: "date",
                        columnKey: "userStartDate",
                        columnOrder: 3,
                        isDefault: true,
                        isCustom: true
                    }
                ]
            }
        }
    };
}

Пробовал с 3 подходами сделать флажки по умолчанию:

Подход 1: Погуглил его, чтобы найти какое-либо свойство, чтобы сделать флажки выбранными по умолчанию, нашел 2-3 свойства вроде - [selectAllRowsOnPage]="true" и [allRowsSelected]="allRowsSelected". Когда я применяю это к <us-data-table>, кажется, что оба больше не работают.

Подход 2: Затем я попытался установить эти флажки с помощью основного javascript. В getData() методе в ts файле вроде -

var inputs = document.getElementsByTagName('input');
for(var i=0; i<inputs.length; i++)
{
        if(inputs[i].getAttribute('type')=='checkbox')
        {
                inputs[i].checked = true;
        }
}

, который работает нормально. Все флажки установлены по умолчанию. Но тогда это приводит к другой проблеме. Когда вы нажимаете на любой флажок, чтобы отменить выбор, он ничего не делает. Это остается выбранным. Но когда вы нажимаете в следующий раз, он снимает этот флажок. В первый раз ни один из флажков не выполняет никаких действий, но во второй раз, когда щелчок начинает работать.

Подход 3: Затем снова попытался установить этот флажок по умолчанию, добавив новый пользовательский флажок вместо того, чтобы сделать checkboxable = true. Добавлен новый столбец в конфигурации и в html-файле -

<us-data-table-column name="Product Check">
    <ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected" let-selectFn="selectFn">
        <div id="chk-box">
            <input type="checkbox"/>
        </div>
  </ng-template>
</us-data-table-column>

При сборке приложения и загрузке страницы, под этим столбцом ничего не появляется. Когда я проверяю консоль, она выглядит как <!----> -

Я не знаю, почему он отображается пустым.

Любая помощь действительно ценится в любом из трех вышеуказанных подходов. Кроме того, большинство приветствует любое новое решение.

Спасибо.