Angular jqxbuttons Error

[ResingtonParticipant]

Dear all,
I am using Angular CLI: 8.3.8, Node: 10.16.0, OS: windows 10 x64 and jqwidgets ver 9.0.
I have created a new app using the command “create-jqwidgets-angular-app my-app” and the app successfully created and works fine with the default grid.
Now i have added a jqxbuttons by doing the following change in their respective files..

In app.module.ts

import { AppComponent } from './app.component';
import { CommonModule }   from '@angular/common';
import { jqxChartModule } from 'jqwidgets-ng/jqxchart';
import{ jqxButtonComponent } from 'jqwidgets-ng/jqxbuttons';  
import { jqxGridModule } from 'jqwidgets-ng/jqxgrid';
@NgModule({
  declarations: [ AppComponent ],
  imports: [ BrowserModule, jqxGridModule, jqxChartModule, CommonModule, jqxButtonComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

<strong>In HTML</strong>
<jqxButton #buttonReference [width]="80" [height]="80" [textPosition]="left">Button</jqxButton>

<strong>In app.component.ts</strong>
import{ jqxButtonComponent } from 'jqwidgets-ng/jqxbuttons'; 

I am getting this ERROR :
ERROR in node_modules/jqwidgets-ng/jqxbuttons/angular_jqxbuttons.d.ts:4:22 – error TS-996002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class

4 export declare class jqxButtonComponent implements OnChanges {

Can anyone please help… Thanks in advance…

[HristoParticipant]

Hello Resington,

From first sight, it appears the same error warning.
But after that, I make some changes to your scenario.
I change the import in the app.modules.ts file as using the jqxButtonModule module.
It seems to work fine.
Please, take a look at the example below as I started from the mentioned from you tutorial.
app.modules.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { jqxGridModule } from 'jqwidgets-ng/jqxgrid';
import { jqxButtonModule } from 'jqwidgets-ng/jqxbuttons';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [ BrowserModule, jqxGridModule, jqxButtonModule ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

app.component.ts:

import { Component, ViewChild } from '@angular/core';

import{ jqxButtonComponent } from 'jqwidgets-ng/jqxbuttons'; 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
	@ViewChild("buttonReference", { static: false }) buttonReference: jqxButtonComponent;
	
	ngAfterViewInit() {
		console.log("ngAfterViewInit", this.buttonReference);
	}
	
  public source: jqwidgets.GridSource = {
    localdata: [
      ['Maria Anders', 'Sales Representative', 'Berlin', 'Germany'],
      ['Ana Trujillo', 'Owner', 'Mxico D.F.', 'Mexico'],
      ['Antonio Moreno', 'Owner', 'Mxico D.F.', 'Mexico'],
      ['Thomas Hardy', 'Sales Representative', 'London', 'UK'],
      ['Christina Berglund', 'Order Administrator', 'Lule', 'Sweden'],
      ['Hanna Moos', 'Sales Representative', 'Mannheim', 'Germany'],
      ['Frdrique Citeaux', 'Marketing Manager', 'Strasbourg', 'France'],
      ['Martn Sommer', 'Owner', 'Madrid', 'Spain'],
      ['Owner', 'Marseille', 'France'],
      ['Elizabeth Lincoln', 'Accounting Manager', 'Tsawassen', 'Canada'],
      ['Victoria Ashworth', 'Sales Representative', 'London', 'UK'],
      ['Patricio Simpson', 'Sales Agent', 'Buenos Aires', 'Argentina'],
      ['Francisco Chang', 'Marketing Manager', 'Mxico D.F.', 'Mexico'],
      ['Yang Wang', 'Owner', 'Bern', 'Switzerland'],
      ['Pedro Afonso', 'Sales Associate', 'Sao Paulo', 'Brazil'],
      ['Elizabeth Brown', 'Sales Representative', 'London', 'UK'],
      ['Sven Ottlieb', 'Order Administrator', 'Aachen', 'Germany'],
      ['Janine Labrune', 'Owner', 'Nantes', 'France'],
      ['Ann Devon', 'Sales Agent', 'London', 'UK'],
      ['Roland Mendel', 'Sales Manager', 'Graz', 'Austria']
    ],
    datafields: [
        { name: 'ContactName', type: 'string', map: '0' },
        { name: 'Title', type: 'string', map: '1' },
        { name: 'City', type: 'string', map: '2' },
        { name: 'Country', type: 'string', map: '3' }
    ],
    datatype: 'array'
  };

  public dataAdapter = new jqx.dataAdapter(this.source);

  public columns: jqwidgets.GridColumn[] = [
    { text: 'Contact Name', datafield: 'ContactName', width: 240 },
    { text: 'Contact Title', datafield: 'Title', width: 240 },
    { text: 'City', datafield: 'City', width: 150 },
    { text: 'Country', datafield: 'Country' }
  ];
}

app.component.html:

<jqxGrid  
  [theme]="'material-purple'"
  [width]="800" [source]="dataAdapter" [columns]="columns"
  [pageable]="true" [sortable]="true" [editable]="true"
  [autoheight]="true" [altrows]="true" [enabletooltips]="true">
</jqxGrid>
<hr/>
<jqxButton #buttonReference [width]="80" [height]="80" [textPosition]="'left'">Button</jqxButton>

Now there is no error message.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts