Techie Solutions.

Before starting this article you must have some basic knowledge on Angular 2 , typescript and how  to set up the Angular 2 application. If you are a newbie to Angular 2 then you can follow my below links . I am sure you will able to write the Angular 2 applications within 5 minutes. What is typescript ? http://whymysolutions.blogspot.com/2017/09/what-is-typescript.html Angular 2 project set up in Visual studio code and a Small Angular 2 application example. https://whymysolutions.blogspot.com/2018/09/angular2-application-in-visual-studio.html If you are comfortable with basic of Angular 2 then you can directly learn this article step by step. First we will describe the service creation and then we will use it in a small application. Step 1 : Create the service file     First we will create a file having the name as  m ydemoservice.service.ts . Here the *.service.ts* will same but the file name you can change.  Step 2 :  Imp...

base keyword is used to refer the Base class member . Base class is also called as Parent class and Super class as well. So when to use base Keyword. > To access the base class method which is overridden in child class . > If you want to access the base class constructor while creating the child class object . Lets explain it an example. Case-1 : public class PersonDetails {     protected string name = "John";     public virtual void GetInfo()     {         Console.WriteLine("MyName: {0}", name);     } } class EmployeeDetails : PersonDetails {     public string empid = "AA23";     public override void GetInfo()     {         base.GetInfo();         Console.WriteLine("Employee ID: {0}", empid);     } } class TestClass1 {     static void Main()     {         Employee...

I was trying to upload a file in client side and sending back the data from the client to Web API controller by angular service . Step 1 : I was doing it by. (It was bot the complete code )   function saveFile(file, cb) {     var readerObj = new FileReader();     readerObj .readAsDataURL(file);     readerObj .onload = function () {         savedFileDataAsBase64Format(readerObj .result, file.name,cb);     };     readerObj .onerror = function (error) {         alert("Error in uploading the file.");     }; Step 2 :     This is my Web api controller action method.        [HttpPost]         [Route("api/FileInput/SaveBase64FileData/{fileName}")]         public void SaveBase64FileData(string fileName, [FromBody]string fileData)         {     ...

In this article we will discuss about the component that we are using angular2 application . A angular component mainly consist of three things. 1. Class 2. Template 3. Metadata. We will discuss it one by one . Lets first add a component through Visual studio code. Basically the component is created with .ts extensions and we keep the name as filename.component.ts  . Now we will discuss it one by one. 1. Class : Like other object oriented programming language we declare the class . class is declared with a name and having some property , method and constructor as well. 2. Template :  Template is nothing but an view part of the application . What ever we want to render in the screen that should be mentioned in the template section . Basically the template section contains the HTML content. 3. Metaddata :  Its a extra data used to decorate the angular class for behaving the class properly. Angular2 uses several entries for metadata like annotation...

1. What should be the output of the following code snippet. const arr = [1, 2, 3, 4]; for (var i = 0; i < arr.length; i++) {   setTimeout(function() {     console.log('Index: ' + i + ', element: ' + arr[i]);   }, 4000); } Output :  Index: 4 ,  element: undefined Explanation : Actually the setTimeout function will create a closure function which have access to the upper local variable i . So once the for loop gets executed the setTimeout function is get executed and the i value goes up . So within this 1 sec the i value goes upto 4 and the arr[4] value would be undefined .

In this article we will simply write a small program in typescript . So if you are a newbie you can follow this program or you can start learning the typescript programming from this article as well. We will do it steps by steps. If you want to know about typescript please visit my blogpost  https://whymysolutions.blogspot.com/2017/09/what-is-typescript.html Step 1 :  To compile a typescript program we must need a typescript compiler and the compiler name is tsc compiler . You can get this in two ways                   . By downloading the npm (by node.js package manager)                   . By typescript's Visual studio plugins By default Visual studio 2017 and Visual studio 2015 update 3 supports typescript . Step 2 :         So for NPM users, to install the typescript npm install  -g typescript  Here g stands for globally  . So aft...

First of all you should have some idea on Javascript and Typescript as well.  So in this text  ".d.ts"  "d" stands for declarations and "ts" is for typescript file extensions . So here the some points on .d.ts file 1. Basically as per the naming conventions its a declarations file. 2. It can be created from a typescript file or from a Javascript file as well. 3. It act as a interface which contains only the declarations. 4. But conceptually we can say that it is just like a header file in C/C++ . when the third party user will use that file he can have only access to the exported  functions of the declarations file  not to the function  implementations. 5 . This file is get generated while tsc compiler compiled the typescript file and it keppes all the declarations in the .d.ts file and export those . If you want to know more about typescript then you can go through this like https://www.typescriptlang.org/docs/handbook/classes.html . If...

Interface is just like a contract. Syntactically it is same with class but fundamentally it is not same with class. Let's see an example. As C sharp does not support multiple interface so we use interface . So interface just contains the declarations  not the implementations .  So in a interface we can declare the method , property and event as  well.  By default an interface members are public. So when a class uses the interface then class should use all the members of the interface and the class should have the function body . So the interface can be used in two ways . 1. Implicitly.   Interface declarations : Interface Implementations: Instantiate Object : 2. Explicit implementations :   So in explicit implementation prefixing the interface name with method name as above. It is used mainly when class is implementing multiple interfaces or interfaces having the same name. So this article is just providing a basic kno...

In this article we will learn about how to set up Angular2 application in Visual studio code . So we will discuss it step by step. We are not discussing about the typescript , Angular 2 fundamentals or Visual studio code . You must have some basic idea before go through this project set up. Step 1:     First of all we need to install two things    a. node.js (You can download it form here    https://nodejs.org/en/ )    b. Visual studio code ( You can download it from here  https://code.visualstudio.com/download ) So these two things is must necessary for project set up. Step 2: So after installing it you can open the Visual studio code. Yow will see the screen like this.                             Step 3 :  Then please create a folder by clicking on the Open Folder button. Please follow the screenshots. Step 4 : Once you  ...

         ES6 is called ECMA Script2015 . As we know we do not have options in ES5 to declare the default parameters . So in ES5 we make the things like this var demo = function(name, address){ var name =  name || "John"; var address = address || "USA"; // Code } But in ES6 we can declare the default parameters like  var demo = function (name = 'John', address = 'USA' ) { // So here we can use the parameters directly. } Please  like this article if it really helped you . 

Those who are working on Visual studio IDE they might have faced this type of problem  while opening any existing project . Sometimes we toggled any file in visual studio but after closing the application we unable to see the toggled file.  Sometimes by rebuild the solution  the issue is get resolved .  So this problem/ issue is caused due to various reason but among those reason one of them is worked for me . Click on image to view it properly.  Here is my solutions. It worked for me . Please follow my steps. Step 1:    Please go to the physical folders/files of your solution . Just right click of the solution and from the options choose "Open Folder is File Explorer". Please check the attached Image. Step 2:     Then you will see the files like this. Then please check the if the "Hide Items" checkbox is checked or not . If not checked please check that one. Then you will   see .vs folder .       ...

Those who are working on Visual studio IDE they might have faced this type of error while opening any existing project . Sometimes by rebuild the solution or removing the break points the issue is get resolved .  So this problem/ issue is caused due to various reason but among those reason one of them is worked for me .  Here is my solutions. It worked for me . Please follow my steps. Step 1:    Please go to the physical folders/files of your solution . Just right click of the solution and from the options choose "Open Folder is File Explorer". Please check the attached Image. Please click on Image to view it properly Step 2:     Then you will see the files like this. Then please check the if the "Hide Items" checkbox is checked or not . If not checked please check that one. Then you will   see .vs folder .                               Please click on Im...

 This can be done in two steps. Step 1:  In this step we will add necessary Jquery files. <script src="<%= Url.Content("~/Scripts/jquery-1.5.1.js") %>" type="text/javascript"></script> <script src="<%= Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script> <script src="<%= Url.Content("~/Scripts/jquery.validate.unobtrusive.js") %>" type="text/javascript"></script>  Step -2 :   In this step to call the EnableClientValidation method. <% Html.EnableClientValidation(); %> After completing these two steps , you can see the validation message.

As we know we have different types of attributes in MVC5 . 1. Binding Attribute. 2. Handle Error  attribute 3. Remote attribute  4. Hidden Input attribute. In this Tips we will discuss about the Remote attribute. Let me give you an example. Basically When you we register  a user details or when we open a new account in google we check that given email is exits previously or not . If the given email is exists then a error message is appeared like " The given email is exits .Please provide a different one. " . So this email checking is happening without any Form Post request . So this type of request can be handled by " Remote attribute " in MVC5. Lets take an example here . We can apply to an Model property like in our case Email property.       public class User {     public string Name { get; set; }     [Remote("CheckEmail","User",ErrorMessage="Email is already exist")]     public s...

As we know MVC supports built in functionality to protect the  Cross site scripting and SQL injection as well.  But sometimes as per our requirements we need some HTML content as a Input like in blogging application. So to consider the HTML content as Input  we have different way to handle in MVC5 application . CASE - 1 :      In this case we will allow  to a  post type action method to accept the HTML content like     [HttpPost][ValidateInput(False)] public  ActionResult Create([Bind(Include =  "Id,Title,Description,Image,IsActive,PostedBy,PostedOn" )] Blog blog) {      if  (ModelState.IsValid) {         db.Blogs.Add(blog);         db.SaveChanges();          return  RedirectToAction( "Index" );     }   ...

Actually I really got the the exact error message while I am trying to add a controller scaffolding in MVC5.    Unable to retrieve metadata for 'CRM.DAL.Blog'. No connection string named     'BlogsEntities' could be found in the application config file.' First of all for this above problem we have lots of reason/solutions but for me this below solutions works for me .   So I checked both entity framework  config file and application config file and from there itself  I got the reason why I was getting the error.  Actually I had  the same content in the both the connection string but have different connection string name. It was resolved my issue .  This was content for App.config file . <add name=" BlogsEntities " connectionString="metadata=res://*/Blogs.csdl|res://*/Blogs.ssdl|res://*/Blogs.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=BIMALN4567\SQLSRV16;initial catalog=Blogs;i...

 As we belongs to Web application developer so most of the times we need the data of an event in our applications. So If we talk about the Angular we basically  send the event data from template and retrieve it in component property.          So we can send the data from template as a event object or by template reference variable. But most of the time we  need very less data from an control event but we send the  complete event object to back end. Lets discuss it by taking a small example @ @ComponentCom({ selector : 'app-Keyup' , template : ` <input (keyup)="onKey($event)"> <p>{{values}}</p> ` }) export class KeyUpComponent { values = '' ; onKey(event: any) { this .values += event.target.value + ' | ' ; } } So in this above example to get the value of the Input field we are sending the event object which is not needed As because If we really work on a big project unnecessarily it wil...