Forem: Anubhab Mukherjee

ContentChild and ContentChildren in Angular

Anubhab Mukherjee — Tue, 25 Jan 2022 18:21:24 +0000

Today we will learn about ContentChild and ContentChildren in Angular.

On a high level ContentChild and ContentChildren are property decorators. They are used to query or helps to get a reference to the projected content. If you are not aware of Content Projection I would highly recommend you to go through this post.

Lets see our playground first.
We have a MyCardsComponent component where few items are projected from the parent component (AppComponent).
The parent Component Template Code-

<app-my-cards>
    <div #header ngProjectAs='header'>Card Header</div>
    <span id='card-sub-header'>Card Sub Header</span>
    <div class="card-body">
        This is a card Body!!!
    </div>
    <footer title="card-footer">
        Card Footer.
    </footer>
</app-my-cards>

The Child Component Code-

<ng-content select='header'></ng-content>
<ng-content select='#card-sub-header'></ng-content>
<ng-content select='.card-body'></ng-content>
<ng-content select='[title]'></ng-content>

And the output till now -

Here we will try to get the reference of the projected content in the Child Component to do some manipulation (say adding some style). In this scenario ViewChild won't be helpful as it will not work. For this we need a new decorator called ContentChild/ ContentChildren decorator.

Lets paste in the below code in the MyCardsComponent-

  @ContentChild('header')
  cardHeaderData: ElementRef = {
    nativeElement: undefined
  };

So here in the above code we are defining a property cardHeaderData and decorating with ContentChild
cardHeaderData is of type ElementRef (A wrapper around the native element inside of a View)
Now the next question can come - okay we can access the element but where we can get hold of the element for the first time and how to prove that we got hold of the element?
For this there is another lifecycle hook provided by Angular - the ngContentInit().
This method is called once the projected content is initialized.

Note
Projected content will be accessible for the first time in the ngAfterContentInit lifecycle hook method.

So lets implement the function and see how it looks like. Paste in the below code -

  ngAfterContentInit() {
    this.cardHeaderData
    debugger;
  }

In the devtool when we inspect we can see the below -

Here 👆🏻 we can see that the reference of the element (which was projected) we can get using the ContentChild decorator and its a native element.
Once we get hold of the element we can do manipulation like adding a style programmatically and many more cool things. To change the style lets add the below code -

  ngAfterContentInit() {
    this.cardHeaderData.nativeElement.style.color = 'blue';
    this.cardHeaderData.nativeElement.style.backgroundColor = 
'yellow';
    this.cardHeaderData.nativeElement.style.fontSize = '24px';
  }

And you will see the below output -

So using the property we can target the nativeElement and set the color and do all the DOM tricks.

Here we are targeting a HTML element (like div), but lets see what if we project a Component how to access that.

So lets create a component ContentChildDemo. You should be a ninja by now to create a component using CLI & even if you are 1 step away from becoming a ninja you can follow this post.
And use the selector in app.component.html file like below -

<app-my-cards>
 <app-content-child-demo></app-content-child-demo>
</app-my-cards>

& in the my-cards.component.ts file lets add the below code -

<ng-content></ng-content>

You will see the below output.

So the content-projection is working 😊
Now lets create a property and decorate with ContentChild.

  @ContentChild(ContentChildDemoComponent)
  contentChildDemoProperty: ContentChildDemoComponent | undefined;

Here above you can see the ContentChildDecorator is accepting the name of the component you are trying to reference (In this case ContentChildDemoComponent), but in the first demo we were passing the reference (header)

Note:
1️⃣ When accessing Component we just pass the name of the component.
2️⃣ When accessing a projected component, using the property you can even call a method present inside that projected content component.
3️⃣ When accessing a native element we need to add a reference and pass the same reference to the ContentChild

Now lets understand when the ContentChildren comes into play.
Say in the above example we are projecting (passing from the parent) only 1 ContentChildDemoComponent. But what if a scenario arises where you are passing multiple components and you need to access them?

Something like below -

<app-my-cards>
 <app-content-child-demo></app-content-child-demo>
 <app-content-child-demo></app-content-child-demo>
 <app-content-child-demo></app-content-child-demo>
</app-my-cards>

In the above case ContentChild will return only the first match (very important remember this point).
If you want to get hold of all the components projected you need to use the ContentChildren decorator.

Lets add a new property like below -

  @ContentChildren(ContentChildDemoComponent)
  contentChildrenDemoProperty: 
   QueryList<ContentChildDemoComponent> | undefined;

And in the ngAfterContentInit method -

  ngAfterContentInit() {
    this.contentChildrenDemoProperty
    debugger;
  }

And if we run the application and debug we will see the below -

Here above we can see a QueryList (An unmodifiable list) is being returned. You can loop through and access every item. Same powerful heavy lifting you can do on all the matching items in the QueryList.

That's all for now.

Hope you enjoyed reading the post

If you liked it please like ❤️ share 💞 comment 🧡.

Coming up ChangeDetection
So stay tuned.

I will be tweeting more on Angular JavaScript TypeScript CSS tips and tricks.

So hope to see you there too 😃

Cheers 🍻
Happy Coding

Content Projection in Angular

Anubhab Mukherjee — Sat, 22 Jan 2022 18:29:37 +0000

Today we will learn about a very important concept called Content Projection. It's very useful concept and helps to make an application dynamic.

Let's dive in by creating our playground first -
Lets create a component called my-cards and use it in the app.component.html file (Hint 😉 using the selector)

Now lets try out a simple exercise. Add the below code in the app.component.html file -

<app-my-cards>
    <span>
        This is some content in between the card selector!
    </span>
</app-my-cards>

If you open the browser to check the output you will see the text you typed in between the selector i.e. This is some content in between the card selector! is not visible/ not getting displayed.

The output -

So the span element which is the child of the selector is the content and it's also the child element. So if we combine both the term we get content child. The span element is the content child.

