Posts

Showing posts from July, 2017

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

datatable.service.ts
====================

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

@Injectable()
export class DatatableService {

  constructor() { }

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

  dataTableData = [{
      'name': 'Vinod',
      'email': 'vinod@gmail.com',
      'regDate': '2017-01-09T14:48:34-08:00',
      'city': 'Delhi',
      'age': 34
  },
  {
      'name': 'Anita',
      'email': 'anita@gmail.com',
      'regDate': '2017-01-23T20:09:52-08:00',
      'city': 'Bangalore',
      'age': 32
  },
  {
      'name': 'Avnish',
      'email': 'avi@gmail.com',
      '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 });
this._http.post('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…