Nominally Patriotic Meathead

    @sencha/ext-angular-classic
    TypeScript icon, indicating that this package has built-in type declarations

    7.5.0 • Public • Published

    ExtAngular

    About ExtAngular

    ExtAngular is a comprehensive Angular UI component library containing over 140 enterprise-grade UI components such as Data Grids, Pivot Grids, Trees, Charts, D3 Visualizations, Forms, Calendars, Buttons, Menus and many more. ExtAngular components are pre-built and pre-tested and work seamlessly across browsers and platforms. Packed with all the components and features you ever need, with ExtAngular, you’ll never have to go out looking for another missing component or functionality.

    ExtAngular 30-day Free Trial

    The limited 30-day free trial offers full access to the ExtAngular components and tools. Try it out and see why it’s the most comprehensive component suite out there!

    Getting started with @sencha/ext-angular-modern.

    This npm package contains the files that are needed to add the @sencha/ext-angular-modern package to an Angular application.

    Step 1: Install Angular CLI and Generate a new Angular Application

    In the project, install the ExtAngular components dependency in the package.json

    $ npm install -g @angular/cli
    $ ng new ext-angular-modern-demo --minimal=true --interactive=false -g=true --skipInstall=false
    $ cd ext-angular-modern-demo
    

    Step 2: Install Packages from npm

    Login to Sencha's private npm registry if you are an ACTIVE customer

    ExtAngular and all related commercial packages are hosted on Sencha's private npm registry. Login to the registry using the following command which configures npm to download packages in the @sencha scope from Sencha's registry.

    Username Note: The email and password used during support portal activation (after license purchase) will be used to login to Sencha’s NPM repo. The username is the same as the email used, however, the @ character is replaced with '..' two periods. For example name@gmail.com converts to name..gmail.com as username.

    $ npm login --registry=https://npm.sencha.com/ --scope=@sencha
    
    

    Install packages

    $ npm install @sencha/ext-modern-runtime --save
    
    $ npm install @sencha/ext-angular-modern --save
    

    Step 3: Add ExtAngular to you Project

    Open your editor (you can use any editor). To open Visual Studio Code, type the following: code .

    Add to ./src/styles.css:

    :root {
      --base-color: #024059;
      --base-foreground-color: white;
      --background-color: white;
      --color: black;
    }
    

    Replace ./src/app/app.module.ts with:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { ExtAngularModernModule } from '@sencha/ext-angular-modern';
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        ExtAngularModernModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    

    Replace ./src/app/app.component.ts with:

    import { Component } from '@angular/core';
    
    @Component({
        selector: 'app-root',
        template: `
    <ExtPanel viewport="true" title="panel" layout="fit">
        <ExtToolbar docked="top">
            <ExtButton text="a button" shadow="true"></ExtButton>
        </ExtToolbar>
        <ExtGrid
            [title]="title"
            (ready)="readyGrid($event)"
        >
            <ExtColumn text="name" dataIndex="name"></ExtColumn>
            <ExtColumn text="email" dataIndex="email" flex="1"></ExtColumn>
        </ExtGrid>
    </ExtPanel>
        `,
        styles: []
    })
    export class AppComponent {
        title = 'the grid';
        data=[
            {name: 'Marc', email: 'marc@gmail.com'},
            {name: 'Nick', email: 'nick@gmail.com'},
            {name: 'Andy', email: 'andy@gmail.com'},
        ]
        readyGrid(event) {
            var grid = event.cmp;
            grid.setData(this.data)
        }
    }
    

    Update TypeScript Config Files For version 9.x of @angular/cli update ./tsconfig.json For version 10.x of @angular/cli update ./tsconfig.base.json

    1. Add compiler options:
      "compilerOptions": {
        ...
        "typeRoots": [
          "node_modules/@types"
        ],
        "paths": {
          "@angular/*": ["node_modules/@angular/*"],
          "@sencha/*": ["node_modules/@sencha/*"]
        },
        "noImplicitAny": false,
        "suppressImplicitAnyIndexErrors": true,
        "preserveSymlinks": true,
        ...
      }
    
    1. Add includes
      "include": [
        "**/lib/**/*.ts",
        "src/**/*.ts",
        "node_modules/@sencha/**/*.ts",
      ]
    

    Type the following in a command/terminal window:

    ng serve --open --port 4201
    

    open http://localhost:4201 in a browser - the ExtAngular application will load

    To generate a theme for Sencha Themer:

    npm install @sencha/cmd --save
    node_modules/.bin/ext-angular generate theme -b theme-material -n test-ext-angular
    

    Interested in trying out the additional tools included in your trial?

    Fill out the zip trial form to get the zip downloads of add-on premium components:

    • D3 Adapter
    • Pivot Grid
    • Calendar
    • Exporter

    Other design tools:

    • Themer
    • Stencils
    • Test

    The ExtAngular trial version is valid for 30-days. If you need any help with the product trial contact us. Ready to use the product for your commercial project? Check out the product pricing and licensing details.

    Guides and Helpful Resources

    ExtAngular has extensive documentation and getting started guides.

    Check out our resources page to get quick access to videos, tutorials, webinars and more.

    Additional Resources

    Repo Guides

    Licensing

    Evaluation/Trial License

    Keywords

    Angular ExtAngular html javascript framework components widgets ui datagrid pivotgrid chart treelist

    Keywords

    none

    Install

    npm i @sencha/ext-angular-classic

    DownloadsWeekly Downloads

    7

    Version

    7.5.0

    License

    ISC

    Unpacked Size

    27.8 MB

    Total Files

    637

    Last publish

    Collaborators

    • sencha