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. Adds all required peer dependencies to package.json.
  5. Triggers npm install to install the theme and all peer packages that are added.

Getting started with standalone components

After adding smart-webcomponents-angular, edit the src/app.component.ts and src/app.component.html

app.component.html

 
<smart-table #table id="table">
    <table>
        <thead>
            <tr>
                <th scope="col">Country</th>
                <th scope="col">Area</th>
                <th scope="col">Population_Rural</th>
                <th scope="col">Population_Total</th>
                <th scope="col">GDP_Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Brazil</td>
                <td>8515767</td>
                <td>0.15</td>
                <td>205809000</td>
                <td>2353025</td>
            </tr>
            <tr>
                <td>China</td>
                <td>9388211</td>
                <td>0.46</td>
                <td>1375530000</td>
                <td>10380380</td>
            </tr>
            <tr>
                <td>France</td>
                <td>675417</td>
                <td>0.21</td>
                <td>64529000</td>
                <td>2846889</td>
            </tr>
            <tr>
                <td>Germany</td>
                <td>357021</td>
                <td>0.25</td>
                <td>81459000</td>
                <td>3859547</td>
            </tr>
            <tr>
                <td>India</td>
                <td>3287590</td>
                <td>0.68</td>
                <td>1286260000</td>
                <td>2047811</td>
            </tr>
            <tr>
                <td>Italy</td>
                <td>301230</td>
                <td>0.31</td>
                <td>60676361</td>
                <td>2147952</td>
            </tr>
            <tr>
                <td>Japan</td>
                <td>377835</td>
                <td>0.07</td>
                <td>126920000</td>
                <td>4616335</td>
            </tr>
            <tr>
                <td>Russia</td>
                <td>17098242</td>
                <td>0.26</td>
                <td>146544710</td>
                <td>1857461</td>
            </tr>
            <tr>
                <td>United States</td>
                <td>9147420</td>
                <td>0.19</td>
                <td>323097000</td>
                <td>17418925</td>
            </tr>
            <tr>
                <td>United Kingdom</td>
                <td>244820</td>
                <td>0.18</td>
                <td>65097000</td>
                <td>2945146</td>
            </tr>
        </tbody>
    </table>
</smart-table>

app.component.ts

 
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { TableModule } from 'smart-webcomponents-angular/table';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, TableModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'smart project';
}

Getting Started with NgModules

After adding smart-webcomponents-angular, edit the src/app.component.ts, src/app.component.html and src/app.module.ts.

app.component.html

 
<smart-table #table id="table">
    <table>
        <thead>
            <tr>
                <th scope="col">Country</th>
                <th scope="col">Area</th>
                <th scope="col">Population_Rural</th>
                <th scope="col">Population_Total</th>
                <th scope="col">GDP_Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Brazil</td>
                <td>8515767</td>
                <td>0.15</td>
                <td>205809000</td>
                <td>2353025</td>
            </tr>
            <tr>
                <td>China</td>
                <td>9388211</td>
                <td>0.46</td>
                <td>1375530000</td>
                <td>10380380</td>
            </tr>
            <tr>
                <td>France</td>
                <td>675417</td>
                <td>0.21</td>
                <td>64529000</td>
                <td>2846889</td>
            </tr>
            <tr>
                <td>Germany</td>
                <td>357021</td>
                <td>0.25</td>
                <td>81459000</td>
                <td>3859547</td>
            </tr>
            <tr>
                <td>India</td>
                <td>3287590</td>
                <td>0.68</td>
                <td>1286260000</td>
                <td>2047811</td>
            </tr>
            <tr>
                <td>Italy</td>
                <td>301230</td>
                <td>0.31</td>
                <td>60676361</td>
                <td>2147952</td>
            </tr>
            <tr>
                <td>Japan</td>
                <td>377835</td>
                <td>0.07</td>
                <td>126920000</td>
                <td>4616335</td>
            </tr>
            <tr>
                <td>Russia</td>
                <td>17098242</td>
                <td>0.26</td>
                <td>146544710</td>
                <td>1857461</td>
            </tr>
            <tr>
                <td>United States</td>
                <td>9147420</td>
                <td>0.19</td>
                <td>323097000</td>
                <td>17418925</td>
            </tr>
            <tr>
                <td>United Kingdom</td>
                <td>244820</td>
                <td>0.18</td>
                <td>65097000</td>
                <td>2945146</td>
            </tr>
        </tbody>
    </table>
</smart-table>

app.component.ts

 
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { TableComponent } from 'smart-webcomponents-angular/table';

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

export class AppComponent implements AfterViewInit, OnInit {	
	@ViewChild('table', { read: TableComponent, static: false }) table!: TableComponent;
	
	ngOnInit(): void {
	}

	ngAfterViewInit(): void {
	}
}

app.module.ts

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

import { TableModule } from 'smart-webcomponents-angular/table';

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

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

export class AppModule { }

Run the sample with ng serve and open localhost:4200 in your favorite web browser.

Installation Setup

Smart UI for Angular Installation

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, if you use Angular Standalone Components 
    import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { AccordionModule } from 'smart-webcomponents-angular/accordion';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, AccordionModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'smart project';
}
    otherwise, 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 ]
})

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