Ignite UI for Angular

https://www.infragistics.com/products/ignite-ui-angular/angular
Admin
Ignite UI for Angular is a complete library of UI components for building modern, data-rich, and...
Tokens:1,846,784
Snippets:8,761
Trust Score:10
Update:9 months ago
Show doc for...
Tokens:
Raw
### Start Guided Project Creation with Ignite UI CLI

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/cli/getting-started-with-cli

Activates the interactive guided experience for creating a new Angular project. This method simplifies the setup process by prompting the user for necessary configurations.

```shell
ig
```

```shell
ig new
```

--------------------------------

### Run the Ignite UI Angular Application

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/cli/getting-started-with-angular-schematics

Builds the Angular application, starts a local web server, and opens the application in the default web browser using the 'start' schematic provided by Ignite UI for Angular Schematics. This command is used to preview the developed application. The Angular CLI must be installed.

```bash
ng g @igniteui/angular-schematics:start
```

--------------------------------

### Launch Ignite UI CLI Guided Setup

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/index

Activates the Ignite UI CLI's guided setup for creating a new application. This provides an interactive way to bootstrap your project.

```bash
ig
```

--------------------------------

### Bootstrap a New Angular Project with Ignite UI Schematics

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/cli/getting-started-with-angular-schematics

Creates a new Angular application pre-configured with Ignite UI for Angular controls using the guided experience of the schematics. This command initiates an interactive setup process. It requires the Angular CLI to be installed.

```bash
ng new --collection="@igniteui/angular-schematics"
```

--------------------------------

### Install Ignite UI Angular Schematics or CLI

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started

Installs the necessary packages globally to use Ignite UI for Angular Schematics or the Ignite UI CLI for application bootstrapping. This is the first step to setting up your development environment.

```cmd
npm i -g @igniteui/angular-schematics
```

```cmd
npm install -g igniteui-cli
```

--------------------------------

### Run Angular Application with Ignite UI

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started

Provides commands to serve the Angular application. Use 'ig start' if the application was created with the Ignite UI CLI, or 'ng serve' if created with the Angular CLI.

```cmd
ig start
```

```cmd
ng serve
```

--------------------------------

### Install Ignite UI CLI Globally

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/cli/getting-started-with-cli

Installs the Ignite UI CLI globally using npm or yarn. This command is essential for accessing Ignite UI CLI functionalities on your system. Ensure you have Node.js and npm/yarn installed.

```shell
npm install -g igniteui-cli
```

```shell
yarn global add igniteui-cli
```

--------------------------------

### Create New Angular App with Ignite UI Schematics or CLI

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started

Creates a new Angular application pre-configured with Ignite UI for Angular components. This streamlines the setup process, allowing you to start development quickly.

```cmd
ng new --collection="@igniteui/angular-schematics"
```

```cmd
ig
```

--------------------------------

### Angular Application Module Setup

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/spreadsheet-clipboard

Configures the main application module for an Angular project using Ignite UI components. It imports necessary modules for UI, data binding, and spreadsheet functionality.

```typescript
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ExcelUtility } from "./ExcelUtility";
import { IgxExcelModule } from "igniteui-angular-excel";
import { IgxSpreadsheetModule } from "igniteui-angular-spreadsheet";

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,

],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxExcelModule,
    IgxSpreadsheetModule
],
  providers: [ExcelUtility],
schemas: []
})
export class AppModule {}

```

--------------------------------

### Run Ignite UI Angular Application

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/cli/getting-started-with-cli

Builds the application, starts a local web server, and opens the project in the default browser. This command is used to view and test your Ignite UI for Angular application during development.

```shell
ig start
```

--------------------------------

### Angular Spreadsheet Component Setup and Excel Loading

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/spreadsheet-clipboard

Sets up the Angular component with IgxSpreadsheetComponent and loads an Excel file from a URL upon initialization. This requires importing necessary components and utilities.

```typescript
import { IgxSpreadsheetComponent } from "igniteui-angular-spreadsheet";
import { SpreadsheetAction } from "igniteui-angular-spreadsheet";
import { ExcelUtility } from "./ExcelUtility";

@Component({
  standalone: false,
  selector: "app-root",
  styleUrls: ["./app.component.scss"],
  templateUrl: "./app.component.html"
})
export class AppComponent implements AfterViewInit {
  @ViewChild("spreadsheet", { read: IgxSpreadsheetComponent, static: true })
  public spreadsheet: IgxSpreadsheetComponent;

  constructor() { }

  public ngAfterViewInit() {
      const excelFile = "https://dl.infragistics.com/x/excel/SalesData.xlsx";
      ExcelUtility.loadFromUrl(excelFile).then((w) => {
          this.spreadsheet.workbook = w;
      });
  }

  public cut(): void {
      this.spreadsheet.executeAction(SpreadsheetAction.Cut);
  }

  public copy(): void {
      this.spreadsheet.executeAction(SpreadsheetAction.Copy);
  }

  public paste(): void {
      this.spreadsheet.executeAction(SpreadsheetAction.Paste);
  }

}
```