Now as we saw earlier in the demo the content child is not getting displayed. So in order to display the content child we need to project it. Or in simple term we need to have a special placeholder (in the child component - MyCardsComponent) which will catch/ receive the value and display it.

This special placeholder is ng-content.

So now let's update the MyCardsComponent's template to have-

<ng-content></ng-content>

and now you will see the below output -

So what exactly happens ?
The child content here in this case the span gets projected in the ng-content. So ng-content acts as a placeholder.

Now what if you need multiple placeholders? For example you will pass a content that would sit on the card-header another content as the card-body and another in the card-footer???
For that we need to use something called select - It is very powerful.
The select can accept a class, id, attribute or an element. Confused?

Lets see a quick example. Paste in the below code in the app.component.html file -

<app-my-cards>
    <header>Card Header</header>
    <span id='card-sub-header'>Card Sub Header</span>
    <div class="card-body">
        This is a card Body!!!
    </div>
    <footer title="card-footer">
        Card Footer.
    </footer>
</app-my-cards>

And in the my-cards.component.html file i.e. MyCardsComponent's template file paste in the below code -

<ng-content select='header'></ng-content>
<ng-content select='#card-sub-header'></ng-content>
<ng-content select='.card-body'></ng-content>
<ng-content select='[title]'></ng-content>

The output -

So the 1️⃣ first ng-content has a selector which matches an element/ tag - the header tag
2️⃣ Second ng-content selector matches an id card-sub-header
3️⃣ Third ng-content selector matches a class card-body
4️⃣ Fourth ng-content selector matches an attribute title

There can also be a scenario where instead of using header tag (in the above example) you need to use a div tag like below -

<app-my-cards>
    <div >Card Header</div>
    <span id='card-sub-header'>Card Sub Header</span>
    <div class="card-body">
        This is a card Body!!!
    </div>
    <footer title="card-footer">
        Card Footer.
    </footer>
</app-my-cards>

Then the header will not work right? And suppose you don't have the option to change the card component also. Then what's the solution ???

ngProjectAs comes to the rescue!!!

Paste in the below code -

<app-my-cards>
    <div ngProjectAs='header'>Card Header</div>
    <span id='card-sub-header'>Card Sub Header</span>
    <div class="card-body">
        This is a card Body!!!
    </div>
    <footer title="card-footer">
        Card Footer.
    </footer>
</app-my-cards>

Here you can see the first line is the div tag. And we have used ngProjectAs='header'. In this case Angular will consider the selector as header and the output will work as it is.

That's all for now.

Hope you enjoyed reading the post

If you liked it please like ❤️ share 💞 comment 🧡.

Coming up ContentChild and ContentChildren.
So stay tuned.

I will be tweeting more on Angular JavaScript TypeScript CSS tips and tricks.

So hope to see you there too 😃

Cheers 🍻
Happy Coding

Understanding ViewChild and ViewChildren in Angular

Anubhab Mukherjee — Fri, 21 Jan 2022 12:12:08 +0000

Today we will learn a very important and powerful concept in Angular - the ViewChild and ViewChildren

On a high level ViewChild and ViewChildren both are property decorators.
With this decorators we can -
1️⃣ Access an element present in the same template (html) of the component
2️⃣ Access the child component

So we can say it's used to access elements present in the template.

The Syntax
@ViewChild(selector, {read: readValue, static: staticValue}) propertyName

I will touch upon the syntax as and when we need them.

So what we will achieve at the end of this demo?
We will create a counter component. It will have a counter initialized to 0. There will be two methods one to increase the counter by x amount and the other to reduce by x amount.
The component methods will be accessed or you can say called from the parent only.

Lets setup our playground first.
Lets create a component called my-counter and make it a child component of app-component. If you are wondering how to make a child component? Please have a look at this post before moving ahead.

Once we create the component, lets open the my-counter component ts file and add the below code-

  counter = 0;
  constructor() { }
  ngOnInit(): void { }

  increaseCounter(x: number) {
    this.counter += x;
  }

  decreaseCounter(x: number) {
    this.counter -= x;
  }

And in the corresponding template file -

<p>Counter Value: {{ counter }}</p>

Now lets move to the app.component.ts file and the following code -

  increaseCounter(x: number) { }

  decreaseCounter(x: number) { }

We will add the method body soon.
And in the corresponding template the following code -

<input (click)="increaseCounter(1)" type="button" 
value="Add by 1">

<input (click)="decreaseCounter(1)" type="button" 
value="Subtract by 1">

Output till now -

And the button does nothing. But it will do 🤞

Now lets come to the real part -

We will see ViewChild first.
So lets add a property in app.component 👉 counterReference.
The property counterReference will be holding a reference of the Counter component. So we will assign -

counterReference = {} as MyCounterComponent;

and also decorate it with ViewChild. So the final code will become -

  @ViewChild(MyCounterComponent)
  counterReference = {} as MyCounterComponent;

The viewChild accepts few parameters.
The first parameter is the Component which you want to select or get the reference (in this case). You can also query using a templateReference (which I will show soon).
Now lets complete the 2 functions which we kept empty -

  increaseCounter(x: number) {
    this.counterReference.increaseCounter(1);
  }

  decreaseCounter(x: number) {
    this.counterReference.decreaseCounter(1);
  }

Here in the above code you can see with the property counterReference decorated with ViewChild we can access the child component MyCounterComponent (methods).

When you click any of the button you will see the Counter value is getting changed.

So from the parent you can access the child methods.

Cool right?
Now the next variation (as I said earlier) using template reference.
Example of a template reference -

<div #myTemplateRef></div>
<app-my-counter #componentTemplateRef></app-my-counter>

Observe the # (pound symbol).
It is a variable to reference the DOM within a template. Here myTemplateRef or componentTemplateRef is the template reference.

Lets add few more lines of code to see how it works. Add the below lines of code in component.ts file-

  @ViewChild('myTemplateRef')
  myTemplateRef = {};

  @ViewChild('componentTemplateRef')
  componentTemplateRef = {};

And in the corresponding template file -

<div #myTemplateRef></div>
<app-my-counter #componentTemplateRef></app-my-counter>

