C# Basics: Delegates

Delegates are one of the most used features of C#. It allows you to pass a function as of function pointer. It is kind of same as function pointer of C++.

Put simply, delegates are the same as a function pointer of C ++. It refers to another function.

As noted in Microsoft official documentation:

“A delegate is a type that represents references to methods with a particular parameter list and return type. When you instantiate a delegate, you can associate its instance with any method with a compatible signature and return type. You can invoke (or call) the method through the delegate instance.”

Before get deeper into technical jargon about delegates, let us create first a delegate.

Let us talk through the above code.

  1. Just before main function in comment #1, we are declaring a delegate named AddDelegate. The signature of a delegate is very important, because a delegate can only refer functions matching the same signature.
  2. We created delegate with return type set to integer and it takes two input integer parameters.
  3. In comment # 2, we are instantiating delegate and passing add function as reference.
  4. In comment # 3 invoking the delegate.

On running above, you should get output as shown in the below image:

One important thing you need to keep in mind is that the signature of delegates must match with the signature of the function pointed by the delegate. Not only signature, but also return type should match.

Read full article on the Infragistics blog

Simplest way to share data between two unrelated Components in Angular

In Angular, it is essential to know how components communicate with each other. If you use a component inside another component, they create a parent child relationship.  In such a scenario, parent and child components communicate to each other in following ways:

  • @Input()
  • @Output()
  • Temp Ref Variable
  • ViewChild and ContentChild

You can learn in detail about @Input here   and @Output here. In this blog post, you will learn how data can be shared between components that are not related to each other using Angular Service.

To understand this using an example, create a service.  In the service, create a variable called count.  Service will share value of count variable across the components. Before we create count variable, let us talk about requirement again. We want all components to access last updated value of the data shared using the service.

For this, we have to wrap the count variable in RxJS subjects. To be precise let us use BehaviorSubject.

We are using BehaviorSubject for the following reasons:

  1. Data from the service should be multicasted. Each consumer component should access the same copy of the data. For this purpose, BehaviorSubject is used.
  2. We are not using observables, as they are unicast in nature. Subscribers will have their own copy of data.
  3. BehaviorSubject stores current value. Therefore, component will always read current value of data stored in BehaviorSubject.

Read full article on the Infragistics blog

Type of Undeclared Variable in JavaScript: What is it?

 

Have you ever thought, what is type of undeclared variable in JavaScript? I know, the first thing that might come to mind is: how can an undeclared variable have a type? Yes, in JavaScript it is possible.

To understand it, let us start with understanding types in JavaScript. There are seven built in types in JavaScript. They are as follows:

  1. null
  2. undefined
  3. boolean
  4. number
  5. string
  6. object
  7. symbol (added on ES6)

Each variable with assigned value has a type. Let us consider the code listed below:

As you can see in the above snippet, if there is no value assigned then type of variable is undefined.

So far so good, we saw that variable with no assigned value is undefined.  Let us consider the next code snippet:

We have created a variable koo and have not assigned any value to it.  Now both value and type of koo are set to undefined.

Read full article on the Infragistics blog

Simplifying Angular CLI for beginners

So you want to write your first Angular application, however setting up even a ‘Hello World’ Angular application is not easy. It requires many steps such as:

  • Setting up a TypeScript compiler, if you choose to use TypeScript
  • Configuration of Webpack or other module loader
  • Setting up local web development server
  • Installing and configuring dependencies
  • Configuring Unit Test environment
  • Configuring End to End Test environment
  • Working with Continuous Delivery
  • Working with Continuous Integration and many more

You can perform all these tasks manually, but this will require a strong understanding of all these concepts and will make starting a new project very time consuming. To solve this problem, Angular comes with the Angular Command Line Interface (CLI).

Learn more about it here: https://cli.angular.io/

All these tasks are taken care of by Angular CLI, which is a command line tool for creating, testing, and deploying Angular apps. It is recommended to use Angular CLI for creating Angular apps, as you do not need to spend time installing and configuring all the required dependencies and wiring everything together. It provides you with many boilerplates and saves your time.

It uses Webpack to include all the packaging, the loading module, importing functionality, BrowserLink and more. The entire Webpack configuration is done completely by CLI so you don’t have to worry about it. It also configures Jasmine and Karma for unit tests and TypeScript complier to transpile TypeScript file to JavaScript etc.  Let us see how we can work with Angular CLI.

