Delivering two talks at Devfest Gandhinagar 2019

Ahmadabad is always very close to me as I did my first public speaking in this city back on 24 July 2010.  Since then I have been trying to do at least one workshop or talk each year here, so continuing the ritual, I am again coming to Ahmadabad/Gandhinagar on 13th October to speak in   Devfest Gandhinagar 2019

You can follow all happening of the conference here or follow them on twitter here

a

I am excited to deliver two talks. They are as follows:

Talk 1: JavaScript Interview Questions Made Simpler

Usually they ask these questions in a JavaScript interview.

  1. What is the value of ‘this’?
  2. What are the invocation patterns?
  3. Various ways to pass parameters to a function?
  4. Explain Hoisting?
  5. How to make objects properties read only?
  6. How to make objects properties private?
  7. Explain constructor and prototype
  8. What is __proto__
  9. How will you create inheritance in JavaScript?
  10. ES2015
    1. Arrow functions
    2. REST parameters
    3. Spread operator
    4. Default parameters etc.

I will try to simplify 5-7 topics from the above listed topic in a simpler and entertaining way.  This talk is for everyone and your main take away from this session would be at least that you will never forget what is value of ‘this’ 😉

Talk 2:  Simplifying RxJS in Angular for everyone

We all use subscribe() method in an Angular application to fetch data from the API. However, very rarely know beyond that, I will try to take you beyond obvious.  In this talk, I will start from the beginning of RxJS in Angular and then end at the best practices of using it.

  1. Using of, from creational functions
  2. Sharing data between two unrelated components
  3. Fetching data from the API
  4. Using async pipe
  5. Using other operators such as a map, forkJoin etc.

This talk is for the developers who are already working on the Angular.

I am excited to see you in both of my talks.  When you see me in the event, do not hesitate to say Hi and take a selfie together.

I wish to thank Yatendrasinh Joddha, Parth Jansari, Arif Khoja  , Bhavesh Valand, and the whole team of GDG Gandhinagar for inviting me. I hope to meet the expectation of audiences and teach them a few things.

Announced- geek97 step by step Angular Bootcamp on 5-6 October in Gurgaon

To attend register here: https://forms.gle/JSbp3yknZ7scr9BP7

Many of you asked me to host a Bootcamp in Delhi/NCR. I got motivated by your constant request, hence decided to give a try. For geek97, I am hosting the next Bootcamp in Gurgaon on 5-6 October.

Details

b1

To attend register here: https://forms.gle/JSbp3yknZ7scr9BP7  and for any clarification send me a mail at debugmode[at]outlook.com

Agenda of the training is as below,

Lecture 1: Getting started and Data Binding – 1.5 Hrs

  • Interpolation
  • Event Binding
  • Property Binding
  • Two-way data binding
  • Using directives such as *ngFor, *ngIf
  • Using inbuilt type
  • Creating a custom search pipe

Lab – Displaying Data in a table from local JSON array using *ngFor

Lecture 2: Component Communications – 2 Hrs

  • @Input
  • @Output and EventEmitter
  • Temp Ref Variable
  • Understanding Life Cycle Hook when the component has @Input decorated properties
  • Introducing Change Detector

Lab:  Master – Details Application using component communication

Lecture 3:  Services and Providers – 1.5 Hrs

  • Creating first service
  • Understanding Dependency Injection
  • Using @useclass, @useexisting, @usevalue, @usefactory
  • Understanding injector tokens
  • Share data between two unrelated components

Lab:  creating global variable and inject to whole application

Lecture 4:   Custom Attribute Binding – 0.5 Hrs

  • Custom Binding
  • @HostBinding
  • @HostListener

Lecture 5:  Reactive Forms – 1.5 Hrs

  • Template Forms and Reactive Forms
  • Creating Reactive Forms
    • FormControl
    • FormGroup
    • FormBuilder
    • FormArray
  • Custom Validators
  • Conditional Validators
  • setValue and patchValue

Lecture 6:   Introducing RxJS – 2.5 Hrs

  • What is reactive way of thinking
  • Observables and subscribe
  • RxJS operators
    • Tap
    • Map
    • Take
  • Different types of subjects
  • Fetching data using observable – subscribe
  • Async pipe
  • Handling errors
  • Declarative Pattern of Data Retrieval

Lecture 7:  Change Detection – 1 Hrs

  • Different strategy
  • How to optimize CD for better performance

Lecture 8:  Routing basics and Lazy Loading – 1.5 Hrs

  • Adding Routing modules
  • Adding feature modules
  • Lazy loading modules
  • Passing value from one route to another route
  • Route Guards

Final Project – Creating End to End CRUD operation using REST API – 3 Hrs

  • Creating Main Modules and Feature Modules
  • Adding service to perform
    • Create
    • Update
    • Read
    • Delete
    • Handling Error
  • Using service in various components
    • Add product
    • Delete Product
    • Product Details
    • Update Product
  • Adding authentication
  • Discussing how we can make this application architecture better

Closure – 1 Hrs

  • Discussion and doubts
  • Angular 8 features
  • Deciding the learning path

At the end, everyone will get a geek97 certificate.

b2

If required we can help you finding better opportunities also on basis of this training. We keep getting requirements, and on your approval, we will recommend you.

To attend register here: https://forms.gle/JSbp3yknZ7scr9BP7  and for any clarification send me a mail at debugmode[at]outlook.com

If you can not afford 4000 INR and really need training contact me at 9717098666 . I will see, how can I help.

Hosted Angular Bootcamp in Jabalpur for Taritas software

Angular is becoming more popular with each passing day in India. Companies of different sizes are using it to deliver the project for their customers.  One such company Taritas  . They have offices at multiple locations and with clients all across the world.

