The “ag” part of ag-Grid stands for “agnostic”. The internal ag-Grid engine is executed in TypeScript with zero dependencies. ag-Grid supports Angular through a wrapper component. The wrapper lets the user to use ag-Grid in the application like any other Angular component.

In this article, we will walk you through the essential steps to add ag-Grid to an existing Angular project, and configure some of the essential features of it.

Adding ag-Grid to the project:

ag-Grid and its Angular wrapper are distributed as NPM packages, which should work with any common Angular project module bundler setup. Let’s follow the Angular CLI instructions – run the following in the developer’s terminal:

npm install -g @angular/cli
ng new my-app –style scss –routing false
cd my-app
ng serve

Further, add the ag-Grid NPM packages and run the following command in my-app:

npm install –save ag-grid-community ag-grid-angular

Now, let’s add the ag-Grid Angular module to the app module:

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

import { AppComponent } from ‘./app.component';
import { AgGridModule } from ‘ag-grid-angular';

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AgGridModule.withComponents([])],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

The next step is to add the ag-Grid styles – import them in styles.scss:

@import “~ag-grid-community/dist/styles/ag-grid.css”;
@import “~ag-grid-community/dist/styles/ag-theme-balham.css”;

The above code imports the grid “structure” stylesheet (ag-grid.css), and one of the available grid themes: (ag-theme-balham.css). The grid ships have some different themes; pick one that matches the project design.

Next, let’s declare the basic grid configuration. Edit src/app.component.ts:

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

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

columnDefs = [
{headerName: ‘Make’, field: ‘make’ },
{headerName: ‘Model’, field: ‘model’ },
{headerName: ‘Price’, field: ‘price’}
];

rowData = [
{ make: ‘Toyota’, model: ‘Celica’, price: 35000 },
{ make: ‘Ford’, model: ‘Mondeo’, price: 32000 },
{ make: ‘Porsche’, model: ‘Boxter’, price: 72000 }
];
}

The above code represents two vital configuration properties of the grid – the column definitions and the data. In this case, the column definitions contain three columns, each column entry stipulates the header label and the data field to be displayed in the body of the table.

Finally, let’s add the component definition to the template. Edit app/app.component.html and remove the scaffold code:

<ag-grid-angular
style=”width: 500px; height: 500px;”
class=”ag-theme-balham”
[rowData]=”rowData”
[columnDefs]=”columnDefs”
>
</ag-grid-angular>

This is the ag-grid component definition, with two property bindings – rowData and columnDefs. The component also accepts the standard DOM style and class.

The post AG-GRID IN ANGULAR appeared first on Pro-Tek Blog.

As many of you know Angular 6 is already out. At outset, this release of Angular 6 is lighter, faster, and easier. Developers will start loving it more as it makes their development future much easier. In this article we are going to cover the latest major release, Angular 6, which focuses on making Angular smaller and faster to use.

Let’s go through the major changes in Angular 6.

IMPROVED SERVICE WORKER SUPPORT

Angular 6 now supports the configuration of navigation URLs in Service Workers. The service worker will readdress navigation requests that don’t match any asset or data group to the specified index file.

By default, a navigation request can have any URL and URLs containing a file extension in the last path segment. Sometimes it is great to be able to configure different rules for the URLs of navigation requests (e.g. ignore specific URLs and pass them through to the server).

Now, the developer can specify an optional navigationUrls list in ngsw-config.json. Before that, the service worker would enter a degrade mode where only current clients would be served if either the client or server was offline while trying to fetch ngsw.json. In Angular 6, the service worker remains in the current mode till connectivity to the server is restored.

NG UPDATE

The new CLI command analyzes your package.json and uses its knowledge of Angular to recommend updates to users application. It will help the developers to adopt the right version of dependencies, and keep dependencies in sync. In addition to updating dependencies and earl dependencies, ng update will apply needed transforms to your project.

CLI WORKSPACES

CLI v6 now offers support for workspaces containing various projects, such as numerous applications or libraries. CLI projects will now use angular.json instead of .angular-cli.json for build and project configuration. Each CLI workspace will have projects, each project will have targets, and each target can have configurations.

FORMS VALIDATION IN ANGULAR 6