Learn full article on the Infragistics blog

Completed 11 Years working in the Industry

image

I am very excited to share that today I completed 11 years working in the industry. It has been a learning and good challenging journey for me. During last 11 years, I have lived in three different cities and worked on six different technologies. I started my career as Software Engineer and currently working as a Developer Advocate for Infragistics.

image

Below in tabular form you can find my work experiences:

image

Besides working for various organization, since very beginning of my career, I have been writing articles. So far, in last 11 years I have authored more than 900 articles. You can read them on my blog: https://debugmode.net/.

I also authored a book on Angular called Angular Essentials.

clip_image002

In India, you can get it here: https://www.amazon.in/Angular-Essentials-Dhananjay-Kumar/dp/9388511247/ref=sr_1_1?ie=UTF8&qid=1553590814&sr=8-1&keywords=angular+essentials

Outside India, you can get it here : https://www.amazon.com/Angular-Essentials-Dhananjay-Kumar-ebook/dp/B07NL5RSDF/ref=sr_1_1?keywords=angular+essentials&qid=1553590883&s=gateway&sr=8-1

Due to my contributions, Microsoft awarded me prestigious Microsoft MVP Award on 1 April 2010. Since then, I have been getting Microsoft MVP Award each year. So far, I have been awarded 9 times. You can find my MVP profile here: https://mvp.microsoft.com/en-us/PublicProfile/4028360?fullName=Dhananjay%20Kumar

image

After getting Microsoft MVP Award, I started participating as speakers. I got chance to speak in various Microsoft User Group meets and conferences. So far, in last 11 years, I have delivered 77 free talks or workshops. You can find details about them here: https://debugmode.net/speaking/.

In 2016, I founded offline community geek97 , thorough that we hosted free workshops  in various Indian cities. We also mentor young talent to become speaker and community contributor.

Geek97 also organizes India’s largest Angular Conference ng-India https://www.ng-ind.com/ . You can see summary video of last ng-India here: https://www.youtube.com/watch?v=ccNBr-LX6tQ

image

I have been enjoying working with Infragistics for last 4 years, and in coming years, I am aspired to work on JavaScript language, PWA, Angular and AI. I hope, I am able to add values in your professional life through my evangelism, writing, teaching, and ng-India.

Thanks

Dhananjay Kumar

Winner of 9 Microsoft MVP Awards

Organizer ng-India

Presented in ng-India 2019

ng-India is India’s largest conference on Angular and JavaScript. It happened on 23 Feb in Gurgaon, India and was attended by around 350 developers around India. There were speakers from all across world teaching on various topics such as Ivy rendering, Webpack, RxJS, Change Detection in Angular, Directives, ViewEncapsulation, ngRx etc.

I also had an opportunity to deliver a 30 min talk on “You do not know about JavaScript object “. You can find recording of my talk here: https://www.youtube.com/watch?v=h9eW0zSiFaw&t=9s

 

I also did welcome note for the conference, which can be find here:

https://www.youtube.com/watch?v=1CEWDQyCrmc&t=1s

 

You can find all talks from ng-India 2019, on geek97 YouTube channel

https://www.youtube.com/channel/UC9qYCj-KbQYJ_1fmnuULr4Q/videos

 

Thanks for watching my talk. Let me know your feedback.

Video – Arrow Function in JavaScript

Arrow function was introduced in ECMA 6.  It is different than function statement or expression , as it does not have its own ‘this’ , and can also not be used as constructor.  Some important points about Arrow function are:

  • It does not have prototype property
  • It does not have arguments parameter
  • It does not have its own ‘this’
  • It can not be used with new operator

I have written a detailed article on Arrow function here :

https://www.infragistics.com/community/blogs/b/infragistics/posts/easy-javascript-part-6-arrow-functions-in-javascript

Watch this video to learn more about Arrow function

 

Please do  not forget to subscribe  geek97 YouTube channel geek97 YouTube channel for update about future videos.

 

Recap of 2018

Hi Reader,

THANK YOU, for being with me in 2018. It was another good year due to your Support, Trust, and Love. Besides, you, I would like to thank my employer Infragistics and my boss Jason Beres that they gave me opportunities to contribute to developer community.

If you are an Angular developer, you may want to check fastest native Angular component library Ignite UI for Angular.