They invited me on 21-22 September to host a 16 hrs long Bootcamp for their engineers on Angular.

In the Bootcamp, we covered the following topics

  • Data Binding
  • Component Communications
  • Custom Attribute Directives
  • Pipe and async pipe
  • Reactive Forms
  • Change Detection
  • Services and Providers
  • Sharing data using subjects
  • Data-driven strategies and async pipe
  • Lazy loading
  • Best practices

The engineers of Taritas were very motivated after becoming geek97 certified Angular Developer.

Some of the testimonials from the attendees was,

“It was our pleasure to attend the training on Angular by super talented DJ this session was very interactive and easy to understand …. We had an amazing experience
Thank you so much for sharing your knowledge with us 😊”

~Prati Tembhre

 

“Got a chance to attend DJs 16 hours training program on Angular 8 and that was a very informative session. Everything was explained in such an interesting way that the topics or concepts seemed to be simple and easy to catch. Would love to be a part of such sessions again 😊”

~ Meenal Tiwari

“A Big Thanks to DJ Sir For inspiring us to learn Angular and JavaScript.
His workshop was filled with knowledge and Positivity.
Thanks a lot for training us.”

~Shubham Pawaiya

 

After 16 hrs, we had open discussions and certificate distributions.

Also, they are hiring more Angular developers. To know more about the opportunity reach out to me. I thank Supreet, Neha, Atul, Varun, Shilpi, and the whole team for this opportunity and hospitality.

To hose similar workshops for your team reach me at debugmode[at]outlook.com

 

 

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

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

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

Video – Step by Step Component Communications in Angular

In Angular, components communicate to each other to share data such as object, string, number, array or html.

Parent and Child Components can communicate to each other in following ways

Parent and Child Components can communicate to each other in following ways

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

 

You can learn about these concepts in step by step video below.  If you like the video , do not forget to subscribe to our YouTube Channel for notification about future video tutorials.

 

 

 

You can read articles related to above video here :

Communication Between Components Using @Input() in Angular

Understanding @Output and EventEmitter in Angular

Free Download – Angular Essentials E-Book to help you getting started

Are you new to Angular and just starting with it? Well, I have written a small eBook for you, which you may find useful.

You can download it free from here

clip_image002

This book does not contain everything of Angular. It just contains topic you need to get started with Angular.

In these 10 pages E-Book, you will learn about:

  1. Angular’s basic architecture: NgModules, Components, Templates, Directives, Two-way Data Binding, Services, Dependency Injection, and Routing
  2. Setting up an environment: Downloading Angular with the Angular CLI tool; must have Node.js and npm installed
  3. Components: What you see in the browser. Consists of the following parts: a TypeScript class called the Component Class, an HTML file called the template of the component, and an optional CSS file for styling the component
  4. Data binding: Determines how data will flow in between the component class and component template
  5. Component communication: For sharing data (object, string, number, array, HTML)
  6. Directives: Creating DOM elements and changing their structure or behavior in an Angular application

Download it free from here

As I told you, this book is only 10 pages long and it contains basic minimum you need to get started with Angular. Currently I am writing a complete Angular Essentials Book, send me your feedback and I will try to incorporate them. You can reach me at debugmode[at]outlook[dot]com

I hope you find Angular Essentials Ref Card useful. Thanks!

Content Projection in Angular Element with Slot in Angular 7.0

In this article, we will learn how to project content in an Angular Element. If you are unfamiliar with the following,

  • Shadow Dom
  • ViewEncapsulation
  • Content Projection

I recommend you read the articles below before moving forward:

 

As of now, you know that we use ng-content to carry out content projection as shown in the next listing:

You can also project content as shown in the next listing:

The challenge with the above approach is, “If you use GreetComponent as your Angular Element,” you will not able to project content. To understand this better, let us start with converting GreetComponent to an Angular Element.  Here you can Learn Step by Step tp Create Angular Element.

After converting GreetComponent as Angular Element, AppModule should look like the listing below:

Now you can use GreetComponent on index.html as shown in the listing below:

Upon running the application, you will find that the <h2> element has not been projected to the Angular Element GreetComponent.

Read full article on the Infragistics blog

Simplifying Angular Data Binding to .NET Developers

Read full article on the Infragistics blog

At my job, I get the opportunity to talk to many .NET developers who want to learn Angular. Often, I’ve seen that they bring their .NET skills and work to map that in the learning of Angular. While the effort and drive to learn is there Angular is not .NET.

Since Angular is a pure JavaScript library, I’ll simplify basic but important concepts of Angular to .NET developers in this post series.  In this article, we’ll learn about Data Bindings in Angular. Luckily, Data Binding in Angular is much simpler than in .NET.

First, Let’s revise some of data binding techniques in .NET. For example, in ASP.NET MVC, you do data binding using a model. View is bound

  1. To an object
  2. To a complex object
  3. To a collection of objects

Essentially, in ASP.NET MVC, you do data binding to a model class. On the other hand, in WPF, you have data binding modes available. You can set the mode of data binding in XAML, as follows:

  1. One-way data binding
  2. Two-way data binding
  3. One-time data binding
  4. One-way to source data binding

If you are following MVVM patterns, then you might be using INotifyPropertyChanged interface to achieve two-way data binding. Therefore, there are many ways data bindings are achieved in world of .NET.

Data binding in Angular, however,  is much simpler.

If you are extremely new in Angular, then let me introduce you to Components. In Angular applications, what you see in the browser (or elsewhere) is a component. A component  consists of the following parts:

  1. A TypeScript class called Component class
  2. A HTML file called Template of the component
  3. An optional CSS file for the styling of the component

 

Read full article on the Infragistics blog