Now a very important piece of information -

You might have seen a method that gets generated when you create a component using CLI - the ngOnInit()
This is a Angular lifecycle hook method. I will talk about the Lifecycle Hooks in details in the upcoming post.
Similar to this method there is another life cycle hook method called ngAfterViewInit().
So, when ever the template/ view initialization is complete or I can say view is ready the ngAfterViewInit() method is called and all the properties decorated with viewChild are ready to use. Before that they are uninitialized/ undefined.
In the ngOnInit the properties would look like below -

And in the ngAfterViewInit the properties would look like -

In summary a quick pictorial representation -

static:
By default the value of static is false.

The true value is used to support creating embedded view on the runtime. When I will write about creating dynamic component again I will talk about static: true.

Now coming to ViewChildren. It is very similar to ViewChild except it provides a collection of matching references as a QueryList of items.

QueryList - Its an unmodifiable list of items that Angular keeps track of and up to date when the state of the application changes.

There are few properties and methods of QueryList
first: gets the first item in the list.
last: gets the last item in the list.
length: gets the length of the items.
changes: An observable. It emits a new value, whenever the Angular adds, removes or moves the child elements.

JavaScript array methods like map(), filter() , find(), forEach(), etc. are also supported by the QueryList

Now the example -
You have three entries of the same component 👇

<app-my-counter></app-my-counter>
<app-my-counter></app-my-counter>
<app-my-counter></app-my-counter>

And you want to get hold of all the items.
ViewChildren is the best choice.

  @ViewChildren(MyCounterComponent)
  viewChildrenRef: QueryList<MyCounterComponent> | undefined;

Here using ViewChildren you can get access to all the matching selector. You can loop through them and perform any operation you need to.

That's all for now.

Hope you enjoyed reading the post

If you liked it please like ❤️ share 💞 comment 🧡.

Coming up more topics on Angular.
So stay tuned.

I will be tweeting more on Angular JavaScript TypeScript CSS tips and tricks.

So hope to see you there too 😃

Cheers 🍻
Happy Coding

How Angular Application Starts - Behind The $cene story!

Anubhab Mukherjee — Sun, 16 Jan 2022 07:51:15 +0000

Today we will learn the application flow in Angular.
What happens when the application starts.

It would be a theory but again an important one if you want to master Angular.

1️⃣ angular.json

When you open up your angular project you might have noticed a file sitting at the project root - angular.json

It is a very important file and contains several important configuration information to run the angular application.
A detailed overview I will provide on this very soon.

When the application first starts Angular looks for this file.

So now if you open the file you will find a node called main under
architect -> build -> options , you would see a main node

Once Angular found the file it starts looking for the main node.
The value of the main node is a file path that Angular is looking for - the main.ts under src folder.

2️⃣ main.ts
This is the main entry point. As an analogy if you have a prior knowledge of C/ C++/ Java you must have seen there also that main is the starting point.
The main.ts file is present under the src folder.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from 
'@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

platformBrowserDynamic creates the platform. This function is also used to bootstrap the Angular Application. Here we specify the first module that should be loaded when the application starts for the first time - the root module. In other words the bootstrapping module.

3️⃣ app.module.ts
Once angular finds the starting module the app.module.ts (where all the components/ directives/ pipes associated to this module is present and dependency to other module is also present) it looks for the bootstrap option -

Where the starting component name has been specified - in this case the AppComponent.

By now Angular compiler has all the required information it needs to work.

4️⃣ index.html
Now the index.html is loaded and starts parsing. Once it finds the selector it exactly knows which component to load and the AppComponent is displayed in the screen.

And that's it. This is how the application starts.

Hope you enjoyed reading the post

If you liked it please like ❤️ share 💞 comment 🧡.

Coming up more topics on Angular.
So stay tuned.

I will be tweeting more on Angular JavaScript TypeScript CSS tips and tricks.

So hope to see you there too 😃

Cheers 🍻
Happy Coding

Component Communication in Angular (Parent to Child & Child to Parent)

Anubhab Mukherjee — Sat, 15 Jan 2022 19:18:05 +0000

Today we will learn one of the most important topic in Angular - how to communicate between two components when they have a parent child relationship.
🔴 Prerequisite 🔴
You need to know (if not please follow the link associated)-
🔵 What is a component in Angular
🔵 How to create a component in Angular

Before we begin we need to understand what is the meaning of parent-child relation. Suppose you have a component called P. In the template of the P component you write selector of another component say C. In this case the component C is the child of the P component or P is the parent of C.

So now we know the theory so lets quickly setup our playground.

We create two components, lets name the parent component as
movie-dashboard or easier way I would say movie-dashboard component will act as the parent and movie-table (our second component) will act as the child component.

The CLI commands:
ng g c movie-dashboard
ng g c movie-table

Project Folder Structure:

Parent marked with yellow arrow 🟡
Child marked with green arrow 🟢

In the app.component.html we paste in the below code -

<app-movie-dashboard></app-movie-dashboard>

In the movie-dashboard.component.html file lets paste in the below code -

<p>movie-dashboard works!</p>
<app-movie-table></app-movie-table>

Now if you start the application you should see the following output in the browser's localhost:4200

So now our playground is ready.

❔❔❔ Next big question what are we building ❔❔❔

We will be building a simple flow where the parent component will be holding some movie names/ movie array (I will refer to as movie list from now on...). We will be passing the movieList to the child component where we will be displaying the list in a tabular format.
From the table the user can select a movie by clicking the button (some user action) which will be passed back to the parent (may be for some processing).

So now the context is set.
Lets see how we can pass data from parent to child.
We pass data from parent to child using an Input decorator.

Note:
Decorator we already have come across when we defined a component, directive, pipe, module remember??? (@Component, @Directive, @Pipe, @NgModule)

All the above decorators are placed on the top of a class. They are also called Class Decorator.

