Working with template in Angular 2

Here is the way by which we can work with template and assign template dynamically as well.

(1) First import statement
import { Component, ViewChild, TemplateRef } from '@angular/core';
notice here we have included ViewChild & TemplateRef as well and it is used for the same purpose to bind it with template

(2) Declare your component
@Component({
    ....// Place your component stuff here
})

(3) Declare your class
- first, declare your class then add below line of code for template
@ViewChild('template1') template1: TemplateRef;
@ViewChild('template2') template2: TemplateRef;

- add below function also
getTemplate(templatename) {
        return templatename == "template1" ? this.template1 : this.template2;
    }

- over here i am assuming there is an array of items you have and you are iterating by each item to bind that item data with template

(4) Now, at your html area
<table>
    <thead>        
        <th></th>
    </thead>
    <tbody>
        <tr *ngFor="let item of arrayitem; let i = index">
            <ng-template [ngTemplateOutlet]="getTemplate('template1')" 
            [ngOutletContext]="{ $implicit: item, index: i }"></ng-template>
        </tr>
    </tbody>
</table>
<ng-template #template1 let-item>
    //template1 html
</ng-template>
<ng-template #template2 let-item>
    //template2 html
</ng-template>

- ng-template - in ng-template, we are getting template to be used by calling method "getTemplate" and passing parameter "template1" to "ngTemplateOutlet" property. In this iteration it will get "template1" template and bind html in it with specified item

(5) currently, i have passed "template1" in "getTemplate" method to get template, but we can make it variable and based on assigned value to that variable appropriate template can be bind runtime. 

Working with Creating Custom Service in Angular JS

Here is the way by which we can create your own Custom Service. To create custom service you have already installed necessary stuffs and your basic application is working with default layouts.

(1) Under your created application, find your custom module which needs implementation of service to bind data, under that create a file with name of your service like "product.service.ts"

(2) since we need to get data from service we have to first import module "HttpClient" on top like 
- import { HttpClient } from '@angular/common/http';

and to make this service data behave like an Observable add below line 
- import { Observable } from 'rxjs/Observable';
for make service injectable add below import statement
- import { Injectable } from '@angular/core';

(3) to make it working any where we need to mark it as injectable with below statement
@Injectable

(4) coming to the next point, its service class that we need to add just like we have added to create our custom component and create constructor to fetch that data from service and use that private variable declared in constructor to your method
export class MyService{
private _myUrl = 'url'; - this could be your sevice url or url of your json file in your project
constructor(private _http: HttpClient){}
getMyData(){
return this._http.get(this._myUrl);
}
getMyDataString(): Observable{
return this._http.get(this._myUrl);
}
}
- getMyDataString will get data with of type IMy[] which is again a type of data which you are fetching from service so it will automatically map this with your type specified

(4) so, that's it for the creation of your custom service but to run this service we have to register it to your app.module.ts file before we can use it

(5) go to your app.module.ts file and import below
- import {HttpClientModule} from '@angular/common/http';
then in declarations part add 'HttpClientModule' to make it work in our component

