My experience with displaying a data table in Angular was frustrating. Even though all the records were present in the table, it kept showing "no data available." Additionally, the search function refused to work as intended. Whenever I tried searching for something, it just displayed the message "no data available in table". You can see the issue in this screenshot. enter image description here I had to include dtTrigger.next(); in the afterViewInit function to avoid the error "cannot reinitialize data table."
forum-admin-list.component.ts
import { Component, OnInit ,OnDestroy,AfterViewInit,ViewChild} from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { PostService } from 'src/app/shared/post.service';
import { Post } from 'src/app/shared/post.model';
import { ToastrService } from 'ngx-toastr';
import { Subject } from 'rxjs';
import { DataTableDirective } from 'angular-datatables';
@Component({
selector: 'app-forum-admin-list',
templateUrl: './forum-admin-list.component.html',
styleUrls: ['./forum-admin-list.component.css']
})
export class ForumAdminListComponent implements OnInit,OnDestroy,AfterViewInit {
list: Post[];
dtTrigger: Subject<string> = new Subject();
@ViewChild(DataTableDirective)
dtElement: DataTableDirective;
constructor(private service: PostService,private firestore: AngularFirestore,private toastr:ToastrService) { }
ngOnInit() {
this.service.getPost().subscribe(actionArray => {
this.list = actionArray.map(item => {
return {
id: item.payload.doc.id,
...item.payload.doc.data()
} as Post;
})
});
}
onEdit(p: Post){
this.service.formData = Object.assign({},p);
}
onDelete(id: string){
if(confirm("Are you sure to delete this record")){
this.firestore.doc("post/"+id).delete();
this.toastr.warning("Deleted Successfully");
}
}
ngAfterViewInit(): void {this.dtTrigger.next();}
ngOnDestroy(): void {
// Do not forget to unsubscribe the event
this.dtTrigger.unsubscribe();
}
rerender(): void {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.destroy();
this.dtTrigger.next();
});}
}
forum-admin-list.component.html
<table datatable class="row-border hover" [dtTrigger]="dtTrigger">
<thead class="thead-dark">
<tr>
<th>Post Number</th>
<th>Title</th>
<th>Description</th>
<th>Date of Publish</th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let post of list">
<td>{{post.pNo}}</td>
<td>{{post.title}}</td>
<td>{{post.description}}</td>
<td>{{post.date}}</td>
<td><a class="btn text-danger" (click)="onDelete(post.id)"><i class="fa fa-trash"></i></a></td>
<td><a class="btn text-primary" (click)="onEdit(post)"><i class="fa fa-edit"></i></a></td>
</tr>
</tbody>
</table>
post.service.ts
import { Injectable } from '@angular/core';
import { Post } from './post.model';
import { AngularFirestore } from '@angular/fire/firestore';
@Injectable({
providedIn: 'root'
})
export class PostService {
formData: Post;
constructor(private firestore: AngularFirestore) { }
getPost(){
return this.firestore.collection('post').snapshotChanges();
}
}