Extending Native JavaScript Prototypes In Angular

JavaScript does not have classes like other languages such as Java. so, it uses the concept of prototypes for inheritance.

Every method we use by default which comes built in javascript are inherited from the predefined objects in javascript which are inherited via prototypes.

Ffor example, the string methods toLowerCase() and toUpperCase() are methods declared at root level in String object which is why these methods are available to use globally in our project.

Let's say we need a method to capitalize the first letter of a string but unfortunately javascript doesn't ship with such method so we might have to declare such method everywhere we need to use it in our project. which is definitely not a good approach as it will clutter our code and we will be repeating our code over and over again which in programming world is considered as bad practice.

So what can we do?

Well turns out we can use prototypes to our advantage. how? well although javascript does ship with lots of methods we are not limited to them only.

With the help of prototypes, we can even extend any primitive object in javascript. let's see how.

Say we need a function or method to capitalize the first letter of a string so what we can do is add a global method to our string object using prototypes like so:

if we wrote the above lines of code in any javascript file then the method capitalizeFirstLetter() would be available to use directly anywhere in our project all we had to do was to write this code on top of our first .js file.

But in Angular, this is not the case. why?

Well because in angular we write our code in typescript hence the file extensions are .ts which is why we cannot write code anywhere and just expect it to be available everywhere in our project.

So what can we do?

The solution is to create a Module and declare it globally so that we can import it in our components.ts file to use it.

So, let's create a new file in our angular project and give it any name you like I'll call it "custom-methods.ts" and inside that line paste following code:

Now we can import this file to our app.module.ts file like this:

import './custom-methods; (make sure the path is correct which may vary from project to project).

now we can use the method capitalizeFirstLetter anywhere easily like so:

here, if userName = "john" will be converted into "John";

Similarly we can extend String Object via prototypes now in our custom-methods.ts file by adding more functions.

for example we can also add this code write below our capitalizeFirstLetter method:

 here if we call this method on string "john doe" like so:

"john doe".capitalizeEachWord();

will output ----> "John Doe".

Thanks.