Before, ngModelChange was always emitted, earlier the underlying form control was updated.

If the user had a handler for the ngModelChange event that checked the value through the control, the old value would be logged instead of the simplified value. This is not the case if the user passes the value through the $event keyword directly.

TOKEN MARKING FOR RUNTIME ANIMATION CONTEXT

In Angular 6, it’s now possible to define which animation context is used for a component at runtime. A token is provided as a marker to determine whether the component is running a BrowserAnimationsModule or NoopAnimationsModule context at runtime.

SCHEMATICS

Schematics is a new shell that is used by Angular CLI to create custom templates. The Angular team has always been keen on improving developer productivity which explains the birth of schematics. With schematics the developer can easily create Angular libraries.

First, install the necessary schematic tools:

Next, create a new angular-cli project:

Finally, the developer can just run schematics like so:

A new lib directory will be generated inside the src folder. The lib directory ships with a sample demo and then build tools necessary for a typical Angular package.

THE VERDICT

Angular 6 came full with new features and significant improvements. Thanks to the Angular team on making Angular faster and better to use.

Have you upgraded to Angular 6 yet? What are your opinions? Did you notice any major improvement? Let us know!

The post WHAT’S NEW IN ANGULAR 6 appeared first on Pro-Tek Blog.

AngularJS is one of the most popular JavaScript frameworks accessible today. AngularJS major goal is to bridge the development process which makes it great for prototyping small applications, but its power allows scaling to full-featured client-side applications. The combination affluence of development, breadth of features, and performance has led to wide implementation, and wide implementation comes with many common drawbacks. This list captures common AngularJS mistakes, so explore this article and know the major mistakes done by developers while coding with Angular.

USING NGONCHANGES TO SPOT QUERY LIST CHANGES

In Angular 1, if the user wanted to be notified when a value changed, the user has to set a $scope.$watch and physically check for changes in each digest cycle. In Angular 2, the ngOnChanges links greatly and streamlines this process. Once the user defines a ngOnChanges method in his/her component class, it will be called whenever the component’s inputs change.

But, the ngOnChanges method executes only when the component’s inputs change -especially, those items the user have included in his/her inputs array or explicitly labeled with an @Input decorator. It will not be called when items are added or removed from @ViewChildren or @ContentChildren query lists.

If the user wants to be alerted for changes in a query list, then the user should not use ngOnChanges. In its place, the user should subscribe to the query list’s built-in observable, it “changes” property. As long as the user do so in the proper lifecycle link, the user will be alerted whenever an item is added or removed.

@Component({ selector: ‘my-list’ })
export class MyList implements AfterContentInit {
@ContentChildren(ListItem) items: QueryList;

ngAfterContentInit() {
this.items.changes.subscribe(() => {
// will be called every time an item is added/removed
});
}
}
CALLING DOM APIS DIRECTLY

There are very few circumstances where manipulating the DOM directly is necessary. Angular 2 provides a set of leading, high-level APIs such as queries that one can use instead. Leveraging these APIs confers distinct advantages:

• It is possible to unit test the application without touching the DOM, which removes difficulty from testing and helps the user tests run faster.
• It decouples the user’s code from the browser, allowing the user to run the application in any rendering context, such as web workers or outside of the browser completely.

When the user manipulates the DOM manually, the user will miss out the above advantages and ultimately end up writing less expressive code.

QUERY RESULTS IN THE CONSTRUCTOR

While playing around with queries, it is easy to fall into this ploy.
@Component({…})
export class MyComp {
@ViewChild(SomeDir) someDir: SomeDir;
constructor() {
console.log(this.someDir);    // undefined
}
}

When the console logs are “undefined”, the developer might assume the query is not working or the developer itself constructed it imperfectly. It is important to remember that query results are not yet available when the constructor executes.

BINDING TO THE NATIVE “HIDDEN” PROPERTY

In Angular 1, if the user wants to adjust the visibility of an element, the user can use one of the Angular’s built-in directives, such as ng-show or ng-hide

Angular 1 example:

In Angular 2, template syntax makes it available to bind to any native property of an element. This is very powerful and opens up a number of possibilities. One option to bind to the native hidden property, which is similar to ng-show, and sets the display to “none”.

