Grid control issue in other components

[khaqan asif]

Hi, I am adding grid control in my project. Its working fine in app.component. But when I am trying to add it in other component then I am getting below error. Kindly help in this regard. Thanks

Error: src/app/table-list/table-list.component.html:281:1 – error NG8001: ‘smart-grid’ is not a known element:
1. If ‘smart-grid’ is an Angular component, then verify that it is part of this module.
2. If ‘smart-grid’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

281 <smart-grid #grid></smart-grid>
~~~~~~~~~~~~~~~~~~

src/app/table-list/table-list.component.ts:146:16
146 templateUrl: ‘./table-list.component.html’,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component TableListComponent.

 

table-list.component.ts:

 

import { Component, ViewChild, AfterViewInit, ViewEncapsulation } from ‘@angular/core’;
import { GridComponent, GridColumn, DataAdapter, Smart } from ‘smart-webcomponents-angular/grid’;
import { GetData } from ‘../../app/common/data’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./table-list.component.html’,
styleUrls: [‘./table-list.component.css’],
encapsulation: ViewEncapsulation.None
})

export class TableListComponent implements AfterViewInit {
@ViewChild(“grid”, { read: GridComponent, static: false }) grid!: GridComponent;

ngAfterViewInit(): void {
this.grid.dataSource = new Smart.DataAdapter(
<DataAdapter>{
dataSource: GetData(500),

….

table-list.component.html:

<smart-grid #grid></smart-grid>

 

app.module.ts file:

 

import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;
import { NgModule } from ‘@angular/core’;
import { FormsModule, ReactiveFormsModule } from ‘@angular/forms’;
import { HttpClientModule } from ‘@angular/common/http’;
/*import { NavMenuComponent } from ‘./nav-menu/nav-menu.component’;*/
import { RouterModule } from ‘@angular/router’;
import { AppRoutingModule } from ‘./app.routing’;
import { ComponentsModule } from ‘./components/components.module’;
import { AppComponent } from ‘./app.component’;
import { AdminLayoutComponent } from ‘./layouts/admin-layout/admin-layout.component’;
import { GridModule } from ‘smart-webcomponents-angular/grid’;
//import { HotTableModule } from ‘@handsontable/angular’;
//import { registerAllModules } from ‘handsontable/registry’;
import { BrowserModule } from ‘@angular/platform-browser’;

/*registerAllModules();*/

@NgModule({
imports: [
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
ComponentsModule,
RouterModule,
AppRoutingModule,
GridModule,
BrowserModule,
/*HotTableModule*/
],
declarations: [
AppComponent,
AdminLayoutComponent,
/*NavMenuComponent*/

],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

 

• This topic was modified 10 months, 3 weeks ago by khaqan asif.

[svetoslav_borislavov]

Hi,

You should import the GridModule into the table-list’s module.
Please import it and give us a feedback!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts