JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Grid control issue in other components
- This topic has 1 reply, 2 voices, and was last updated 1 year, 3 months ago by svetoslav_borislavov.
-
AuthorPosts
-
June 12, 2023 at 7:29 pm #107218khaqan asifParticipant
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 1 year, 3 months ago by khaqan asif.
June 13, 2023 at 5:39 am #107222svetoslav_borislavovParticipantHi,
You should import the GridModule into the table-list’s module.
Please import it and give us a feedback!Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.