Input decorator is a property decorator. What does that mean???
What ever variables you create directly inside a class (not inside a method) are all properties.
And this Input decorator can be put only on the top of a property. So that is the reason it is called Property decorator (and a decorator always starts with @ so @Input)
Once you put a decorator it gets some special power like a super hero.
So where should we put this decorator. Easy way I will tell you which will always stick to your mind -

Which ever component will receive the data should have the property decorated with @Input. So in our case the movie-table component will receive the data. So we need to create a property and mark it with the decorator by now you know which decorator we will use.
So lets open the movie-table.component.ts file and paste in the below code -

  @Input()
  movieList: Array<string> = [];

You can see line number 11 is the movieList property. We have put the @Input() on the line number 10.
Although you can put in front of the property as well like below -

  @Input() movieList: Array<string> = [];

So once we use this decorator on a property the property is able to hold the data we pass from parent.

By now we got some one who will hold the data in the child. But how to pass the data from parent. For that lets go to the movie-dashboard.component.ts file and paste in the below code -

  myFavoriteMovies = [ 'Encanto', 
'Spider-Man: No Way Home', 
"Harry Potter and the Sorcerer's Stone" ];

and now come to the corresponding template file the movie-dashboard.component.html and paste in the below code (by removing the old code present) -

<p>movie-dashboard works!</p>
<app-movie-table [movieList]="myFavoriteMovies"></app-movie-table>

Here we have 2 points to note-
1️⃣ The input decorator property we created in the child component is placed inside the square bracket []. Here movieList is present inside the square bracket.
2️⃣ The data which we want to pass to the child should be assigned to the above property. We use equal operator and the variable which contains the data. Here myFavoriteMovies property contains the data which we have assigned.

That's it now its ready & we learnt how to pass the data from parent to child.
But wait I need to show it to you also right?
So for that lets paste in the below code in the movie-table.component.html

<table>
    <tr>
      <th>Movie Name</th>
      <th></th>
    </tr>
    <tr *ngFor="let movie of movieList">
      <td>{{movie}}</td>
      <td><input type="button" value="Select"></td>
    </tr>
</table>

You will see the output as -

Wow! We are receiving the data in the child component.
As I said earlier movieList property will receive the data from the parent. Since we are passing an array we are just looping through it using ngFor (If you are not aware of please have a look).

Our First step is done - Passing data from parent to child.
Now comes the second part. The user clicks the select button and the selected movie will be passed to the parent component.

For that we will learn yet another new property decorator the
Output decorator.

So lets paste in the below code in the movie-table.component.ts

  @Output()
  movieSelectedEventEmitter =  new EventEmitter();

So here we are adding a property movieSelectedEventEmitter and decorating with Output decorator. And now what is the remaining part?
When ever the user clicks a button it actually raises an event which will emitted back to the parent. We are actually creating an object of it. So the property becomes super powerful (like our action hero) and can emit/ send the data to the parent component.

But we also need to capture the click event when the user clicks the button. So lets create a method which will be called when the user clicks the button.

  movieSelected(selectedMovie: string) { }

Nothing in the body yet. We will fill it soon!

In the corresponding template file lets paste the below code

 <td><input type="button" value="Select" 
(click)="movieSelected(movie)"></td>

All events we write inside a round bracket ().
Here click is an inbuilt event.
And once that event is fired/ triggered the function we pass just after the equal operator will be called.
Now lets come back to the method which we just now created. And paste in the below code -

this.movieSelectedEventEmitter.emit(selectedMovie);

So what are we doing?
On the Output property we created we are calling the emit (remember we assigned an EventEmitter object) and passing the data, in this case the selected movie name.

But the job is still half done. In order to get the data in the parent we need to add few extra lines of code.
So lets open the movie-dashboard.component.html file and paste in the below code (and you can remove the old one)-

<p>movie-dashboard works!</p>
<app-movie-table 
(movieSelectedEventEmitter)="selectedMovieToWatch($event)" 
[movieList]="myFavoriteMovies">
</app-movie-table>

Here we are using the event emitter we created movieSelectedEventEmitter (or the Output property inside a round bracket since its an event, same formula as the click we used few steps back) and assigning it to a method which will be called when the event is triggered (exactly same concept/ way as the click event, the only difference is click is an inbuilt one and this is a custom/ user-defined one)

So lets define the selectedMovieToWatch method.
In the movie-dashboard.component file lets paste the below code -

  selectedMovieToWatch(data: string) {
    debugger;
    alert(data);
  }

Here data will receive the value which we passed from the child.
That's it. Now lets look at the output -
I clicked the second item (trust me)

So this brings to the end!!! I know it was a long post.

Highlights

Input
1️⃣ Need to decorate a property in the child component as @Input()

  @Input()
  movieList: Array<string> = [];

2️⃣ In the Parent component where the child selector is used need to add the same input property in Square Bracket [] and assign the value to be passed
[movieList]="myFavoriteMovies"

Output
1️⃣ Need to mark a property in the child component with the Output decorator and assign an EventEmitter Object

  @Output()
  movieSelectedEventEmitter = new EventEmitter();

2️⃣ In the parent we need to add the event and assign to a method
(movieSelectedEventEmitter)="selectedMovieToWatch($event)"

Hope you enjoyed reading the post

If you liked it please do like ❤️ share 💞 and comment 🧡.

Coming up more topics on Angular.
So stay tuned.

I will be tweeting more on Angular JavaScript TypeScript CSS
So hope to see you there too 😃

Cheers!!!
Happy Coding

Types of Angular Module

Anubhab Mukherjee — Fri, 14 Jan 2022 17:44:35 +0000

Today we will understand about the different types of modules you can have in an application. If you are not aware of Angular Modules then I would suggest you to go through this post. Also you need to know how to create your own module. For that you can have a look at this post.

📣 Note
This will be more of theory where we will understand the requirement of different types of modules. It can be different puzzle pieces for you as of now. But in coming posts I will cover all the module type with example. And then you will be able to see the puzzle completed.

Before diving deep first lets understand why we need various types of modules. (By the way one of the module type we already saw in the earlier post).
As your application grows in size you need to break/ group the application into various chunks for -