(6) Upto this step we are done with our custom service, but to call this created service to your component is like below 
- import your service to your component
import { MyService } from './service url';
- create constructor to call/initialize your service like below
constructor(private _myService: MyService)
{}
- since we are calling service, so it could be in your init method only and for that Angular provides built-in "ngOnInit" method which could be used like below
import {Component, OnInit} from '@angular/core';
- then for your component class should inherit OnInit class like below
export class MyClass implements OnInit{
- since we are implementing OnInit and we need to implement this to our component class as well
ngOnInit: void{
this._myService.getMyDataStrong().subscribe(data => {
            this.mydata = data 
        },
}
this.mydata is your local variable which will hold service data and subsequent you can use this to your application to bind

Performing above steps will add your custom service to your application and you can bind/show your service data to your application

Working with Creating Custom Component in Angular JS

Here is the way by which we can create your own Custom Component. To create custom component you have already installed necessary stuffs and your basic application is working with default layouts. Also, you have selected your default working folder in Visual Studio Code.

(1) Under your created application, find src, under that create a folder with name of your component like "product"

(2) in product folder, add files .html & .ts like product.html & product.ts
- in product.html file, your html code will reside & in product.ts your code/logic will reside

(3) to bind any property with your newly added component build product.ts with below
import {Component} from '@angular/core';
@Component({
    selector:"product",
    templateUrl:"./product.html"
})
export class Product{
title: string = "Hello World!";
}
- for selector property, it will be reside under your default "app.component.html" file which will hold your product html data within this tag
- templateUrl, is the path of your html which will render once application get loaded

(4) for your html, you want to bind your "title" property like below

{{title}}

- {{}} is the directive used to bind/display your ts object value and it will display there

(5) Upto this step we are done with our custom component, but to render/display this to your application, it will be render with following steps
- go to "app.component.html" file, create tag with name "product"
- go to "app.module.ts", import your component with
import { ProductListComponent } from './products/product';
add class name of your component, in our case it is "Product". so add "Product" in "declarations" under @NgModule

Performing above steps will add your custom component to your application and this will show your "Hello World!". Also, the way here is manual by adding files and folders but you can also create same thing with a command for Step-(1) & Step-(2).

Angular Component

Working with TypeScript

Here is some links for TypeScirpt, what is TypeScript and why we are using it.

(1) TypeScript

(2) TypeScript : Javascript that scales

(3) TypeScript Quick Start

(4) TypeScript Documentation

(5) TypeScript downloads

(6) What is TypeScript?

(7) TypeScript - Overview

(8) Getting Started with Angular 2 using TypeScript

(9) Angular: Why TypeScript?

Working with NEW Angular

Here is some list of links to work with NEW Angular JS. Links are for the what is angular, examples, download editor+node js+visual studio code, & basics of type script.

(1) Angular

(2) Get Started

(3) Download Quick Start Example

(4) Download NodeJS

(5) Angular CLI

(6) List of Angular Modules/Library Packages

(7) Type Script Overview

(8) Visual Studio Code

(9) Bootstrap Link

(10) Mozilla Developer Events

Bind Simple Grid in AngularJS

Here is some line of code which demonstrates how can we bind data in AngularJS using grid.
(A) HTML Code: Required references for scripts and stylesheet for AngularJS are added

(B) Script code : Put your following code into main.js file


Above code for binding grid uses "ng-grid" directive used in AngularJS. So, that's it for the binding simple grid in AngularJS. 

Working with AngularJS with Get/Post calls

Here is some code which will show how can we use get/post calls when working with AngularJS. For these code i assume that you are aware of some basic knowledge of AngularJS code and syntaxes. Also, for this examples i used WCF service as data source which returns expected results as i want for my use so you can change code or source of service as per your need.

(1) Get With Single Value : This function returns single string value.
HTML :  

AngularJS : 
var sample = function ($scope, $http) {
        $http({
            url: '/MyService.svc/DoWorkWithString'
        }).success(function (data) {
            $scope.stringResult = data.DoWorkWithStringResult;
        });
    };

(2) Get With List of values : This function returns list of Name & Count which are processed at UI and displayed to view.
HTML : 

AngularJS : 
var ListController = function($scope, $http) {
        var resultPromise = $http.get("MyService.svc/ListItems");
        resultPromise.success(function(data) {
            $scope.ListItems = data.ListItemsResult;
        });
    };

For the post operation, both function simply returns string value which could be any success/error message that we can pass to UI after completion of any
operation on posting.
(3) Post with single parameter : posts one valueHTML : 




Angular JS :
function FrmController($scope, $http) {
$scope.errors = [];
$scope.msgs = [];
$scope.Click = function () {
$scope.errors.splice(0, $scope.errors.length); // remove all error messages
$scope.msgs.splice(0, $scope.msgs.length);
$http({ method: 'POST', url: 'MyService.svc/ListTest', data: JSON.stringify($scope.idTest) }).success(function (data) {
                if (data != '') {
                    $scope.msgs.push(data);
                } else {
                    $scope.errors.push(data);
                }
            });
};

(4) Post with two parameter
HTML : 

Angular JS :
function FrmController($scope, $http) {
$scope.errors = [];
$scope.msgs = [];
$scope.Click = function () {
$scope.errors.splice(0, $scope.errors.length); // remove all error messages
$scope.msgs.splice(0, $scope.msgs.length);
$http({ method: 'POST', url: 'MyService.svc/ListTestTwo', data: JSON.stringify({"param1":"value1","param2":"value2"}) }).success (function (data) {
                if (data != '') {
                    $scope.msgs.push(data);
                } else {
                    $scope.errors.push(data);
                }
            });
};

So, That's it for AngularJS with Get/Post calls.

Working with AngularJS

Here is some link which will introduces what is AngularJS, Also, there are some more link which describes basic functions used with AngularJS.

(1) AngularJS — Superheroic JavaScript MVW Framework

(2) What Is Angular?

(3) AngularJS Introduction

(5) AngularJS: Tutorial: -2 - Angular Templates

(4) W3School Angular JS 
AngularJS Tutorial 
AngularJS Introduction 
AngularJS Expressions - 
AngularJS Directives - 
AngularJS Controllers 
AngularJS Filters
AngularJS HTML DOM 
AngularJS Events 
AngularJS Modules 
AngularJS Application 

(7) Angular JS: API Reference