Topic: How to use MDN Angular with sub modules ?
Expected behavior
I want to split my front end application in modules to separate fonctionalities. In a sample app, I create 2 components with the same code, 1 in the app.module and another un a sub module. the first one is ok but the second one is KO
Actual behavior I have many errors in components of my sub modules () error NG8003: No directive found with exportAs 'mdbTable'. 10
Can you help me ?
Resources (screenshots, code snippets etc.)
app.module.ts
NgModule ({
declarations: [ AppComponent ],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
ToastModule.forRoot(),
MDBBootstrapModulesPro.forRoot(),
AgmCoreModule.forRoot({ apiKey: 'key'}),
],
providers: [ MDBSpinningPreloader ],
bootstrap: [ AppComponent ]
})
export class { }
sub-module.module.ts
@NgModule({
declarations: [
ListSampleComponent,
],
imports: [
CommonModule,
FormsModule,
ToastModule.forRoot(),
MDBBootstrapModulesPro.forRoot(),
AgmCoreModule.forRoot({ apiKey: 'key'}),
MdbTableDirective,
MdbTablePaginationComponent,
],
providers: [
MDBSpinningPreloader,
],
exports: [
SubModuleModule,
],
})
export class SubModuleModule { }
app.component.ts / list-sample.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit , AfterViewInit {
@ViewChild(MdbTableDirective, { static: true }) mdbTable: MdbTableDirective;
@ViewChild(MdbTablePaginationComponent, { static: true }) mdbTablePagination: MdbTablePaginationComponent;
@ViewChild('row', { static: true }) row: ElementRef;
elements: any = [];
headElements = ['id', 'first', 'last', 'handle'];
searchText = '';
previous: string;
maxVisibleItems = 8;
constructor(private cdRef: ChangeDetectorRef) {}
@HostListener('input') oninput() {
this.mdbTablePagination.searchText = this.searchText;
}
ngOnInit() {
for (let i = 1; i <= 25; i++) {
this.elements.push({id: i.toString(), first: 'Wpis ' + i, last: 'Last ' + i, handle: 'Handle ' + i});
}
this.mdbTable.setDataSource(this.elements);
this.elements = this.mdbTable.getDataSource();
this.previous = this.mdbTable.getDataSource();
}
ngAfterViewInit() {
this.mdbTablePagination.setMaxVisibleItemsNumberTo(this.maxVisibleItems);
this.mdbTablePagination.calculateFirstItemIndex();
this.mdbTablePagination.calculateLastItemIndex();
this.cdRef.detectChanges();
}
addNewRow() {
this.mdbTable.addRow({
id: this.elements.length.toString(),
first: 'Wpis ' + this.elements.length,
last: 'Last ' + this.elements.length,
handle: 'Handle ' + this.elements.length
});
this.emitDataSourceChange();
}
addNewRowAfter() {
this.mdbTable.addRowAfter(1, {id: '2', first: 'Nowy', last: 'Row', handle: 'Kopytkowy'});
this.mdbTable.getDataSource().forEach((el: any, index: any) => {
el.id = (index + 1).toString();
});
this.emitDataSourceChange();
}
removeLastRow() {
this.mdbTable.removeLastRow();
this.emitDataSourceChange();
this.mdbTable.rowRemoved().subscribe((data: any) => {
console.log(data);
});
}
removeRow() {
this.mdbTable.removeRow(1);
this.mdbTable.getDataSource().forEach((el: any, index: any) => {
el.id = (index + 1).toString();
});
this.emitDataSourceChange();
this.mdbTable.rowRemoved().subscribe((data: any) => {
console.log(data);
});
}
emitDataSourceChange() {
this.mdbTable.dataSourceChange().subscribe((data: any) => {
console.log(data);
});
}
searchItems() {
const prev = this.mdbTable.getDataSource();
if (!this.searchText) {
this.mdbTable.setDataSource(this.previous);
this.elements = this.mdbTable.getDataSource();
}
if (this.searchText) {
this.elements = this.mdbTable.searchLocalDataBy(this.searchText);
this.mdbTable.setDataSource(prev);
}
this.mdbTablePagination.calculateFirstItemIndex();
this.mdbTablePagination.calculateLastItemIndex();
this.mdbTable.searchDataObservable(this.searchText).subscribe(() => {
this.mdbTablePagination.calculateFirstItemIndex();
this.mdbTablePagination.calculateLastItemIndex();
});
}
onRowCreate(event: any) {
}
onRowRemove(event: any) {
}
}
app.component.html / list-sample.component.html
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="md-form">
<input type="text" class="form-control" [(ngModel)]="searchText" (keyup)="searchItems()" id="search-input"
mdbInput>
<label for="search-input">Search</label>
</div>
</div>
<table mdbTable #tableEl="mdbTable" stickyHeader="true" hover="true" striped="true" class="z-depth-1">
<thead class="sticky-top">
<tr>
<th *ngFor="let head of headElements; let i = index" [mdbTableSort]="elements" [sortBy]="headElements[i]"
scope="col">{{head | titlecase}} <mdb-icon fas icon="sort"></mdb-icon>
</th>
</tr>
</thead>
<tbody #row>
<tr mdbTableCol (rowCreated)="onRowCreate($event)" (rowRemoved)="onRowRemove($event)" *ngFor="let el of elements; let i = index">
<th *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex" scope="row">{{el.id}}</th>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex" class="red-text">{{el.first}}</td>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{el.last}}</td>
<td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{el.handle}}</td>
</tr>
</tbody>
<tfoot class="grey lighten-5 w-100">
<tr>
<td colspan="4">
<mdb-table-pagination [tableEl]="tableEl" paginationAlign="" [searchDataSource]="elements"></mdb-table-pagination>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
Arkadiusz Idzikowski staff answered 5 years ago
The MdbTableDirective
and MdbTablePaginationComponent
imports should be added in your component ts file, not in the imports array of the module.
ThierryRV commented 5 years ago
I have these 2 lines in my component in the sub-module (sorry, I omit the import lines in my snippet in my comment).
import { Component, OnInit, AfterViewInit, ViewChild, ElementRef, ChangeDetectorRef, HostListener } from '@angular/core'; import { MdbTableDirective, MdbTablePaginationComponent } from 'ng-uikit-pro-standard';
@Component({ selector: 'app-list-sample', templateUrl: './list-sample.component.html', styleUrls: ['./list-sample.component.scss'] })
the error are detected only on the html file of my component of the sub-module
ThierryRV commented 5 years ago
my sample project in GitHub : https://github.com/ThierryRV/app-mdb-angular-multi-modules.git
ThierryRV answered 5 years ago
ThierryRV commented an hour agoEdit Delete my sample project in GitHub : https://github.com/ThierryRV/app-mdb-angular-multi-modules.git
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.3.1
- Device: Apple MacBook
- Browser: Chrome
- OS: Mac os X
- Provided sample code: No
- Provided link: No