Category: Web development

• Angular Overview
• Angular Setup – build your first project !
• TypeScript Overview (coming soon)
• Data binding
  • Event binding
  • Two way data binding
  • Interpolation
  • Property binding
• First TypeScript Program
• Variable Declaration
• Type Assetions
• Arrow Functions
• Interfaces
• Classes
• Objects
• Properties
• Modules
• Constructors
• Access Modifiers

Angular Overview

Angular development framework is introduced by Google and currently millions of developers are using it. Releases started with AngularJs and then Angular2 , Angular4 and going on.AngularJS to Angular2 is major change.
Native support of Typescript from Microsoft make coding faster and maintainable. Native support from testing tools like Karma and Protractor making this as number 1 choice for dynamic web app automation.

What is NgModules in Angular?

NgModules are Angular class from Angular/core and helps to build modules in Angular application development.

For e.g. you wanted to develop a complex application where many modules are needed for easy implementation. Each module acts like mini application like cart module, creditCard module, etc.

so NgModules combines browser modules, other modules that you develop, decoration, bootstrap etc.

NgModules has declration , import, providers, bootstrap arrays.

Angular Setup

1. install latest nodejs from nodejs.org
2. Go to git bash/powershell ISE/CMD
3. type following commands,
4. install Angular : npm install -g @angular/cli
5. ng new my-newweb-app
6. ng g c myFirstModule (optional)
7. go to project folder ” my-newweb-app ” via commandline itself
8. type ng serve -o

Data Binding

Data binding makes the angular applications development very easy.

Data binding helps to do the data synchronization between the template(view/html) and class(typescript code)

There are 4 types of data binding in Angular and are following,

• Event binding
• Two way data binding
• Interpolation
• Property binding

What is Interpolation?

For interpolation, double curly braces are used in the template as below,

// app.html is the example for interpolation

<p>{{ name }}</p>  

and it stores the variables, then angular checks for the variable and updates the value assigned to the text.

The Typescript app.ts as below to display the name value to app.html.

// app.ts

@Component({
  templateUrl: 'app.html',
  selector: 'app-test',
})
export class AppComponent {
  name = 'Sharath C';
}

What is Property binding?

Property binding helps to set the property of a view element and it uses [] syntax as below

// app.html is the simple for the property binding.

<button [disabled]="buttonIsDisabled"></button>

TypeScript has to be coded as below to pass the property binding to view template. refer the app.ts as example for Typescript passing the property value

// app.ts
@Component({
  templateUrl: 'app.html',
  selector: 'app-test',
})
export class Component {
  buttonIsDisabled = true;
}

Building Angular Data Visualization using ngx-charts

ngx-charts is an open-source, declarative charting framework for Angular projects to build very simplified yet powerful reporting.

Angular will do all rendering and ngx-charts module supports different chart types like bar charts, pie charts, line charts, heatmap, treemap etc, altogether this combo will be useful for any Angular Data visualization projects.