Angular 2 [hidden] example:

<div [hidden]=”!showGreeting”>

Hello, there!

</div>

At first sight, binding to the hidden property seems like the closest cousin to Angular 1 ng-show. However, there is one “!important” difference.

ng-show & ng-hide together handles visibility by adjusting “ng-hide” CSS class on the element, which sets the show property to “none” when applied. Importantly, Angular controls this style and postscripts it with “!important” to assure that it always overrides any other display styles set on that element.

THE VERDICT

AngularJS is a great framework that continues to grow with the community. AngularJS is still a growing concept, but hopefully by following these pacts some of the major pitfalls of scaling an AngularJS can be averted.

The post TOP MISTAKES DEVELOPERS DO WHILE CODING WITH ANGULAR appeared first on Pro-Tek Blog.

The year 2015-2017 saw a host of new frameworks from the house of JavaScript. Though several of their offerings were unsuccessful to make a resounding impact, Angular and React survived the test of time to become the go to frameworks for successful Angular development. With several frameworks have made headway in the world of application development, Angular has found a special place as one of the best open-source JavaScript frameworks.

This article focusses on the basic comparison between Angular2 and Angular4 and whether or not it is good enough to make a switch. First, let us explore in detail the various features and highlights of Angular2 to be able to make a practical comparison with its successor.

ANGULAR-2

The Angular version two was primarily aimed at the development of mobile applications allowing developers to create a cross platform environment for their applications. The key highlight of Angular 2 was the removal of various supplementary modules from Angular’s core which simplified the process thus improving the performance. The supplementary modules have now found their way to Angular’s ever-growing library of modules where the users can effectively choose and select the components they want while leaving out the redundant components.

Angular 2 was specifically aimed at ES6 and “evergreen” modern browsers. The advantageous point of these browsers is that these automatically update to the most recent version. While developing for these browsers, Angular 2 provides various hacks and workarounds that allow the developers greater freedom build their code. Angular 2 eliminates several limitations that existed previously.

ANGULAR 2: FEATURES AND PERFORMANCE

Angular 2 was developed on AtScript, which is a superset of ES6. Traceur compiler combined with ES6 was employed to process Angular that enables it to generate ES5 code. It utilizes TypeScript syntax to create runtime type assertions instead of compiling time tests. However, it is not compulsory to use AtScript to compose Angular apps. The user can alternatively use plain JavaScript or ES5 to attain effective results. Let us explore deeper into the various key features of Angular 2.

RENEWED DEPENDENCY INJECTION (DI)

Dependency Injection was one of the important factors that set Angular apart from its primary competitors. Dependency Injection refers to a program design pattern where a specific program commendably gets hold of its dependencies instead of producing them. Dependency Injection is very helpful in cases of modular development and element isolation. Despite that DI has also faced several obstacles since the era of Angular 1.x. Angular 2 finally came with the answers to the problems along with some of the missing features such as child injectors and lifetime/scope control.

ANNOTATION

One of the major advantages of Atscript is that it supplies useful tools that can help functionally link metadata. This eases out the process of building the object instances by supplying the essential material into the DI library. The information entered will check for the relevant metadata when a function is called, or a class instance is created. A developer can also easily override the parameter information by hitting the “Inject” annotation.

CHILD INJECTORS

A child injector has the privileges such that it inherits all the functionalities possessed by its parent injectors, but it also comes with a capacity to override them at the child level. This capability provided by Angular 2 gives the developer a free hand to call out and mechanically override several components under a variety of scopes as the situation would demand.

ANGULAR4

Even though Angular 2 was a significant improvement from its predecessors, Angular 4 takes it forward with some new features and improved capabilities.

Let us study one by one how Angular 4 has secured itself an edge over Angular 2 and how AngularJS development organizations can leverage it.

FASTER AND COMPACT

Angular 4 applications are smaller as they consume less space and run faster than its older versions. The team working behind Angular are constantly making developments on a regular basis to iron out the inconsequential technical glitches that may exist.

SIGNIFICANT VIEW ENGINE IMPROVEMENT

