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

Angular Components: Pass by Reference or Pass by Value?

Read full article on the Infragistics blog

In Angular, you can pass data from parent component to child component using @Input() decorator, and a child component can emit an event to a parent comment using @Output() decorator.

The purpose of this blog post is to explain you whether it is pass by reference or pass by value in context of @Input() and @Output decorator.

To start with, let us assume that we have two components, as listed below:

As you see, we have two input properties.

  1. In data property, we will pass an object.
  2. In count property, we will pass a number.

From the AppComponent, we are passing value for both properties, as shown below:

As you see,  we are passing data (object) and count( number) to the child component. Since data is being passed as object,  it will be “Pass by Reference” and, since count is passed as number,  it will be “Pass by Value”.

Therefore, if passing an object, array, or the like,  then it is Pass by Reference, and for primitive types like number, it is Pass by Value.

Read full article on the Infragistics blog

Simplifying Different Types of Providers in Angular

An Angular Service provider delivers a runtime version of a dependency value. Therefore, when you inject a service, the Angular injector looks at the providers to create the instance of the service. It is the provider that determines which instance or value should be injected at the runtime in component, pipes, or directives. There are many jargons involved here, so to understand purpose of types of providers, let us start with creating a service. Let’s say we have a service called ErrorService, which is just logging the error message.

Now, we can use this service in a component, as shown in the listing below:

We are importing the service, passing it in the providers array, and injecting it in the constructor of component. We are calling the service method on click of the button, and you can see error message passed in the console. Very simple right?

Here, Angular will rely on the values passed in the providers array of component (or module) to find which instance should be injected at the run time.

“A Provider determines that how object of certain token can be created.”

So, when you pass a service name in providers array of either component or module, like below:

Here, Angular is going to use token value ErrorService and, for token ErrorService, it will create object of ErrorService class. The above syntax is a shortcut of the below syntax:

The provide property holds the token that serves as the key for

1. locating the dependency value.

2. registering the dependency.

The second property (it is of four types) is used to create the dependency value. There are four possible values of second parameter, as follows:

1. useClass

2. useExisting

3. useValue

4. useFactory

We just saw example of useClass. Now, consider a scenario that you have a new class for better error logging called NewErrorService.

useExisting

Now, we want that instead of the instance of ErrorService, the instance of NewErrorService should be injected. Also, ideally, both classes must be implementing the same Interface, which means they will have same method signatures with different implementation. So now, for the token ErrorService, we want the instance of NewErrorService to be injected. It can be done by using useClass, as shown below:

The problem with the above approach is that there will be two instances of NewErrorService. This can be resolved by the use of useExisting.

Now there will be only one instance of NewErrorService and for token ErrorService instance of NewErrorService will be created.

Read full article on the Infragistics blog

Step by Step for Creating Your First Angular Element

Read full article on the Infragistics blog

Angular Elements allow us to create reusable Angular components, which can be used outside of the Angular application. You can use an Angular Element in any other application such as normal HTML, React, etc. Essentially, Angular Elements are normal components, which are packaged as Custom Elements. You can learn more about Custom Elements here.

We will keep things simple in this post and, in a step by step manner, learn to create a basic Angular Element. So, let us get started.

Step 1: Installation

Create a new project using Angular CLI

ng new demo1

Once the project is created, change directory to demo1 and install Angular Elements. For that, run an npm command, as shown below:

npm install @angular/elements

To work with older browsers, we need polyfill. So, let us install that also as shown below:

npm install @webcomponents/custom-elements

After installing polyfill, open polyfills.ts file and add these two entries:

Continue reading full article on Infragistics blog