Angular CLI

Using with Angular CLI

The Angular CLI is a command-line tool for scaffolding and building Angular applications.

1. Installation

The easiest way to get started with Smart UI for Angular is to use the Angular CLI Tool. To scaffold your project structure, follow its installation instructions.

npm install -g @angular/cli
ng new smart-project
cd smart-project

Quick Setup with ng-add

Smart Angular UI comes packaged with Angular CLI schematics to make creating Material applications easier. Schematics are included with both @angular/cdk and smart-webcomponents-angular. Once you install the npm packages, they will be available through the Angular CLI.

Angular CLI supports the addition of packages through the ng add command. The ng add command provides faster and more user-friendly package installation. To install the Smart UI for Angular package use ng add and add the name of the NPM package.


ng add smart-webcomponents-angular

The ng add smart-webcomponents-angular command executes the following actions:

  1. Adds the smart-webcomponents-angular package as a dependency.
  2. Imports the Modules in the current application module.
  3. Registers the default Smart UI theme in the angular.json file.
  4. Add Roboto fonts to your index.html
  5. Add the Material Icon font to your index.html
  6. Add global styles to
    • Remove margins from body
    • Set height: 100% on html and body
    • Make Roboto the default font of your app
  7. Adds all required peer dependencies to package.json.
  8. Triggers npm install to install the theme and all peer packages that are added.

Component schematics

In addition to the install schematic, Smart Angular comes with multiple schematics that can be used to easily generate Material Design components:

Grid schematic

ng generate smart-webcomponents-angular:grid

The grid schematic will create a component that renders an Angular Grid which has been pre-configured with a datasource, sorting and selection.

Grid Angular

Tree schematic

ng generate smart-webcomponents-angular:tree

The tree schematic will create a component that renders an Angular Tree which has been pre-configured with a datasource.

Tree Angular

Dashboard schematic

ng generate smart-webcomponents-angular:dashboard

The dashboard schematic will create a component that renders multiple angular components such as Grid, Chart, Calendar, ListBox, DatETimePciker which has been pre-configured with a datasource and business logic. You will also choose a theme from a list of 10+ material themes.

Running the generated component

  • Open app.module.ts
  • In bootstrap, put the component. If the component's name was "my-dashboard", set it to: bootstrap: [MyDashboardComponent]

    app.module.ts
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppComponent } from './app.component';
    import { MyDashboardComponent } from './my-dashboard/my-dashboard.component';
    import { SplitterModule } from 'smart-webcomponents-angular/splitter';
    import { GridModule } from 'smart-webcomponents-angular/grid';
    import { ChartModule } from 'smart-webcomponents-angular/chart';
    import { CalendarModule } from 'smart-webcomponents-angular/calendar';
    import { ListBoxModule } from 'smart-webcomponents-angular/listbox';
    import { DateTimePickerModule } from 'smart-webcomponents-angular/datetimepicker';
    import { ButtonModule } from 'smart-webcomponents-angular/button';
    import { RadioButtonModule } from 'smart-webcomponents-angular/radiobutton';
    import { TextBoxModule } from 'smart-webcomponents-angular/textbox';
    import { MyTreeComponent } from './my-tree/my-tree.component';
    import { TreeModule } from 'smart-webcomponents-angular/tree';
    import { MyGridComponent } from './my-grid/my-grid.component';
    
    @NgModule({
      declarations: [
        AppComponent,
        MyDashboardComponent,
        MyTreeComponent,
        MyGridComponent
      ],
      imports: [
        BrowserModule,
        SplitterModule,
        GridModule,
        ChartModule,
        CalendarModule,
        ListBoxModule,
        DateTimePickerModule,
        ButtonModule,
        RadioButtonModule,
        TextBoxModule,
        TreeModule
      ],
      providers: [],
      bootstrap: [MyDashboardComponent]
    })
    export class AppModule { }
    
  • Set the "app-my-dashboard" in index.html.

    index.html
    <!doctype html>  
     <html lang="en">  
     <head>  
      <meta charset="utf-8">  
      <title>Ng</title>  
      <base href="/">  
      <meta name="viewport" content="width=device-width, initial-scale=1">  
      <link rel="icon" type="image/x-icon" href="favicon.ico">  
      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">  
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">  
     </head>  
     <body>  
      <app-my-dashboard></app-my-dashboard>  
     </body>  
     </html>  
    
  • Result:

    Dashboard Angular

Manual Setup

Smart UI for Angular is distributed as smart-webcomponents-angular NPM package

  1. Download and install the package.
    npm install smart-webcomponents-angular
  2. Once installed, import the NgModule of the components you need.

    app.module.ts

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    
    import { AccordionModule } from 'smart-webcomponents-angular/accordion';
    
    import { AppComponent } from './app.component';
    
    @NgModule({
        declarations: [ AppComponent ],
        imports: [ BrowserModule, AccordionModule ],
        bootstrap: [ AppComponent ],
    	entryComponents: [ AppComponent ]
    })
    
    export class AppModule { }
    
    

  3. Adding CSS reference

    The following CSS file is available in ../node_modules/smart-webcomponents-angular/ package folder. This can be referenced in [src/styles.css] using following code.

    @import '../node_modules/smart-webcomponents-angular/source/styles/smart.default.css';

    Another way to achieve the same is to edit the angular.json file and in the styles add the style.

    "styles": [
    	"node_modules/smart-webcomponents-angular/source/styles/smart.default.css"
    ]
    


2. Add the HTML for the Accordion in src/app/app.component.html

app.component.html

 <smart-accordion #accordion>  
   <smart-accordion-item [label]="'First Item'">First Item Content.</smart-accordion-item>  
   <smart-accordion-item [label]="'Second Item'">Second Item Content.</smart-accordion-item>  
   <smart-accordion-item [label]="'Third Item'">Third Item Content.</smart-accordion-item>  
   <smart-accordion-item [label]="'Fourth Item'">Fourth Item Content.</smart-accordion-item>  
 </smart-accordion>  

3. Setup

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { AccordionComponent, AccordionItemComponent, AccordionExpandMode } from 'smart-webcomponents-angular/accordion';

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

export class AppComponent {
    @ViewChild('accordion', { read: AccordionComponent, static: false }) accordion: AccordionComponent;

    ngOnInit(): void {

    }
    ngAfterViewInit(): void {
		const that = this;
		that.accordion.expandMode = "multiple";
		that.accordion.expand(1);  	
    }
}


4. Example


Edit in StackBlitz