JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Data Grid Grid control issue in other components

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #107218
    khaqan asif
    Participant

    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.
    #107222

    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/

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.