--------------------------------

### Create New Angular App with Ignite UI CLI

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/angular-grid-overview-guide

Installs the Ignite UI CLI globally and then uses it to bootstrap a new Angular application with Ignite UI components pre-configured. This is ideal for starting new projects from scratch.

```bash
npm install –g igniteui-cli
ig
```

--------------------------------

### Install Ignite UI CLI Globally

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/index

Installs the Ignite UI CLI tool globally using npm. This tool provides a guided experience for creating and configuring Ignite UI for Angular applications.

```bash
npm install -g igniteui-cli
```

--------------------------------

### SignalR Server Configuration - launchSettings.json

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/how-to/signal-r-service-live-data

Defines the profiles for launching the ASP.NET Core application, specifying the application URLs for HTTP and HTTPS. This configuration is used by Visual Studio and `dotnet run` to start the server. Ensure the `applicationUrl` matches your development environment setup.

```json
"profiles": {
    "WebAPI": {
      "commandName": "Project",
      "launchBrowser": false,
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
```

--------------------------------

### Configuring the 'start' script in package.json

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/wpf-to-angular-guide/create-first-angular-app

This JSON snippet shows how the 'start' script in the 'package.json' file can be configured to automatically open the Angular application in the browser upon starting. The 'ng' command is aliased to 'ng serve -o'.

```json
{
  "scripts": {
    "ng": "ng",
    "start": "ng serve -o"
  }
}
```

--------------------------------

### Install Ignite UI Grid Lite Component

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started

Installs the open-source Grid Lite component for your Angular project using the Angular CLI. This component offers essential data-display features with minimal overhead.

```bash
ng add igniteui-grid-lite
```

--------------------------------

### Serving the Angular Application with Options

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/wpf-to-angular-guide/create-first-angular-app

These commands are used to serve the Angular application locally. 'ng serve' starts the development server, and the '-o' flag automatically opens the application in the default browser. 'npm start' is an alternative that can be configured in 'package.json'.

```cmd
ng serve
```

```cmd
ng serve -o
```

```cmd
npm start
```

--------------------------------

### Install Ignite UI Dock Manager Component

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started

Installs the premium Dock Manager component for your Angular project using the Angular CLI. This component allows users to customize application layout through movable and resizable panes.

```bash
ng add igniteui-dockmanager
```

--------------------------------

### Install SignalR for Angular

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/how-to/signal-r-service-live-data

Installs the SignalR client library using npm. This is the first step to enable SignalR communication in your Angular project.

```bash
npm install @microsoft/signalr

```

--------------------------------

### Component Initialization for Angular Spreadsheet

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/spreadsheet-activation

Basic Angular component setup with OnInit interface. This serves as a starting point for implementing spreadsheet-related logic within the component.

```typescript
import { Component, OnInit, ViewChild } from "@angular/core";

```

--------------------------------

### Dynamic Component Creation

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/live-data

Demonstrates the dynamic creation of DockSlot and Grid components on the fly using ComponentFactoryResolver.

```APIDOC
## POST /dynamic-components

### Description
Dynamically creates and adds DockSlot and Grid components to the application at runtime using Angular's ComponentFactoryResolver.

### Method
POST

### Endpoint
`/dynamic-components` (Conceptual endpoint for demonstrating dynamic creation)

### Parameters
#### Request Body
- **componentType** (string) - Required - The type of component to create (e.g., 'DockSlot', 'IgxGrid').
- **componentConfig** (object) - Optional - Configuration options for the component.

### Request Example
```typescript
// Assuming access to ComponentFactoryResolver and ViewContainerRef
import { ComponentFactoryResolver, ViewContainerRef } from '@angular/core';

// ... inside a component method ...

constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

createDockSlot(viewContainerRef: ViewContainerRef) {
    const factory = this.componentFactoryResolver.resolveComponentFactory(DockSlotComponent);
    viewContainerRef.createComponent(factory);
}