Angular 4 series have come up with several changes which also include several view engine twists to diminish the size of the generated code for various components by as much as 60 percent. This update version has claimed to reduce huge production bundles to mere kilobytes.

ENHANCED *NGIF AND *NGFOR

One of the main features that Angular boasts of are an improved template binding syntax. The improvement of the *ngIf and *ngFor comes after significant criticism for the lack of the “else” and “if-then-else” clause. Developers can employ an if/else design syntax, or introduce local variables such as “if” to unroll an observable.

THE VERDICT

Angular has come a long way since Angular 1.x to reach the version that prevails today. This evolution of Angular is expected to continue to bring in more revolutionary features to make the development team’s job easier. Even though Angular can be slight challenging to adapt at first, but those who are familiar with the functioning of Angular 2, will find it simpler to adopt Angular 4.

The post ANGULAR 2 VS ANGULAR 4 appeared first on Pro-Tek Blog.

A hash table is a data structure that produces an associative array. A key is mapped to certain values through the use of a hash function. They are often used for tasks such as database indexing.

The post DESCRIBE A HASH TABLE appeared first on Pro-Tek Blog.

Namespacing is a technique employed to avoid collisions with other objects or variables in the global namespace. Its Important for helping organized blocks of functionality in the application into easily manageable groups which can be uniquely identified.
 
 
 
 
 
 
 
 
 
 
 

The post WHAT IS NAMESPACING AND WHY IS IT IMPORTANT? appeared first on Pro-Tek Blog.

The Angular team continues to publish new versions of Angular according to the Semantic versioning. Angular version 4 was released on March 16, six months’ later version 2 was released. In the last three months two minor versions and a lot of patch versions were born with new stuff. Angular 4.2 is already here and we have a huge number of new features added for making animations easier and powerful. Part of them are defining the reusable animations, querying for inner elements, animating when routes change and building/controlling an animation using AnimationBuilder. So, let’s dive deep-in and know about the new features in Angular 4.2.

WHAT’S NEW?

• Angular Forms now includes validators for min and max attributes.
• Developer can now bootstrap a component directly by passing an element reference to the bootstrap method of an ApplicationRef.
• Enhanced i18n tooling including MissingTranslationStrategy and location notes in xliff2 files.
• New compiler flag alwaysCompileGeneratedCode is available in opt-in, and will be turned on by default in the future.

NEW FEATURES IN ANGULAR 4.2
Forms

Two new validators joins the existing requirement, minLength, maxLength, email, and pattern. Min and Max helps the developer to validate whether the input is at least or at most the value specified or not.

<input type=”number” [(ngModel)]=”user.age” min=”0″ max=”130″>

Update (2017-06-17): The min and max validators have been temporarily removed from Angular in version 4.2.3, as they are a breaking change. They’ll return in a major version, maybe 5.0.0.

Angular Animations

There are huge number of new features to make working with Animations easier and more powerful. Some of the new feature are:

• Configure options and set input variables within animations.
• Define reusable animations using animation().
• Stagger multiple elements within an animation using stagger().
• Enable queried elements to trigger their own animations.
• Orchestrate a full-blown animation when routes change.
• Programmatically build/control an animation using AnimationBuilder

A new query function has been introduced in the animation DSL, allowing to query the elements in the template. It uses querySelectorAll behind the scene, so the developer can use an element or a class as parameter. It also supports pseudo-selectors, and that opens a few interesting possibilities!

For example, you can now easily animate elements in a NgFor:

<div [@races]=”races?.length”>

<button class=”btn btn-primary mb-2″ (click)=”toggle()”>Toggle</button>

<div *ngFor=”let race of races | slice:0:4″>

<h2>{{race.name}}</h2>

<p>{{race.startInstant}}</p>

</div>

</div>

WITH THE FOLLOWING ANIMATION

trigger(‘races’, [

transition(‘* => *’, [

query(‘:leave’, [

animate(1000, style({ opacity: 0 }))

], { optional: true }),

query(‘:enter’, [

style({ opacity: 0 }),

animate(1000, style({ opacity: 1 }))

], { optional: true })

])

])

Now, every time an element is removed from the races array, it will slowly fade out. And when an element enters, it will slowly fade’s in.