maintainability,
enhance the performance,
scalability,
easy deployment,
enhance the development process.

To meet the above requirement module can be a key player (best friend).

There are six (6) types of modules an application can have (depending on the requirement. Not necessary an application should have all the six)

1️⃣ Root Module (🔴 Mandatory 🔴)
2️⃣ Feature Module (🟡 Optional 🟡)
3️⃣ Routing Module ( 🟡 Optional 🟡)
4️⃣ Service Module (🟡 Optional 🟡)
5️⃣ Widget Module (🟡 Optional 🟡)
6️⃣ Shared Module (🟡 Optional 🟡)

1️⃣ Root Module
I bet you have already seen a glimpse of this module.
When you create an Angular application for the first time you are provided with a module app.module.ts remember???
This is the root module (you can think this as the parent, all other modules will be directly or indirectly part of this module.
Only one root module is allowed in an application.

2️⃣ Feature Module
In a large application (say an eCommerce application like amazon) with multiple different features you need to break the application into smaller chunks depending on the features (like users, product, payment etc.)
These smaller chunks can be grouped under modules known as the Feature module.
As an analogy you can think like you have a parent folder called entertainment under that you have different subcategory or folders like music, movies, games, photos etc. This subfolders you can think as feature module. All related items are grouped under one module.

3️⃣ Routing Module
When an application has the navigation feature (more than one screen to display) then the routing module comes into play. In this scenario the Routing module is required.
If you are interested to know more about routing module you can have a look at this post.

4️⃣ Service Module - (I will talk in detail very soon)
Modules that contain only services (can be utility services).
The service module must be present only at the root module .
Once I talk about services this part would be more clearer to you.

5️⃣ Widget Module
The third party UI component library module which exposes components/ pipes/ directives (in the export array) can be considered as widget module.
For example you have built a table component and you want to share it with other teams in your org. The module which contains the table component can be considered as a widget module.
The other team would be importing your module and use the table.

6️⃣ Shared Module
The commonly used components/ directives/ pipes which are used across the application in different modules are put in a special module called the shared module.
Now consider you have made a table component. This table component need to be used in different screens of your application across different modules. The only way you can do is by using the Shared Module.

Hope you enjoyed reading the post (only theory but this knowledge will be helpful in the coming days. Trust Me)

If you liked it please do like share and comment.

Coming up next Communication between components.
So stay tuned.

I will be tweeting more on Angular JavaScript TypeScript CSS
So hope to see you there too 😃

Cheers!!!
Happy Coding

Creating Custom Module in Angular

Anubhab Mukherjee — Thu, 13 Jan 2022 13:11:30 +0000

Today we will learn how to create our own Angular Module. If you are not aware of Angular Modules I would recommend you to go through this post

In order to create a module we will be using the below CLI command
ng generate module <module_name>
or the shorthand
ng g m <module_name>

Lets open a command prompt from the project root and type in the below code -
ng g m payroll

In the command prompt you will see like below -

Lets see how the project looks like -

So here we can see a folder with the module name has been created and a file called payroll.module.ts file has been created.

Lets open the file and see -

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class PayrollModule { }

Here in the above code we can see the similar structure as we saw in the module provided by Angular the app.module.ts file.
One more thing you have noticed the declaration array is empty as we dont have any component/ pipe/ directive associated with this module yet. If we want to put any of the component/ pipe/ directive inside this directive we need to add in this list.

Lets see how to do that. For that lets open the prompt again (from the project root folder) and type in the CLI command to create a component.

Lets run the below command: ng g c PayrollDashboard

But wait ✋🏻, you might ask a question if I run the above command in which module my component will get added???
In the above case still the new component will be added to the app.module.
To specify the module also we need to add some extra flag to the above 👆🏻 CLI command.

ng g component PayrollDashboard --module=payroll/payroll.module.ts

Here you can see that the very similar output we saw earlier when creating custom component, But one minor difference is there the last line where you can see the UPDATE has happened to the
payroll.module.ts file and not app.module.ts

Now if you open the payroll.module.ts file you will see that the declarations array has been added with the newly created component.
But still you might not be so happy as the component has been created outside the payroll folder (marked with yellow arrow)-

If you see closely the payroll-dashboard was created outside the payroll folder. But I need all the payroll features under the payroll folder itself right?
For that we need to do a minor tweak in the earlier CLI command used to create the component -
ng g component payroll/PayrollDashboard --module=payroll/payroll.module.ts

If you see we just added the folder name before the Component name while creating the component. Cool right!!!

So we added the Component.
But how to use?
Is it the same thing like earlier?

Take the component selector and add it in app.component.html file like below?

The answer is NO!!!
2 more steps (I say VERY IMPORTANT steps you need to take care of)

1️⃣ Since the payroll.component is part of a separate module (payroll module) you need to import the payroll module in the module where you will be using (app.module).
In this case we will be using the payroll.component (present in payroll module) inside app.component.html file, which is present inside the app.module.ts

See how we added the newly created module?
In the imports array we added the name of the payroll.module. We discussed earlier right?

2️⃣ Just adding the module is not enough. We need to add the component (we are using outside) in the exports array of the module where it has been declared.
So in our case, we need to add the name of the component to the exports array of the payroll.module

That's it...
If you open the browser you must see the below output -

Hope you enjoyed the post.
Coming up next the different types of modules we can have in Angular. Stay tuned!!!
If you liked the post please do like share and comment.

I will be tweeting more on Angular JavaScript TypeScript CSS
So hope to see you there too 😃

Cheers!!!
Happy Coding

Understanding Angular Modules

Anubhab Mukherjee — Mon, 10 Jan 2022 19:21:25 +0000

Today we will understand one of the very important topic in Angular - Angular Modules.

In simple term a module is a logical block or container that holds something.

If we need to describe module in terms of Angular we can say its a logical block containing components,
custom directives, custom pipes and services (I will talk in detail very soon).

Once you create a new Angular project the Angular team provided you with a ready to use module called app.module.ts. Lets see the different parts of Angular Module -

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now few key take away -
1️⃣ A module is a simple typescript class.

2️⃣ The module is decorated with @NgModule decorator.

3️⃣ The NgModule decorator is a function that takes an object. This object is also called metadata object (you should remember this term)

4️⃣ The metadata has information/ details which helps Angular how to compile and launch the application.

In the above example you can see only 4 options but in total there are 9 options available. So lets see each one of them and their use (few are advanced options which will be taken in details later).

declarations -
It is an Array of classes.
Holds list of all the custom directives, pipes and components user has created.
All the items (directive, pipe, component) you added in this list are all part of this module.
Note --- A Very Important One
You Can add a component/ directive/ pipe class in only one module's declaration array. If you try to add in more than one place you will get a compile error.

imports -
It is a list of all modules that this current module is dependent on.
In the above example you can see BrowserModule added. It means the current module is dependent on the BrowserModule to function correctly.

providers –
It contains the list of dependency injection providers. (Might be a bit hard to digest at this time so in easy term I can say list of services. I will revisit this part when we talk about services)

exports -
List of custom components, directives, pipes that the module exposes/ exports so that the other module can use it.
Now try to relate with import... This module will be exporting and some other module will be importing. So the other module should write the name of this module in that module's import array. Easy right???

entryComponents -
It is a list of components that should be compiled when this module is defined.
An Angular app always has at least one entry component, root component- AppComponent by default.
We will learn about dynamic components later. All dynamic components need to be part of EntryComponent list.

bootstrap –
List of components that are bootstrapped/ during the start and the listed components will be automatically added to entryComponents.

schemas -
List of elements and properties that are neither Angular components or directives (again will talk about it later. It will be discussed in Advanced topic part).

id –
The Id used to identify the modules in getModuleFactory. If left undefined, the NgModule will not be registered with getModuleFactory.

jit -
When this is present, the module will be ignored by the AOT compiler. (Again will be covered in the advanced part)

The main use of module comes to logically group similar items and put all the related items together.

Suppose you have a feature like dashboard. All the related components will be placed under that module.

Hope you enjoyed reading the post.
Coming up next is Creating custom module in Angular.

If you enjoyed reading the post please do like comment subscribe
and share with your friends.

Cheers!!!
Happy Coding

Creating Custom Pipe in Angular

Anubhab Mukherjee — Sun, 09 Jan 2022 20:01:43 +0000

Today we will learn how to create our own Pipe or the Custom Pipe. If you are unaware about what a Pipe is in Angular then I would recommend you to go through the previous articles I wrote on Pipe. You can start from here

The need of custom pipe comes when the built in pipe does not meet our requirement.

✩ So now lets see how can we create our first Pipe ✩

The CLI command to create a Pipe is -
ng generate pipe <pipe-name>

the shorthand -
ng g p <pipe-name>

Lets open the command prompt in the project root and type in the below command -
ng g p custom-pipe-demo
So here we are saying Angular to create a pipe with the name
custom-pipe-demo

and you will see 2 files getting created in the project -

The file pointed with the red arrow is the spec file (for writing unit test). We will not talk about it right now.
We are more interested in writing our first pipe and will work with the file pointed with yellow arrow (the second one).

One more line we can see in the command prompt which tells that the app.module.ts has been updated.
If you open the app.module.ts file you will see a new line got added and its the name of our pipe.

I will talk about modules in very details in the very next post.

So lets see how the pipe looks like -

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'customPipeDemo'
})
export class CustomPipeDemoPipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