createIgxGrid(viewContainerRef: ViewContainerRef) {
    const factory = this.componentFactoryResolver.resolveComponentFactory(IgxGridComponent);
    viewContainerRef.createComponent(factory);
}
```

### Response
#### Success Response (200)
Indicates that the component was successfully created and added to the DOM.

#### Response Example
(No specific response body for dynamic creation, the UI is updated directly.)
```

--------------------------------

### Install Ignite UI for Angular Schematics Globally

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/cli/getting-started-with-angular-schematics

Installs the Ignite UI for Angular Schematics globally using npm or yarn. This makes the schematics available for use with Angular CLI commands. No external dependencies are required beyond Node.js and a package manager.

```bash
npm i -g @igniteui/angular-schematics
```

```bash
yarn global add @igniteui/angular-schematics
```

--------------------------------

### Angular Application Module Setup (TypeScript)

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/spreadsheet-chart-adapter

Configures the root Angular module, importing necessary Ignite UI modules for Spreadsheet, Excel, and Spreadsheet Chart Adapter. It also declares the AppComponent and sets up basic browser and form modules.

```typescript
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ExcelUtility } from "./ExcelUtility";
import { IgxExcelModule } from "igniteui-angular-excel";
import { IgxSpreadsheetModule } from "igniteui-angular-spreadsheet";
import { IgxSpreadsheetChartAdapterModule } from "igniteui-angular-spreadsheet-chart-adapter";

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,

],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxExcelModule,
    IgxSpreadsheetModule,
    IgxSpreadsheetChartAdapterModule
],
  providers: [ExcelUtility],
schemas: []
})
export class AppModule {}
```

--------------------------------

### Define IgxGrid Component in Angular Template

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started

Demonstrates how to define and configure an IgxGrid component within an Angular component's HTML template. It includes basic setup for data binding, width, height, and filtering.

```html
<!-- app.component.html -->

<div style="text-align:center; margin-bottom: 20px;">
  <h1>
    Welcome to {{title}}!
  </h1>
</div>

<div style="text-align: center;">
  <igx-grid [data]="localData" width="600px" height="400px" style="margin: auto" [allowFiltering]="true">
    <igx-column field="Name" dataType="string"></igx-column>
    <igx-column field="Age" dataType="number"></igx-column>
  </igx-grid>
</div>
```

--------------------------------

### Angular Toast Component Setup

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/toast

Demonstrates the basic setup for the Angular Toast component, including necessary imports and component definition. It shows how to use the component declaratively in a template.

```typescript
import { Component } from '@angular/core';
import { IgxButtonDirective } from 'igniteui-angular/directives';
import { IgxToastComponent } from 'igniteui-angular/toast';

@Component({
    selector: 'app-toast-sample-2',
    styleUrls: ['./toast-sample-2.component.scss'],
    templateUrl: './toast-sample-2.component.html',
    imports: [IgxButtonDirective, IgxToastComponent]
})

export class ToastSample2Component { }
```

--------------------------------

### IgxTabs Component Template Example (Angular)

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/update-guide

Provides an example of the updated template structure for the IgxTabsComponent. It illustrates how to define tab items, headers, and content, utilizing `igxTabHeaderIcon` and `igxTabHeaderLabel` directives for header styling. The example also indicates the placement of `routerLink` on the header for navigation purposes.

```html
<igx-tabs>
    <igx-tab-item>
        <igx-tab-header>
            <igx-icon igxTabHeaderIcon>folder</igx-icon>
            <span igxTabHeaderLabel>Tab 1</span>
        </igx-tab-header>
        <igx-tab-content>
            <h1>Tab 1 Content</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </igx-tab-content>
    </igx-tab-item>
...
</igx-tabs>
```

--------------------------------

### Travis CI Configuration for NPM Access Token

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/ignite-ui-licensing

This configuration snippet shows how to set up npm registry and authentication in Travis CI using an access token. The configuration is added to the `before_install` step, appending the registry and authentication details to the `.npmrc` file.

```bash
before_install:
- echo "@infragistics:registry=https://packages.infragistics.com/npm/js-licensed/" >> ~/.npmrc
- echo "//packages.infragistics.com/npm/js-licensed/:_auth=$TOKEN" >> ~/.npmrc
```

--------------------------------

### Run Angular Application (Angular CLI)

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/index

Starts the development server for a standard Angular application using `ng serve`. This is used for applications created with the Angular CLI.

```bash
ng serve
```

--------------------------------

