My unique custom table is made up of multiple components, each emitting events using a shared service called TableEvent. These events are subscribed to by a class named TableTemplate, which facilitates communication among the different components of the table.
While everything functions properly when there is only one table on the page, issues arise when multiple tables are present. The events end up being triggered for all tables instead of just the one that generated the event. How can I resolve this problem?
@Injectable()
export class TableEvent {
private sortChangeSubject: Subject<any> = new Subject();
public sortChange = this.sortChangeSubject.asObservable();
public sortChangeEmit($events) {
this.sortChangeSubject.next($events);
}
}
export abstract class TableTemplate implements OnInit, OnDestroy {
protected constructor(public tableName: string, public options:TableConfig = {}) {
this.tableEvent = AppInjector.get(TableEvent);
this.subscription.add(this.sortChangeEvent());
}
protected sortChangeEvent() {
return this.tableEvent.sortChange.subscribe($event => {
this.load($event);
});
}
protected abstract setColumnDef(): ColumnDef[];
protected abstract getDataSource(optionFilters?, optionsSort?): Observable<T>;
}
@Component({
selector: 'app-clients',
templateUrl: './clients.component.html',
styleUrls: ['./clients.component.scss'],
providers: [TableEvent]
})
export class ClientsComponent extends TableTemplate {
protected setColumnDef(): ColumnDef[] {
return [...];
}
protected getDataSource(optionFilters?, optionsSort?): Observable<Object> {
return ...
}
}
<!-- clients.component.html -->
<app-table
[sortName]="'id'"
...
</app-table>
To further elaborate, TableTemplate should be treated as a class and not a component. Any component implementing my custom table needs to extend from TableTemplates.
When attempting to add
@Component({
...
providers: [TableEvent]
})
to either ClientsComponent or TableComponent, an error message stating no providers for TableEvent is encountered.
This issue is occurring on Angular version 7.1