Lets note our observation points -
1️⃣ There is a normal typescript class CustomPipeDemoPipe
2️⃣ The class implements an interface PipeTransform
3️⃣ The Class is marked with a @Pipe decorator
4️⃣ The Pipe Decorator takes an object, which has the name of the pipe
5️⃣ The PipeTransform interface has a method called transform which we need to implement (🔴 its mandatory 🔴)
6️⃣ The transform method has few arguments. The signature is already provided but we need to tweak it as per our need. The first argument is the value which we need to transform and the remaining args is an array of all the pipe parameters. Remember when we used the date pipe we passed 'short'/ 'medium' etc as parameters.
7️⃣ The type is unknown by default but we can change it.

So now the next question what we are trying to build using the pipe.

Say our project has a file picker. Once it picks a file from the system we need to show the file size in Mb by default and if we pass a unit like GB it will convert that accordingly.

So lets paste the below code and modify the transform function -

  transform(fileSize: number, ...args: string[]): string {
    if (!args.length || args[0] === 'MB') {
      return (fileSize / (1024 * 1024)).toFixed(2) + 'MB';
    } else if (args[0] === 'KB') {
      return (fileSize / 1024).toFixed(2) + 'KB';
    } else {
      return (fileSize / (1024 * 1024 * 1024)).toFixed(2) + 'GB';
    }
  }

and in the app.component.html file -

Lets paste in the below code -

<h3>Custom Pipe Demo</h3>
<p>{{ 2000405677 | customPipeDemo : 'KB' }}</p>

Lets understand the code on a high level.
The first parameter which will come to the transform function is the value that we need to transform/ alter. In this case 2000405677
Then we are using the pipe operator (|) and then the name of the pipe customPipeDemo
Then we can pass an argument in this case the unit where we need to convert to in this case KB
You can pass multiple arguments also and will be received by the args array, in the transform function.

In the output we will see -

Lets see what debugger tells us -

Here you can see the argument fileSize receives the value
2000405677
The args[] receives KB as the first item in the array which we were passing in the argument.

Note:
The most important thing is the return keyword.
After we did the transformation you can see we need to return the transformed value else nothing will be displayed in the template/ browser.

That's all for now my friend 👋🏼

Hope you enjoyed the reading the post.
If yes do like comment and share.
Coming up next is the Module in Angular. So stay tuned.

Cheers!!!
Happy Coding

Built-In Angular Pipes -Part 5

Anubhab Mukherjee — Sat, 08 Jan 2022 18:14:19 +0000

