DataGrid doesn't update search on Project Clarity

Question

I have a table which shows data from cloud firestore. I have implemented my own search to search from the firestore directly, when I console I am able to get the data but it does't show on the datagrid.

my front-end

<input type="text" (keydown)="searchPhone($event)" placeholder="search phone no" class="input">
<div class="row">
    <div class="col-sm">
        <clr-datagrid [clDgRowSelection]="true">
            <clr-dg-column [clrDgField]="'first_name'">
                <ng-container *clrDgHideableColumn="{hidden: false}">
                    Name
                </ng-container>
            </clr-dg-column>
            <clr-dg-column [clrDgField]="'phone_no'">
                <ng-container *clrDgHideableColumn="{hidden: false}">
                    Phone NO
                </ng-container>
            </clr-dg-column>

            <clr-dg-placeholder>We couldn't find any data.</clr-dg-placeholder>
            <clr-dg-row *clrDgItems="let contractor of contractors" [clrDgItem]="contractor" (click)="transactionView(contractor)">
                <clr-dg-cell>{{ contractor.first_name }} {{ contractor.last_name }}</clr-dg-cell>
                <clr-dg-cell>{{ contractor.phone_no }}</clr-dg-cell>
            </clr-dg-row>
        </clr-datagrid>
    </div>
</div>

on my ts file is as folows

task: any;
contractors: any;
dataCollection: any;
data: Observable<ContractorDoc[]>;
search: any;
startAt = new Subject()
endAt = new Subject()


constructor(
    private afs: AngularFirestore,
    private router: Router) {
}

ngOnInit() {
    this.dataCollection = this.afs.collection('contractors')
    this.data = this.dataCollection.valueChanges()
    this.data.forEach(elem => {
        this.contractors = elem;
        console.log('Contractors', this.contractors);
    })
}

searchPhone($event) {
    let search = $event.target.value
    this.startAt.next(search)
    this.endAt.next(search + "\uf8ff")

    console.log(search);
    this.dataCollection = this.afs.collection('contractors').ref.where('phone_no', '==', search).onSnapshot((res) => {
        res.forEach(elem => {
            this.contractors = elem.data();
            console.log('My search event', elem.data());
        })
    })
}

What am I doing wrong?

Answer 1

It looks like you need to implement the <clr-datagrid (clrDgRefresh)="refresh($event)" [clrDgLoading]="loading"> function in your datagrid.

From the docs on server-driven datagrids