Friday, February 16, 2018

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
    ....// 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
        <tr *ngFor="let item of arrayitem; let i = index">
            <ng-template [ngTemplateOutlet]="getTemplate('template1')" 
            [ngOutletContext]="{ $implicit: item, index: i }"></ng-template>
<ng-template #template1 let-item>
    //template1 html
<ng-template #template2 let-item>
    //template2 html

- 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. 

Tuesday, January 16, 2018

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

(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){}
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

Monday, January 8, 2018

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';
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

- {{}} 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

Wednesday, January 3, 2018

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

Monday, November 27, 2017

Working with Microsoft Cognitive Services - Emotions

Here is the way by which we can get Emotions of image which contains face and by consuming service of Microsoft Cognitive Service we can detect face along with its emotions.

- All you need for this service to consume is 1) api url 2) Subscription Key
- For this example use image having faces and make sure you pass image convert into byte stream and pass it to service call which will return faces in it and emotions of that faces

Below is the code for this

var client = new HttpClient();

var queryString = HttpUtility.ParseQueryString(string.Empty);
client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", Your Subscription Key);

var uri = uri + queryString;

HttpResponseMessage response;
Emotion[] emotionResult = null;

// Request body
byte[] byteData = image stream in bytes;

using (var content = new ByteArrayContent(byteData))
content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
response = await client.PostAsync(uri, content);
return response;

For this, please find below links to explore more
(1) Emotion API in C# Tutorial

(2) Emotion API

Tuesday, January 17, 2017

Apply Template to Kendo Grid Dynamically

Here is some code which will show you how you can apply template for kendo grid view.

(1) For this post, i assume that you have kendo grid with datasource is already applied and you only need to apply template dynamically.

(2) while initializing kendo grid, give your name of the template like below
rowTemplate: kendo.template($("#template").html()),

your template "template" will be placed at your html view.
- so for this, whenever your page get load it will automatically bind this template for your individual item
- for this view, if you want to show only template not column title then mark "visible:false" or "hidden:true" or both in you columns so it will just hide your column title on top and show only the item template for each item.

(3) to change your template, find event wherever you want to apply another template and in that event apply below code

var _grid = $('#grid').data('kendoGrid');
_grid.options.rowTemplate = kendo.template($("#othertemplate").html());

(4) so, wherever you want to apply another template just find grid and apply template then refresh grid will reflect your grid with new template applied on it.

Thursday, August 11, 2016

Working with using Sandbox Account

Here is the way by which we can work with You can also work with Create New Sandbox and then Login to Sandbox Account. The steps provided here are worked for me and for code implementation, I used "Authorize Credit Card" which worked for me to my Sandbox Account.

Few things that you need to have to work with this is
(1) API Login ID
You will find login id from your account under Login to Sandbox --> Account Menu --> Security Settings --> General Security Settings --> Click on "API Credentials & Keys" link

(2) Transaction Key
You will find this transaction key from your account under Login to Sandbox --> Account Menu --> Security Settings General Security Settings --> Click on "Manage Public Client Key" link

From the same menu Login to Sandbox --> Account Menu --> Security Settings General Security Settings, you can also set
(3) MD5-Hash

(4) Test Mode - While your account is in Test Mode there will be only processing occurred not exact operation will be performed, but to work with live account after testing to charge/authorize your payment it should be in live mode.

Alternatively, you can also set few more things like
(1) Receipt Page :- Used to send payment information with all required information like API Login Id/Transaction Key/Payment information etc.

(2) Response/Receipt URLs :- Used when operation has been completed from Step-(1) and it sends response of the transaction indicating whether it is success/failure of the transaction.

by navigating to Login to Sandbox --> Account Menu --> Transaction Format Settings --> Transaction Response Settings

Set all this stuff to your sandbox account, You will get C# Sample Code as well. In that set required information to the code and set method of payment which you want to do like you can Charge Credit Card, Authorize Credit Card and so on.

Once this configuration and code with your account configuration execute with code provided based on the method(Charge Credit Card, Authorize Credit Card) selected you will find that thing under Login to Sandbox --> Search Menu --> Unsettled Transactions on success of your transaction.

Once you will are success with Sandbox account, for your live account you can check same thing under "Test Mode" account and to check with your actual transaction make it "Live" from "Test" mode.

That's it for the implementation.

Thursday, August 4, 2016 Links

Authorize.Net enables merchants to authorize, settle and manage credit card and electronic check transactions via Web sites, retail stores, mail order/telephone order (MOTO) call centers and mobile devices.

Here is some links about the

(1) Authorize.Net Site

(2) Authorize.Net Sample Code

(3) AuthorizeNet/sdk-dotnet

(4) Direct Post Method(DPM)

(5) AuthorizeNet/sdk-dotnet DPM

(6) Authorize.Net - GitHub

(7) FAQs

(8) Transaction Reporting

(9) Environment Setup

(10) API Reference

Here is few more links for Working with Cold Fusion.

(1) Charge Credit Cards using and ColdFusion


(3) Need Help for ColdFusion SessionToken and AIM for

(4) Integration and Testing