Today we will continue to learn the built in Angular pipes.

Pipes covered in this post -

LowerCasePipe
PercentPipe
SlicePipe
TitleCasePipe
UpperCasePPipe

LowerCasePipe
This pipe is used to convert the string of alphabets in to lower case or in small letters

Syntax
{{ value | lowercase }}

It is Exported from the CommonModule

It takes only string as Input.

Now lets see the example. Our playground 👇

Lets paste in the below code in the component.ts file-

myName = 'JOHN DOE';

In the component html file lets paste in the below code -

<hr>
<h2>Lowercase Pipe Demo</h2>
<h3>Without Pipe</h3>
<p>{{myName }}</p>
<h3>With Pipe</h3>
<p>{{myName | lowercase}}</p>

In the browser you will see the below output 👇

So here you can see without using pipe we are getting the original value but after using the lowercasePipe we are getting the value converted to lowercase.

PercentPipe
It modifies a number to a percentage string. It can be formatted according to locale rule that determines the size of the group and the separator.

Syntax
{{ value_expression | percent [ : digitsInfo [ : locale ] ] }}

It is Exported from the CommonModule

It takes only string or number as Input.

Parameters
digitsInfo -
Its exactly the same as the digitsInfo in the decimal pipe. I would recommend you to have a look here

Lets see in practice -
We will be working in the same playground.
In the component.ts file lets paste the below code -

 percentValue = 0.234769;

& in the template file lets paste the below code -

<h2>Percent Pipe Demo</h2>
<p>{{ percentValue | percent }} </p>

Lets see the output -

Here we can see that the output is 23%

Things to watch
The value got rounded and a percent sign has been appended.
Now if you update the percentValue variable to 0.237769
you will see the output to become 24%
If we do not pass the digits info in that case there is no digits after the decimal point and it will be rounded off.

Now lets see how digits info works. Lets paste in the below code in the template file -

<hr>
<h3>digitsInfo Example</h3>
<p>{{ percentValue | percent: '2.2-3'}} </p>

Here the output will become -

Explanation of the above output
Digit two (2) before the decimal signifies how many digits will be there before decimal point in the output.
Note
If the output value has 2 digits before decimal (for example in this case) but you give 1 before decimal in the digitsInfo (example
<p>{{ percentValue | percent: '1.2-3'}} </p>) still you will see 2 digits before the decimal.
If you want 3 digits before the decimal then the digitsInfo should look like - 3.2-3 and 0 would be appended at the beginning.

1.2-3 => 2 and 3 signifies the minimum and maximum digits after the decimal place. It means minimum 2 digits will be there and maximum 3. Since the value we passed has more than 3 digits so we can see 3 digits after the decimal place.

SlicePipe
This pipe creates a subset of the input string or array of items.

Syntax
{{ value_expression | slice : start [ : end ] }}

It is Exported from the CommonModule

It takes string or array as Input

Parameters
start
It is of type number
It is mandatory.

end
It is a number. Marks the end position of the string/ array (But end is not included).
It is optional
Default value is undefined.

Now lets jump in to see the example.
Lets add the below code in the component.ts file.

  sliceDemoString = 'John Snow';

  sliceDemoArray = ['a', 'b', 'c', 'd', 'e'];

& in the template file lets add the below code -

<h2>Slice Pipe Demo</h2>
<hr>
<h3>Without using slice pipe</h3>
<p>{{ sliceDemoString }} </p>
<p>{{ sliceDemoArray }} </p>
<h3>Without using slice pipe</h3>
<p>{{ sliceDemoString | slice: 2 }} </p>
<p>{{ sliceDemoArray | slice: 1}} </p>

Now the output will be like below -

Explanation
Here we have used the slice pipe and in the first example we passed 2 as the staring point. So from the string John Snow the character Jo was sliced out/ removed and the remaining string was returned (J is the 0th index and it started from 2nd index).
In the second example we passed 1 so the first item or the 0th index item was removed and started from the 1st index.

Lets update the above code and write the below code in the template file -

<p>{{ sliceDemoString | slice: 2:4 }} </p>
<p>{{ sliceDemoArray | slice: 1:3}} </p>

& the output will become -

So here in the first example the subset starts from 2nd index and ended in (end - 1) index the 3rd index.
In the second example the start index was 1 and end index was not 3 but (endIndex - 1) i.e. the 2nd index so b, c was returned.

TitleCasePipe
This pipe transforms the text to the title case. That is if you pass a sentence then every first letter of the word passed would become in capital case.

Syntax
{{ value_expression | titlecase }}

It is Exported from the CommonModule

It takes a string as input.

Lets see in example. Lets add the below code in the component.ts file

titleCasePipeDemoString = 'You will be master in Angular 
very soon!';

In the template file -

<h2>TitleCase pipe</h2>
<h3>Without using pipe</h3>
<p>{{ titleCasePipeDemoString }}</p>

<h3>With using the Titlecase pipe</h3>
<p>{{ titleCasePipeDemoString | titlecase}}</p>

The output will become -

So here you can see every first letter of the word is capitalized.

The last pipe...........

UpperCasePipe

Its the opposite of LowerCasePipe. Converts the string into uppercase.

Syntax
{{ value_expression | uppercase }}

It is Exported from the CommonModule

It takes a string as input.

Lets see in example. Lets add the below code in the component.ts file -

uppsercasePipeDemo = 'john snow';

In the template file -

<h2>UpperCase Pipe Demo</h2>
<h3>Without Pipe</h3>
<p> {{ uppsercasePipeDemo }}</p>

<h3>With Pipe</h3>
<p> {{ uppsercasePipeDemo | uppercase }}</p>

The output will become -

It transforms the string we passed to uppercase.

That's all my friend. You have done a great job covering all the pipes (few I left intentionally will cover very soon).
Next coming up Creating custom pipe

Hope you enjoyed the post.
If yes do like comment and share. More Angular topics are on the way. Stay tuned.

Cheers!!!
Happy Coding

Built-In Angular Pipes -Part 4

