ngx datatable defalut selection of checkboxes

Used ngx-datatable with having checkboxable=true. Which is showing correctly, but now, I want to make all the checkboxes selected by default when my component loads. Here is the datatable implementation -

<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></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>

All the datatable configuration called from config like -

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
                    }
                ]
            }
        }
    };
}

Tried with 3 solutions to make checkboxes selected by default:

Solution 1: Googled it to find any of the property to make the checkboxes selected by default, found 2-3 properties like - [selectAllRowsOnPage]="true" and [allRowsSelected]="allRowsSelected". When I apply this to the <us-data-table>, both seems to be not working anymore.

Solution 2: Then, I tried with making these checkboxes selected with core javascript. In getData() method in ts file like -

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

which works fine. It makes all the checkboxes selected by default. But then it leads to another issue. When you click on any of the checkbox to unselect, it does nothing. It remains selected. But when you click next time, it unselect that checkbox. First time, none of the checkbox does any action, but on second time, when click they start working.

Solution 3: Then, again tried to acheive this default checkbox selection with adding new custom checkbox instead of making checkboxable=true. Added new column in configuration and in html file -

<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>

When build the application and loads the page, under this column nothing appears. When I check the console, it is showing like <!----> -

I don't know why it is showing as blank.

Any help is really appreciated in any of the above three solutions. Also, most welcome to any new solution.

Thanks.