### Install Ignite UI for Angular

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/expansion-panel

Installs the Ignite UI for Angular library in your existing Angular project using the Angular CLI. This command ensures you have the necessary packages to start using Ignite UI components.

```bash
ng add igniteui-angular
cmd
```

--------------------------------

### Grid Context Menu Component Setup - TypeScript

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/selection

Sets up the Angular component for the grid context menu sample. It imports necessary Ignite UI modules, defines data, and initializes component properties for grid interaction and context menu state.

```typescript
import { Component, OnInit, ViewChild} from '@angular/core';
import { DefaultSortingStrategy, SortingDirection } from 'igniteui-angular/core';
import { IgxGridComponent } from 'igniteui-angular/grids/grid';
import { IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core';
import { DATA } from '../../data/nwindData';
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';

import { ContextmenuComponent } from '.contextmenu/contextmenu.component';

@Component({
    selector: 'app-grid-contextmenu-sample',
    styleUrls: ['./grid-contextmenu-sample.component.scss'],
    templateUrl: './grid-contextmenu-sample.component.html',
    imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, ContextmenuComponent]
})

export class GridContextmenuSampleComponent implements OnInit {
    @ViewChild('grid1', { read: IgxGridComponent, static: true })
    public grid1: IgxGridComponent;
    public data: any[];

    public contextmenu = false;
    public contextmenuX = 0;
    public contextmenuY = 0;
    public clickedCell = null;
    public copiedData;
    public multiCellSelection: { data: any[]} = { data: []};
    public multiCellArgs;

    constructor() {

```

--------------------------------

### Install Ignite UI Angular Gauge Dependencies (Command Line)

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/linear-gauge

This command-line snippet outlines the necessary steps to install the required Ignite UI Angular packages for using the gauge components. It includes installing the core package and the gauges package. Ensure you have Node.js and npm installed before running these commands.

```bash
npm install --save igniteui-angular-core
npm install --save igniteui-angular-gauges
```

--------------------------------

### Full CSS Grid Layout Example

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/wpf-to-angular-guide/layout

This is a complete CSS code example combining grid container properties (`grid-template-columns`, `grid-template-rows`) with item spanning properties (`grid-column`, `grid-row`). It provides a comprehensive setup for a CSS grid layout.

```css
.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 50px 50px 50px 50px;
}

.button1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.button7 {
    grid-column: 1 / span 3;
}
```

--------------------------------

### Angular Transaction Service with igxList Example

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/transaction-how-to-use

Demonstrates how to enable and use the `igxTransactionService` with the `igxList` component in Angular. This example shows adding new items, applying data transformations via pipes, and visually updating the list to reflect pending changes before committing them.

```typescript
import { Component, OnInit, ViewChild } from "@angular/core";
import { IgxTransactionService } from "igniteui-angular";
import { IgxListComponent } from "igniteui-angular";

@Component({
  selector: "app-transaction-list",
  templateUrl: "./transaction-list.component.html",
  styleUrls: ["./transaction-list.component.scss"],
  providers: [IgxTransactionService]
})
export class TransactionListComponent implements OnInit {
  @ViewChild("list", { read: IgxListComponent })
  public list: IgxListComponent;

  public data: any[] = [
    { Name: "Apple", Cost: 1.5 },
    { Name: "Bike", Cost: 500 },
    { Name: "Mouse (pet)", Cost: 75 }
  ];

  constructor(private transactionService: IgxTransactionService) {}

  ngOnInit(): void {
    // Initialize transaction service with data
    this.transactionService.setIgxFor(this.list, "id"); // Assuming items have an 'id' property
    this.data.forEach((item, index) => {
      this.transactionService.add({ id: index, ...item });
    });
  }

  addItem() {
    const newItem = { Name: "New Item", Cost: 100 };
    this.transactionService.add(newItem);
    // No explicit visual update here, handled by list's data binding or commit
  }

  commitTransactions() {
    this.transactionService.commit();
    // Data source is updated after commit
  }

  clearTransactions() {
    this.transactionService.clear();
  }
}

```

```html
<div class="container">
  <igx-list #list>
    <igx-list-item *ngFor="let item of data; let i = index" [id]="i">
      <div class="item-content">
        <span class="item-name">{{ item.Name }}</span>
        <span class="item-cost">Costs: ${{ item.Cost }}</span>
      </div>
      <div class="actions">
        <button (click)="editItem(item)">edit</button>
        <button (click)="deleteItem(item)">delete</button>
      </div>
    </igx-list-item>
  </igx-list>

  <div class="controls">
    <button (click)="addItem()">Add New</button>
    <button (click)="clearTransactions()">Clear Transactions</button>
    <button (click)="commitTransactions()">Commit Transactions</button>
  </div>

  <div class="transaction-log">
    <h5>Transaction Log</h5>
    <!-- Display transaction log here if needed -->
  </div>
</div>

```

