Angular 2/4 and TypeScript Dynamically Access/Append HTML Nodes


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

export class DatatableService {

  constructor() { }

  getData(): Promise<any> {
   return new Promise((resolve, reject) => {
     setTimeout(() => {
     }, 100);

  dataTableData = [{
      'name': 'Vinod',
      'email': '',
      'regDate': '2017-01-09T14:48:34-08:00',
      'city': 'Delhi',
      'age': 34
      'name': 'Anita',
      'email': '',
      'regDate': '2017-01-23T20:09:52-08:00',
      'city': 'Bangalore',
      'age': 32
      'name': 'Avnish',
      'email': '',
      'regDate': '2017-11-19T19:11:33-08:00',
      'city': 'Pune',

How to Consum REST API from Angular 2/4 Web Application

Making POST request to fetch the data from API

import { Component } from'@angular/core'; import { Http } from'@angular/http'; import { contentHeaders } from'../common/headers'; import { Router } from'@angular/router';
@Component({ selector: 'app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] })
exportclass AppComponent {
constructor(public router: Router, private _http: Http) { }
registerUser(inputData: string) { let body = JSON.stringify({ inputData });'http://localhost:3000/api/<endpoint>', body, { headers: contentHeaders }) .subscribe( response => { console.log(response.json()); this.router.navigate(['home']); }, error => { alert(error.text()); console.log(error.text()); } ); }

Content Headers

import { Headers } from'@angular/http';
exportconst contentHeaders = new Headers(); contentHeaders.append('Accept', 'application/json'); contentHeaders.append('Co…

Adding new Component/Module in Angular 2 Cli Project

If you have created an Angular 2/4 project using Angular CLI now if you want to add new component/module you need need to perform the following changes:

For demo we are adding a home module to newly created Angular 2 CLI project.

Step 1: Add new folder inside the app called 'home'.
Step 2: Add home.component.ts | home.component.html | home.component.css | home.component.spec.ts | index.ts files
Step 3: Also add app.routing.ts inside the app folder.
Step 4: Now add new route to the app.routing.ts file:

import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './home/index'; const appRoutes: Routes = [ {path: '', component: HomeComponent}, {path:'**', redirectTo: ''} //otherwise ]; export const routing = RouterModule.forRoot(appRoutes);
Step 5: Modify the app.module.ts to add new component/module:

import { routing }        from './app.routing'; import { HomeComponent } from './home/home.componen…

Angular 2/4 NGX Translate Complete Implementation with Example

Angular 2/4 Application Internationalisation/Localisation (i18n) Example using Angular CLI

Step-1: Angular CLI Installation
npm install -g @angular/cliGenerating an Angular project via a development serverng new angular2-ngx-translate-demo-angular-cliServing an Angular project via a development serverng serveNavigate to http://localhost:4200/Create language JSON with the json values to convert to the values. Let's say we are suing English(en) and French(fr) languages for Angular 2 localization. angular2-ngx-translate-demo-angular-cli/src/i18n/en.json angular2-ngx-translate-demo-angular-cli/src/i18n/fr.json The sample content for any language file can be as per below structure: { "header": { "title": "Welcome to Angular 4", "head": "Here are some links to help you start", "list":"Tour of Heroes", } } and now convert the languages to the next JSON as fr.json: { "header": { "title"…

A Quick Tutorials on Angular 2 Platform Concepts and Examples

Angular 2 and Introduction Angular 2 is an open source JavaScript/TypeScript framework to build web applications in HTML and JavaScript/TypeScript and has been conceived as a mobile first approach.
Angular2 is faster and easier than AngularJS.It supports latest version of browsers and also supports old browsers.It is a cross platform framework.Angular 2 is mainly focused on mobile applications.Code structure is very simplified than the previous version of Angular.
If an application is a heavy load, then Angular2 keeps it fully UI responsive.It uses server side rendering for fast views on mobile.It works well with ECMAScript and other languages that compile to JavaScript.It uses dependency injection to maintain apps without writing too long code.Everything will be the component based approach.The TypeScript is a super set of JavaScript which is migrated to TypeScript and code written in TypeScript makes less prone to run time erros.
Set-up Development Environment

Angular 2/4 Content Translation using ngx-translate

NGX-Translate NGX-Translate is the i18n library for Angular 2 or 4 and used for template translation in various languages and switching between the languages.
It provides a service, a directive and a pipe to handle any dynamic/static template.
NGX-Translate is based on modular approach and customizable.
Implementation with ngx-translate The main module of the library is named core. A good practice to add a loader to load translations into application.
NGX-Translate Implementaion is available in the following modules:
core: The internationalization (i18n) library for Angular 2/4.http-loader: A loader for ngx-translate that loads translations with http calls.ngx-translate-website: NGX-Translate, the internationalization (i18n) library for Angular 2/4 NGX-Translate LoadersHttp Loader: Loads JSON translation files with http.Angular Universal Loader: Loads JSON translation files with fs instead of http.Po Loader: Loads .po files with http. NGX-Translate Implementation: Core Import the Tran…

Template Translation - Angular 2/4 and i18n

There are four phases in the i18n template translation process:
1. Marking the template element inside the component for translation. 
e.g. <span i18n>Hello i18n</span>
       <img [src]="Logo" i18n-title title="Angular4 Logo"/>
2. Angular i18n tool will extract the marked elements into standard translation source file.
3. Edit the file and insert target language. 
<trans-unit id="244bcd334kdda82506d258137adf23412c" datatype="html">

4. The compiler imports the translation files, replaces the original messages with the target you set in step 3 and generates fresh version of the app.

For more details visit the website documentation.