en-USfr-FR

Create an Angular 5 application with Visual Studio 2017 and add Infragistics component

This tutorial shows how to create an Angular ASP.NET Core Web project and how to use Ingragistics Ignite UI Angular component.

Prerequisites

  1. Visual Studio 2017 (15.7.4)

  2. Microsoft ASP.NET Core 2.1 SDK

  3. NPM 

Create an ASP.NET Core Web Site

  1. Select File => New Project
  2. Choose Templates=> Visual C# => Web => ASP.NET Core Web Application



Select Angular, ASP.NET Core 2.1., uncheck "Configure for HTTPS" and click OK.

The Solution is created and you can see the Angular Application in the solution explorer under "ClientApp" directory

Start the application using the "Debug" menu or simply press "F5".

The needed NPM packages are restored and the application is launched using IIS Express or other browser depending on what 

browser you have choose in the Debug target  toolbar menu.

Let's add a Component to experiment the infragistic angular controls.

  1. Right click on the "ClientApp/src/app" folder (which contain the Angular Component) and add a folder "infragisticssample".
  2. Right click on the "infragisticssample" folder and add a new item, a "TypeScript file" : "infragisticssample.component.ts" (It is recommended to use the Angular best practices Naming convention).

  3. Replace the content of the file with 

    import { Component, Inject } from '@angular/core';
    import { Http } from '@angular/http';
    @Component({
      selector: 'infragisticssample',
      templateUrl: './infragisticssample.component.html'
    })
    export class InfragisticsSampleComponent
    {
    }
    You’re declare a new "infragisticssample" component that can be included on a page using the "infragisticssample" selector and it will load the "infragisticssample.component.html" template.
  4. Right click on the "infragisticssample" folder and add a new item, a "HTML Page" : "infragisticssample.component.html" (It is recommended to use the Angular best practices Naming convention). 
    <h1>Infragistics components</h1>
    <p>This component demonstrates Infragistics controls.</p>
    thus you’re designing a very simple html page.
  5. Modify the "app.module.ts" file that acts are the main component and in which you can declare all components that can be used in the application. Add these lines. 

    ...
    import { InfragisticsSampleComponent } from './infragisticssample/InfragisticsSample.component';
    ...
    declarations: [
    ...
    InfragisticsSampleComponent,
    ],
    imports: [
    ...
     { path: 'infragisticssample', component: InfragisticsSampleComponent }
    ]),
    ...

    You then import the new component, declare it so it can be used anywhere in the App.

    The "path:" directive add a new route to give the ability to navigate to the component with the URL "infragisticssample" (http://localhost:36296/infragisticssample) :

     

    For a more user friendly usage, we will add a new item to the navigation bar and as all is component in Angular,

    you will not be surprise to find a nav-menu component in the app folder.

    All we have to do is to modify the html file of this component.

    Add these lines at the end of the tag list of the navigation menu :

     ...
                <li [routerLinkActive]='["link-active"]'>
                  <a [routerLink]='["/infragisticssample"]' (click)='collapse()'>
                    <span class='glyphicon glyphicon-tasks'></span> Infragistics samples
                  </a>
                </li>

     

    The new UI is displayed :

Adding Infragistics Angular component to the application

  1. install the corresponding npm package. As we are using Angular 5, we need to force the installation of the 5.x.x version of Infragistics package. Launch a command line, go to the application folder "ClientApp" and type the installation command "npm install igniteui-angular@5.3.1 --save".
    You can verify in the "package.json" file that the correct directive was added and that the correct package is now in the node_modules folder. 
  2. For being able to use the Ignite-UI component you need to import them in the app.module.ts file as usual 
    ...
     // Module needed for certain Infragistics component
     import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     // import the IgxDatePickerModule that will be used
     import { IgxDatePickerModule } from 'igniteui-angular/main';
    ...
     imports: [
     ...
         BrowserAnimationsModule,
         IgxDatePickerModule,
     ...
     ])
          ],
    ... 

    You have to add the module for each control you want to use (look at the Infragistics documentation). Here we will use only the date picker.

  3. Now you have to modify the "angular-cli.json" file to import some styles and some needed javascript features  
    ...
    "styles": [
     ...
     "../node_modules/igniteui-angular/styles/igniteui-angular.css"
     ],
    "scripts": [ "../node_modules/hammerjs/hammer.min.js" ],
    ...

     

  4. Add the needed icon that Ignite UI Angular uses in the "style.css" file : 
     /* You can add global styles to this file, and also import other style files */
    @import url('https://fonts.googleapis.com/icon?family=Material+Icons');

  5. Finally you have to add the Date picker component in the html file of the infragisticssample component  
     ...
    <h3>Please pick a date: </h3>
    <igx-datePicker item-width="50%" [value]="date" [formatter]="formatter"></igx-datePicker>


  6. Run the Web application in your browser and enjoy.

 

You can download the project on GitHub here.