In 2018, I wrote articles, delivered talks in small meetups or big conferences, organized conference of 400 developers.

In 2018, I mainly focused on JavaScript and Angular. I was able to do the following:

Organizing ng-India was a kind of learning yet motivating experience. Since this was first ever-Angular specific conference in India, I had my doubts. However, everything went as planned. We sold all 300 tickets in less than one month and was joined by speakers from all across India. From printing goodies, printing T-Shirts, doing social media, to receiving speakers at AirPort, to delivering two talks, I had fun in almost everything in ng-India.

See Photos of ng-India here

I must thank all sponsors, volunteers, and speakers of ng-India. Without them, it was never possible. A special thanks to Shivprasad Koirala  and   Questpond for their trust in ng-India. Yes, finally yet importantly a big thank to vibrant Angular community for all motivation.

I delivered 11 talks in 2018. To deliver these talks, I travelled to six Indian cities and a country Nepal. Out of 11 talks, five talks were in big conferences such as ng-India, ng-Nepal, Pune Developer Conference and five talks were kind of workshops hosted by me in various cities. I also did one webinar for ng-Frankfurt.

I wrote 28 articles mainly on Angular and JavaScript and wrote an Angular Essential E-Book. I hope, I was useful to you in 2018.

Also in 2018, I got Microsoft MVP Award, which was ninth MVP Award for me since 2010. I have been getting it every year since 2010. I also had opportunity to attend MVP Summit in Seattle.

If you are reading my blog since 2010 and wondering, how I look on 31 December 2018, below photo is taken today

 

With all happiness, I wish you Happy New Year 2019. Keep learning, writing, teaching, and implementing. I am very excited for 2019.  Happy Coding.

Thanks with Regards

Dhananjay Kumar

Simplifying Object.assign method in JavaScript

Read full article on the Infragistics blog

“In JavaScript, Object’s assign method copies source object’s own enumerable properties to a target object, and returns that target object “

There are two important keywords in the above sentence:

  1. Enumerable
  2. Own

Before we go ahead and understand purpose of Object.assign, it is essential that we really understand these two words, enumerable properties and own properties.  Let us see them one by one:

A JavaScript object could have either enumerable or non-enumerable properties. However, by default when you create property on an object, it is enumerable.  Enumerable  means you can enumerate through those properties. Let us understand it through code.

 

 

There are two properties in babycat object. By default both are enumerable, hence as the output of for..in loop, you will get both age and name printed.

Now let us change default enumerable behavior of age property using Object.defineProperty method.

 

We have changed enumerable of age property to false, so as output, you will get only color printed. Hence, age is no longer an enumerable property of babycat object.

Another keyword in above sentence is own properties. To understand it, you need to understand object prototype chain. All JavaScript objects are part of a prototype chain, hence can access properties of its prototype’s also.  So, own properties are those properties, which are particular to the object and not from the prototype chain.  Let us understand own properties through code examples,

In above code snippet, there are two objects cat and babycat. In addition, [[Prototype]] property of babycat object is set to cat object. When you print properties of the babycat object using for..in loop, you will find as output age, color, name printed as shown in below image:

What is happening here? Well, JavaScript prints all properties from the prototype chain. However, only age and color are, own properties of babycat object.

As of now, you should have understood own properties and enumerable properties in context of a JavaScript object.   So let us revisit first statement of this post,

“In JavaScript, Object’s assign method copies source object’s own enumerable properties to a target object, and returns that target object “

You should able to infer what exactly above sentence implies.  Consider code below :

 

 

 

 

 

Using Object.assign() method , we are copying cat object own enumerable properties to babycat object. Here, cat object is source and babycat object is target. You will get output printed as below:

The Object.assign() method uses [[Get]] on the source object and [[set]] on the target object and invokes setter and getter to perform the task. Essentially, it assigns properties values from source to target object. It does not create new property in the target object.

As of now you know purpose of the Object.assign() method. Let us examine some variations while copying properties from source object to a target object.

Same Properties in both target and source object

If target object has same properties as of source object, then Object.assign() method will  override target object properties.  To understand it consider code listing below:

 

 

 

 

There is age property in both target object and source object.  While copying properties in target object the Object.assign() method will override target object age property, hence you will get output as shown in the below image :

Read full article on the Infragistics blog