2. Creating the Application

It is time to install all dependencies and start the application.

Install the Angular CLI

Install the Angular CLI, if you haven't already done so.

npm install -g @angular/cli

Create a new application

You could use the internal commands of the Angular to create the base structure of the new project. With "ng new" and after that write the desired name of the project.

ng new jqwidgets-heroes

This way, you will receive a suitable file structure for your new project with a default application and supporting files.

Include Library

It is time to include jQWidgets library. For this purpose we will use npm installation 

npm install jqwidgets-scripts

This command will install the jQWidgets library to your node_module folder structure with the latest version.

File structure in the "node_modules":

jqwidgets-scripts

Additional version - includes "demos"

There is an option to install jqwidgets-framework which provide you the same head files. The main difference is it includes the demos as in our site.

The 'jqwidgets-scripts' provides the same version of jQWidgets which is more compact and we will use it for the tutorial purposes.

Serve the application

Starting the project.

cd jqwidgets-heroes
ng serve --open
initial result

The ng serve command builds the application, with the additional flag --open (shortly way -o) the application will be opened immediately when it is generated on the http://localhost:4200/. With every one change that it is done and finalized with 'save' command of the project's files, it will reflect the browser view. This is very useful to see the changes and to continue with the next task.

Angular Architecture

Basically, all we need and that we will change is contained in the src/app/ folder.

Folder structure

The folder structure should look in that way:

src/
  app/
    app.component.css
    app.component.html
    app.component.spec.ts
    app.component.ts
    app.module.ts

The page you see is the application shell. The shell is controlled by an Angular component named AppComponent.

Components are the fundamental building blocks of Angular applications. They display data on the screen, listen for user input, and take action based on that input.

Decorators

Decorators contain 'metadata' that describes how different elements in Angular will be compiled. Angular is collected by Modules, Components, Pipes, and Services. More about it can be found here. Also, on the official site.

First changes

It is time to start the favorite editor or IDE and navigate to the src/app folder.

files

There are 5 files. The "app.component.ts" file is what we are searching for. Change the value of the title property to "Heroes". 

title = 'Heroes';

This will change only the first part of the title. We want this to be the whole title. Open the component template file ("app.component.html") and delete the default template generated by the Angular CLI. Replace the existing HTML structure with the following line of HTML: 

<h1>{{title}}</h1>

The double curly braces bind the property data (app.component.ts) to the template (app.component.html). More about the different directions of the data binding can be found on this page (also, the "Two-way" data binding).

On the Next Chapter, we will include the jQWidgets component.

Final Result

On your browser, you should see "Heroes" but this is the beginning.

The app.component.html:

<h1>{{title}}</h1>

The app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Heroes';
}

In conclusion