Animation has also been added to build reusable animations. The syntax allows to have dynamic parameters with default values. The developer need to use a reusable animation, they can call useAnimation, and override the default parameters if they want to.

FINAL WORD

That’s all for this release! The focus was mainly on animations and tests, and the team is also working on reducing the bundle size of the applications, with the help of the Google Closure Compiler. We think we are going to learn more about that very soon!

The post ANGULAR 4.2 appeared first on Pro-Tek Blog.

AngularJS is a structural framework for dynamic web apps. It lets the user to use HTML as their template language and extends HTML’s syntax to express their application’s components clearly and concisely.

There are many conceptual and syntactical differences between Angular 1 and Angular 2. In this article, we are going to explain you the major differences between the above frameworks.

1) AngularJS 1 is easy to setup. All you need to do is to add a reference to the library and you are good to go. Whereas AngularJS 2 is dependent on other libraries and it requires some efforts to set up.

2) Angular 2 provides more choice for languages. The developer can use any of the languages from ES5, ES6, TypeScript or Dart to write Angular 2 code. Whereas, Angular 1 supports only ES5, ES6, and Dart.

3) Angular does not have in-built with mobile support, whereas Angular 2 is mobile oriented.

4) In Angular 1 there is no usage of controllers and $scope, whereas in Angular 2 con-trollers has been replaced with components. Angular 2 is component based.

ANGULAR 2 COMPONENTS USING TYPESCRIPT

import { Component } from ‘angular2/core';

@Component({

selector: ‘prodsdata’,

template: `

<h3>{{prods.name}}</h3> `

})

export class ProductComponent {

prods = { name: ‘Prod1′, quantity: 1 };

}

* Angular 1 consists of two ways to bootstrap angular. One is using ng-app attribute and other through code.

<script>

angular.element(document).ready(function() {

angular.bootstrap(document, [‘myApp’]);

});

</script>

SAY GOODBYE TO NG-APP

Angular 2 doesn’t support ng-app. Say goodbye to ng-app. The only way to support angular is through code.

import { bootstrap } from ‘angular2/platform/browser';

import { ProductComponent } from ‘./product.component';

bootstrap(ProductComponent);

The bootstrap is a function; it takes starting component which is also a parent component of the angular application.

* The Structural directives syntax is changed. ng-repeat is replaced with *ngFor in Angular 2.

ANGULAR 1 STRUCTURAL DIRECTIVES

<ul>

<li ng-repeat=”technology in technologies”>

{{technology.name}}

</li>

</ul>

<div *ngIf=”technologies.length”>

<h3>You have {{technologies.length}} technologies.</h3>

</div>

* In Angular .2 local variables are defined using a hash (#) prefix.

* In Angular 1, ng-model is used for two-way data binding, but in Angular 2 it is replaced with [(ngModel)].

* One of the major advantages of Angular is Dependency Injection. Angular 2 consists of DI but, there is a different way to inject dependencies. As everything is a class in Angular, so DI is achieved through a constructor.

THE VERDICT

Though the above two frameworks are similar, there are some essential differences in these two processes. Angular 2 is a really big step forward. And it certainly requires some efforts to migrate from Angular 1 to Angular 2. Both the tools have equal importance when compared with each other on the basis of functionality. The choice is always depends on the need and the requirements of the project.

The post ANGULAR 1 Vs ANGULAR 2 appeared first on Pro-Tek Blog.

Create pipe class
import { Pipe, PipeTransform } from ‘@angular/core';
@Pipe({name: ‘filter1′})
export class ExponentialStrengthPipe implements PipeTransform {
transform(value: number, exponent: string): number {
return exponent; // do something with your vallue
}
}
After that in your component add and include pipe
import { Component } from ‘@angular/core';
import { ExponentialStrengthPipe } from ‘./exponential-strength.pipe';
@Component({
selector: ‘power-booster’,
template: `

<h2>Power Booster</h2>

<p>Super power boost: {{2 | filter1}}</p>
`,
pipes: [ExponentialStrengthPipe]
})
export class PowerBoosterComponent { }

The post HOW TO CONVERT ANGULAR JS1.X FILTER TO ANGULAR JS 2.0 PIPES? appeared first on Pro-Tek Blog.