jQuery UI Widgets Forums Angular Angular jqxbuttons Error

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Angular jqxbuttons Error #111544

    Resington
    Participant

    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…

    Angular jqxbuttons Error #111558

    Hristo
    Participant

    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

    • This reply was modified 2 months ago by  Hristo.
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.