Anubhab Mukherjee — Sat, 08 Jan 2022 14:37:05 +0000

Today we will continue to learn the built in Angular pipes.
Pipes covered in this post -

JsonPipe
KeyValuePipe

JsonPipe
This pipe is used to format a data into JSON-format representation.
Mostly I use for debugging purpose.

It is Exported from the CommonModule

Syntax
{{ value_expression | json }}

Its a simple pipe.
Lets see the example. Our project folder -

In the component.ts file lets write the below code -

  jsonPipeData = {
    studentName: "John Doe",
    studentMarks: 423
  };

& in the html lets paste in the below code -

<h2>JSON Pipe</h2>
<h4>Without the pipe</h4>
<p>{{jsonPipeData}}</p>
<br>
<h4>With the pipe</h4>
<p>{{jsonPipeData | json}}</p>

Now, lets see the output -

Here you can see without the pipe the output is [object Object]
It is not able to process the code. But after using the pipe we can view the correct data.
So, you can use this pipe to verify the data coming in the component by displaying directly in the template.

KeyValuePipe
This pipe is used to convert an Object or Map into an array of key value pair.

Syntax
{{ input_expression | keyvalue [ : compareFn ] }}

It is Exported from CommonModule

Parameters
compareFn
If you want to provide a custom sorting function.
It is Optional
Default is the defaultComparator which Angular provides to sort.

Now lets see an example -
So in the component.ts file lets add the below code -

  obj = {
    'chair': '23',
    'banana': '3',
    'apple': '4',
  };

Please note that we have put the first key as chair and apple at the end.

Now lets paste the below code in the template file.

<hr>

<h2>KeyValue Pipe</h2>
{{ obj | keyvalue | json }}

You would see the below output -

Here few important points to observe -

We have added one more pipe the json pipe along with the keyvalue. So we can chain multiple pipe at the same time. Output of the first pipe acts as the input to the second.
In the output you can see the key apple came at the beginning (it got sorted) while chair at the end although the value provided was opposite.
We received an array of key-value objects.

Note
We already saw a glimpse of sorting. The keyValue pipe use the defaultComparator to sort the output values.
Following ae the key points to note-

If the key is a number then it will sort in Ascending Order.
If key is string then it will sort in alphabetic order.
If key is of different type then it will get converted to string
If key is null or undefined then it will be put at the very end.

Custom Sorting Values using compareFn
Now lets write a custom function which will sort the list on its values. So paste in the below code in the component.ts file

 orderbyValueAsc = (a: KeyValue<string, string>, b:
 KeyValue<string, string>): number => {
    return Number(a.value) < Number(b.value) ? -1 : 
(Number(a.value) > Number(b.value)) ? 0 : 1
  }

& in the template file we need to pass the compare function also -

{{ obj | keyvalue: orderbyValueAsc | json }}

So we write : orderbyValueAsc

The output in the browser you will see -

There can be a scenario where you want to keep the original value. In that case we can write the below function in the component ts file -
keepOriginal(a: any, b: any) { return a; }

That's all for now. I will be discussing on the remaining pipes in the coming posts. So stay tuned.

Hope you enjoyed the post.
If yes do like share and comment.

Cheers!!!
Happy Coding

Built-In Angular Pipes - DecimalPipe - Part 3

Anubhab Mukherjee — Wed, 05 Jan 2022 17:15:40 +0000

Today we will continue with the remaining built in Angular pipes. If you are not aware of pipe I would recommend you to go through the post.

DecimalPipe

The DecimalPipe is used to format a value/ number as per the required decimal digits and locale information.

The name of the pipe is number

Syntax

{{ value | number [ : digitsInfo [ : locale ] ] }}

Present in the Common Module

The Input value

Input Value which the pipe accepts must be either in string or number

The Parameter

digitsInfo
It is of type string.
It is used to set the digit and decimal representation.
It is Optional.
Default value is undefined.

locale
It is of type string.
It specifies what locale format that will be implemented.
It is Optional.
Default value is undefined.

The digitsInfo follows the following format -
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

minIntegerDigits
Minimum number of integer digits before the decimal point.
Default value is 1.

minFractionDigits
Minimum number of digits allowed after the decimal point.
Default is 0.

maxFractionDigits
Maximum number of digits allowed after the decimal point.
Default is 3.

Now, lets see in practice. Lets open the component.ts file -

And add a variable pi and assign the value 3.14159

  pi = 3.14159;

and in the corresponding template file lets add the below code -

<h2>Decimal Pipe</h2>

<h4>Without the pipe</h4>
<p>{{ pi }}</p>
<hr />
<h4>Default Decimal Pipe</h4>
<p>{{ pi | number }}</p>
<hr />

We will see the below output -

So here in the above output we can see when we display the value of pi without any pipe it shows the entire value. But when we use the decimal pipe the number of digits after decimal becomes 3 and does the rounding off too.

Now lets see the digitsInfo parameter in detail-

Lets paste in the below code -

<h4>digitsInfo Example</h4>

<p>
  Here number of digits before decimal is 1. <br>
  Minimum number of digits after decimal is 1 <br>
  Maximum numberof digits after decimal is 2 <br>
  <i>Output- </i>
  <b>{{ pi | number: "1.1-2" }}</b>
</p>

<p>
  Here number of digits before decimal is 3. 
Since the value has only one digit so the remaining 
digits are covered by 0.<br>
  Minimum number of digits after decimal is 2. <br>
  Maximum numberof digits after decimal is 4. 
Number of digits shown after decimal is 4. <br>
  <i>Output- </i>
  <b>{{ pi | number: "3.2-4" }}</b>
</p>

<p>
  No digits after the Decimal Point. <br>
  <i>Output- </i>
  <b>{{ pi | number: "1.0-0" }}</b>
</p>

In the output for the above code you would see -

That's all for now.
Coming up the remaining pipes in the next post.
So stay tuned...
Hope you enjoyed the post if yes do like share and comment!!!

Cheers!!!
Happy Coding