```scss
.container {
  padding: 1rem;
}

.igx-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #eee;

  .item-content {
    display: flex;
    flex-direction: column;
  }

  .item-name {
    font-weight: bold;
  }

  .item-cost {
    font-size: 0.9em;
    color: #555;
  }

  .actions button {
    margin-left: 0.5rem;
    cursor: pointer;
  }
}

.controls {
  margin-top: 1rem;
  button {
    margin-right: 0.5rem;
  }
}

.transaction-log {
  margin-top: 2rem;
  border-top: 1px solid #ccc;
  padding-top: 1rem;
}

```

--------------------------------

### GitHub Actions Configuration for NPM Access Token

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/ignite-ui-licensing

This configuration snippet illustrates how to set up npm registry and authentication in GitHub Actions using an access token. It adds the registry and authentication commands to the `.npmrc` file before the `npm install` or `npm ci` command, utilizing secrets for the token.

```yaml
- run: echo "@infragistics:registry=https://packages.infragistics.com/npm/js-licensed/" >> ~/.npmrc
- run: echo "//packages.infragistics.com/npm/js-licensed/:_auth=${{ secrets.NPM_TOKEN }}" >> ~/.npmrc
```

--------------------------------

### Angular Module Setup for Ignite UI Components

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-highlighting

This TypeScript code configures the Angular application module, `AppModule`. It imports necessary Angular modules and specific Ignite UI modules like `IgxPropertyEditorPanelModule` and `IgxCategoryChartModule`. This setup enables the use of these components within the application.

```typescript
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";

import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts';
import { IgxCategoryChartModule } from 'igniteui-angular-charts';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxPropertyEditorPanelModule,
    IgxCategoryChartModule
],
  providers: [],
  schemas: []
})
export class AppModule {}

```

--------------------------------

### Install Ignite UI Dock Manager Package (Command Line)

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/dock-manager

Installs the `igniteui-dockmanager` package into an Angular project using npm. This is the first step required to use the Dock Manager component.

```cmd
npm install igniteui-dockmanager
```

--------------------------------

### Navigate to Project and Open in VS Code

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/wpf-to-angular-guide/create-first-angular-app

Changes the current directory to the newly created Angular project ('demo-app') and then opens the project in Visual Studio Code. This command assumes you have VS Code installed and configured in your system's PATH.

```bash
cd demo-app
code .
```

--------------------------------

### Angular Module Setup for Charts and Property Editor (TypeScript)

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-highlighting

Configures the Angular application module 'AppModule' by importing necessary Ignite UI modules for charts ('IgxCategoryChartModule') and layouts ('IgxPropertyEditorPanelModule'). This setup ensures that the chart and its associated property editor components are available for use within the application.

```typescript
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";

import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts';
import { IgxCategoryChartModule } from 'igniteui-angular-charts';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxPropertyEditorPanelModule,
    IgxCategoryChartModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
```

--------------------------------

### IgxBottomNav Component Template Example (Angular)

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/update-guide

Demonstrates the new template structure for the IgxBottomNavComponent, showcasing nested items with headers and content. It highlights the use of `igxBottomNavHeaderIcon` and `igxBottomNavHeaderLabel` directives for styling header elements. The example also shows how to attach `routerLink` to the header for navigation scenarios.

```html
<igx-bottom-nav>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon igxBottomNavHeaderIcon>folder</igx-icon>
            <span igxBottomNavHeaderLabel>Tab 1</span>
        </igx-bottom-nav-header>
        <igx-bottom-nav-content>
            Content 1
        </igx-bottom-nav-content>
    </igx-bottom-nav-item>
    ...
</igx-bottom-nav>
```

--------------------------------

### Basic ZoomSlider Component Setup in Angular

Source: https://www.infragistics.com/products/ignite-ui-angular/angular/components/zoomslider-overview

Provides a simple HTML template snippet to set up the `igx-zoom-slider` component in an Angular application. This example shows how to define the width and height of the ZoomSlider.

```html
<igx-zoom-slider
  width="100%"
  height="150px">
</igx-zoom-slider>
```
Tokens:
Raw