But before we jump to the topic, I must say that the more I read about accessibility, the more I am convinced that accessibility is not an option, it is imperative.

Foreword

As the famous saying goes:

A picture is worth a thousand words

But there are people who will need those thousand words because they can't see the picture partially or completely.

Problem

We all know that images are a core part of every web application, but oftentimes, images are not made accessible which may affect a lot of users of your application.

For most cases, making images accessible is pretty simple

While using images in our web applications, generally we don't realize that images fall into certain categories/types based on the use cases, and we should handle each use case differently.

Types of Images

The following are the most commonly known types of images used in web applications.

1. Informative
2. Decorative
3. Functional
4. Group
5. Text-as-image
6. Image Map
7. Complex

Let's take a look at each of these types briefly and how to make images accessible in each use case.

1. Informative

These are the images that represent a concept or a piece of product information, e.g., pictures of people or places, or illustrations.

For such images, the alt text must be descriptive enough to explain the image completely.

Please take time for this and write a proper description for users that use screen readers or assistive technologies, to understand the context.

2. Decorative

These are the images that are only used to add visual decoration. They don't convey any information and they are not required to understand the page, e.g., icons, styling elements, images with adjacent descriptions.

Use alt="" for such images.

🚫 DO NOT omit alt attribute in any case.

3. Functional

Sometimes we use images as links or buttons. These are called functional images.

The alt text for these images should properly explain the functionality, e.g., "Click to submit the form" or "Click to open abc[dot]com in new window".

4. Group

There are situations where a group of images is used to represent one piece of information, e.g., a star rating where a few star icons are used to represent a rating.

In such cases, set the alt text of the first image to describe the entire collection and set alt="" for the rest of the items.

5. Text-as-image

Ideally, we should NOT use readable text in images. This is similar to the Informative use case, but more text content in the image.

But some use cases are pretty common where we present text as images, e.g., logos and article banners.

For logos, the alt text should be the name of the organization or product that the logo represents.

For use cases like banners, the alt text of the image should contain the exact text as that of the image.

6. Image Map

If you decide to use an image map, which means a single image divided by using multiple clickable area elements, you should make sure that the main image has a descriptive alt text that explains the overall context, and then each area should have its own descriptive alt text.

7. Complex

These are the most tricky type of images. Graphs, charts, diagrams, bigger illustrations, maps are all examples of complex images.

You will need 2 pieces of description for such images, one summarized and the other detailed.

Let's see the options we have.

7.1: Add alt text with summary and use the aria-describedby attribute to point to an element with detailed information.

7.2: Add alt text with summary and use the longdesc attribute to point to a URI or section of a page with detailed information.

7.3: Use figure element with role="group" to wrap the image and use a nested figcaption element to list down all the details.

7.4: Add alt text with summary and add a link to complete description or actual description beside the image, based on the situation.

Summary

Last but not least, DO NOT use words like "image", "photo" or "picture" in the alt text, e.g., image of a dog. The screen readers will infer the <img> and read something like "image image of a dog". This is definitely NOT what your user will like.

As seen in all of the above use cases, there is absolutely no way that we can omit the alt text. In fact, we must use it with proper and meaningful descriptions.

I hope you enjoyed this quick tip and learned something. I would love to hear your valuable feedback.

Happy coding!

By default, all browsers render an outline as a focus indicator BUT that is different per browser.

As an example, this is how Chrome, Firefox, and Safari will set focus on the same element.

Although every browser renders an outline, the color of that outline might not work well with your app theme or may not be prominently visible to your users.

🛑 This is not a good UX and it should be fixed!

The good news is that we can improve it with CSS. Let's see how.

The following rule will apply a solid blue outline of 2px to all focused elements on your page.

*:focus {
    outline: #007EFF solid 2px;
}

You can change the color based on your app theme or even for a section of the app by using more specific selectors.

But wait, there is more!

The outline will always have corners regardless of the shape of the element. You might want to make it look better and follow the shape of the element.

The following snippet comes to the rescue:

*:focus {
    outline: transparent solid 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007EFF;
}

This is the same button after a pinch of precise CSS (as Darshan Satya says).

You must be wondering why do we have a transparent outline and a colored box-shadow.

Well, the fact of the matter is that box-shadow is not visible in Windows High Contrast mode, and we need the outline so the transparent color can be overridden and used by the OS.

I hope you liked this tip and I will love to hear your feedback.

Happy coding!

Let's turn the tables today!

What should the interviewer do to make the interview better?

Here's what I learned and try to practice when I'm interviewing someone.

Be on time

Time matters to them as much as it matters to us!

When the interview is scheduled, add a reminder on your calendar for at least 2 hours before the interview. This way, you will have enough time to wrap up if you are working on anything important.

If the interview is online, try to find a peaceful corner before the schedule time and join the meeting on time.

But if the interview is in-person, make sure that you have a room booked before the interview time and follow your company's protocol to escort the interviewee to the interview room.

Introduction

Make them feel welcomed, and follow these initial steps:

• Always start with a little introduction of yourself
• Request them to introduce themselves and share their experiences & areas of strength
• If they share something interesting or any of their achievements, compliment it properly

This will give them time to settle and get in a good rhythm.

Main Course

Better stick to the role requirements and/or what's in their resume. Don't under-ask or over-ask based on what you're looking for.

In my personal experience, I have been into situations where the interviewer got derailed towards discussions which were either not relevant to the job role or not in my past experience. These situations demotivated me big time during the interview.

When to dive deep?

Only dive deep into the core role requirements or when they speak really high about something.

For instance, if you are looking for an Angular developer, most of your interview time should be spent on topics related to Angular, and then HTML, CSS and other related stuff.

Or, if they express that they are really expert in something, and you have also good knowledge of that topic, you can dig deeper to see if they really know their strengths or not.

Timebox

Don't forget that you have limited time and you have to cover it all, and leave time for them to ask any questions they may have.

I generally keep interviews to one hour, and divide it like this:

• Introduction - 5 minutes
• Core Topic - 25 minutes
• Related Topics - 25 minutes
• Q&A - 5 minutes

Stay organized

Don't jump between topics while asking questions. Stay organized and assess role requirements one by one.

Take your short notes, if you think you can forget something.

Be empathetic

This is very, very important!

If they lack core knowledge required for the job, try conveying it in a constructive way. May be something like:

"You're good in other areas, but I'm afraid you'll need more time to learn this. Don't worry, it's not too difficult to learn."

If they lack knowledge of minor concepts, correct them right away. This way, you're actually helping them out to know and fix their weak areas.

Try to mentor them with tips and advices, so they can prepare better for their next attempt.

Don't ever disrespect or belittle anyone if they don't perform per your expectations. They might be in a situation we don't know.

And never ever let them feel in case you are not satisfied. Don't change your tone or the flow of the interview. Great advice by my friend Oliver Jumpertz.

What if it's a disaster from start?

Sometimes you might end up with someone who clearly does not fit the role. Still give them some time before you decide to end the interview earlier than expected.

I try asking a few questions from their resume, so they don't get a bad feeling.

Remember, empathy is important!

Ending

No matter how it went, give them some time to ask any questions they may have.

Try to answer all questions except the ones related to salary or outcome of the interview.

I always say something like this: "I will share my feedback with the recruitment team, and they'll take it up from there."

Close positively by wishing them luck.

Remember, you're representing your organization and YOU are the one who's looking for a good resource. You must present it in a way that it creates a good image of yourself and your organization.

These are all my opinions. I'll love to hear yours and may be correct myself too 😊

Banner image by Tima Miroshnichenko from Pexels

There are so many common use cases of animations, including bulging buttons, carousels, parallax, and accordions. But there is a very important aspect to be considered while using animations, i.e. Accessibility.

Although animations look very cool, but that might not be the case with all of the users of your application. There are people who suffer from seasickness aka motion sickness, and some with vestibular motion disorder. These people will have a lot of problem using the interfaces with animations, and in some cases, the animations might affect them adversely.

How to cope with this situation?

By taking this fact into consideration, pretty much all operating systems provide options to reduce motion, so the users see less movements while using their devices. This also applies to website or web applications they use in their favorite web browsers.

And the good news is that all web browsers are enabled to access the user's accessibility settings and make it available to the developers, so they can write their CSS and JavaScript accordingly.

CSS Animations

If you are using CSS animations, you can use the prefers-reduced-motion media query to read user's settings and disable/reduce your animations accordingly.

Here is how your CSS should look like.

// Supported by all browsers except IE
@media (prefers-reduced-motion: reduce) {
    // your styles with reduced or no animations
}

Or it can be only @media (prefers-reduced-motion) to keep things simpler.

JavaScript Animations

In case you have animations implemented using JavaScript, you can use the window.matchMedia method to check for the value of prefers-reduced-motion setting.

Here is how your script should look like.

window.matchMedia('(prefers-reduced-motion)');

It will return an object of type MediaQueryList which looks like this:

{
  media: "(prefers-reduced-motion)",
  matches: false,
  onchange: null
}

The most important value here is the boolean property matches. If it has a value of true, you can disable/reduce animations safely. You can store this object in a class level or global storage so your application can access it.

That is pretty much all you need to help users with seasickness or vestibular motion disorder to visit your website or web application without any problem.

But wait, there is one more thing that we can do to enhance it a little bit. What if the user toggles the reduce motion settings on the fly?

The CSS media query will respond immediately, but the JavaScript solution will require a page load because we're reading the value only once and storing it for reuse. This doesn't sound like a good user experience.

You might have noticed that there is a 3rd property in the MediaQueryList response, that is, onchange. This is an event, which is emitted by the browsers when the value of target media query is changed. We can simply add an event handler and listen to this even, and then update our application accordingly.

This is a very simple example of how your can do it.

const motionMediaMatch = window.matchMedia('(prefers-reduced-motion)');

function motionMediaMatchListener() {
  if (motionMediaMatch.matches) {
    // disable or reduce animations
  } else {
    // enable or resume animations
  }
}

motionMediaMatch.addEventListener('change', motionMediaMatchListener);

And we are done 🙌🏻

Take Away

Accessibility is not an option, it is an imperative! We, developers, should seriously take accessibility in to consideration and make sure that whatever we build, it should be as accessible as possible.

Happy learning, happy coding!

Banner image by Pankaj Patel on Unsplash

I always wanted to explore how these extensions are built and distributed. So recently, I decided to give it a shot and learn the basics. I wanted to practice what I learn, so I thought of a simple idea and started building a tiny extension.

I thought of a personal reminder extension that displays a notification based on the selected configuration. I've named it Aqua Buddy because it reminds me of drinking water. Let's go step by step and build it together 🙌🏼

Getting Started

At the core, Google Chrome Extensions are nothing but a combination of HTML, CSS, and JavaScript code organized in a specific pattern.

An extension starts with a JSON-formatted manifest file called manifest.json file, that contains all the meta data about your extension, for example, name, description, and version of the extension that is displayed on the Chrome Web Store and when the extension is installed.

The manifest.json file should be placed at the root of the extension directory that contains the final distributable code.

Let's create an empty directory for your extension and create the manifest.json file with the following content.

{
  "name": "Aqua Buddy",
  "version": "1.0",
  "description": "I'm your friend 💙 and I'm here to help you stay hydrated!",
  "manifest_version": 2
}

Please note that manifest_version must have a value 2, because version 1 has been deprecated since Chrome 18.

With only the manifest file in place, you can load it in the Chrome browser. Of course it won't have any interface or any functionality, but it will be listed in the extensions area. Please follow these steps to load your empty extension.

1. Navigate to chrome://extensions OR open the Extensions page using the Settings -> More Tools -> Extensions menu.
2. Once you're there, enable the Developer mode using the toggle button the top right corner.
3. Once you enable the Developer mode, you'll see a few buttons on the top. Click the button called Load unpacked.
4. It will open a directory selection dialog
5. Navigate to your extension directory that contains the manifest file and select that directory.
6. You will see your extension being listed with the name, description and version you provided, like below.

Congratulations!!! You have completed your first step, let's make it look beautiful.

Adding Icons

To distinguish and identify your extension visually, you will need icons. If you have an icon set, it's great, otherwise you can find icons from the tons of freely available resources. One of many resources is flaticon, which has a huge collection of beautiful icons. For your extension, you will need following dimensions:

• 16x16 => This will be used as favicon for your extension
• 32x32 => This is often needed for Windows computers
• 48x48 => This will be used on the extensions management page
• 128x128 => This will be displayed on installation and in the Chrome Web Store

If you're using a free icon set, please make sure to give credit to the creator as a goodwill gesture. Please note that some websites make it mandatory in order to allow you to use free resources.

After downloading the icons, place them inside a sub-directory that lives next to your manifest file, and update your manifest file like below.

{
  ...
  "icons": {
    "16": "images/aqua-buddy-16.png",
    "32": "images/aqua-buddy-32.png",
    "48": "images/aqua-buddy-48.png",
    "128": "images/aqua-buddy-128.png"
  }
}

Go to the extensions management page, locate the card for your extension and click the Reload button, and you will see the icon being displayed. These icons are used for the extension management page, the permissions warning, and favicon.

At this point, you will see that the extension icon is greyed out because we haven't added any functionality or user interface to the extension.

Cool, let's get to real work now by adding some visual elements.

User Interface

The extension user interface should be purposeful and minimal.

Chrome extensions support multiple types of interfaces and UI features listed below, some of which are required and some are optional.

Browser Action

This is the most commonly used configuration, when your extension is supposed to be working in most cases. Let's register the browser_action field in the manifest file.

{
  ...
  "browser_action": {
  }
}

By adding this, the extension icon will be colorized, which means the extension is available for use, but it doesn't do anything yet.

Page Action

Use this configuration if your extension should be available on certain pages based on some logic. The extension icon will be colorized only when it is available for use, otherwise it will be greyed out.

To define the rules that enable or disable the extension, you will have to use the declarativeContent API.

We don't need any page specific logic in our extension, so we will use "browser_action" configuration.

Icons

If you want to display a different icon in the toolbar, you can register it in the manifest file using the default_icon field in the browser_action or page_action section based on your set up. If this icon is not provided, Chrome will use the icon you provided in the icons section in the manifest file. If that is also not present, Chrome will use a default icon.

Recommendation is to use square png images and provide at least 16x16 and 32x32 sizes.

For this example, we will use the same icon that we have used in the icons section, so our updated manifest file looks like this:

{
  ...
  "browser_action": {
    "default_icon": {
      "16": "images/aqua-buddy-16.png",
      "24": "images/aqua-buddy-24.png",
      "32": "images/aqua-buddy-32.png",
      "64": "images/aqua-buddy-64.png",
      "128": "images/aqua-buddy-128.png",
      "256": "images/aqua-buddy-256.png",
      "512": "images/aqua-buddy-512.png"
    }
  }
}

Great, now our basic set up is completed. Let's get to implement the main functionality of our extension.

There are a number of UI features available to use, which are listed at the end of this article, but we will be using a Popup that will be shown when the users will click the browser icon.

Popup Template

We will create a file called popup.html in the root folder, with these contents.

I have included a trimmed down version of Tailwind CSS and some custom CSS in the ./css/aqua-buddy.min.css file.

This template means nothing until we link it with the extension. So let's get back to our manifest.json file and link it under the browser_action section like this:

{
  ...
  "browser_action": {
    "default_title": "Aqua Buddy",
    "default_popup": "popup.html",
    ...
  },
  ...
}

You might have noticed default_title being added along with default_popup entry. It will simply show a Tooltip when you hover over the extension icon.

Once that is done, if we refresh the extension and click the extension icon, this is how it will look like.

Hoooray!!!

Now that we have the template ready, we need some JavaScript magic to make it work and show us those helpful notifications.

Extension Script

The Chrome extension need to know what events it should be listening to, for example, when the extension is installed or a change in storage or events emitted by other APIs. Such scripts have to be kept in separate files and registered under background section of the manifest.json file, like this:

{
  ...
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  ...
}

You can register multiple background scripts to modularize your code. The persistent property should be kept "false" according to the official docs.

Once these scripts are registered, the extension scans it for all registered events in these scripts.

As we are building an extension for notifications based on user's selected configurations, we will need access to:

• notifications API to show the notifications
• alarms API to trigger notifications based on the user's configuration
• storage API to preserve user's configurations

To consume these APIs, we will have to request permissions from the browser. The permissions can be registered in the manifest.json file like this:

{
  ...
  "permissions": ["alarms", "notifications", "storage"],
  ...
}

Let's create a file named background.js and put these contents in that file.

Please note that the API events need to be registered on the global level, without nesting inside any method, otherwise the events don't work as expected.

You can see that we have 3 event handlers registered at the end of our background.js file, which call further methods declared above. I have tried to keep the method names self explanatory.

You might have noticed that we are linking a file popup.js in our popup.html file, which is to handle the popup logic.

Popup Script

As per official documentation, a popup is just another web page but it does not allow inline scripts. So how can we handle events from our UI elements like buttons or dropdowns?

We can use DOM API to listen to page events and register events for UI elements as well. For example:

document.addEventListener('DOMContentLoaded', function () {
  // This is where we can register and handle the page events and implement other logic
});

Let's add these contents to our popup.js file.

Please note that we are registering all the events every time the popup is loaded, because Chrome destroys the popup and the linked files once it is closed.

Refresh the extension, and ta-da, you have a working Chrome Extension!!!

Packaging for Deployment

To get your extension published on to Chrome Web Store, you will have to put all the contents including images & icons in a zip file. You can use any JavaScript package to minify your HTML, CSS and JavaScript files before creating the zip file.

Deploying the extension

To make your extension available in the Chrome Web Store, you need to register as a Chrome Web Store Developer.

Once you have the account created, you can visit the Developer Dashboard and click the New Item button.

You will see a popup, where you will be asked to upload the zip file you just created. After uploading the file, you will be taken to details section where you will be asked to provide a bunch of information about your extension including justifications of the permissions your requested in the manifest.json file, a bunch of declarations based on what type of data your extension will consume, and the regions you want to choose for distribution.

After filling all the required information, you can finally submit the extension for automated review process. As soon as the review is complete, the extension will be published on the Chrome Web Store.

Sometimes, manual review might be needed based on the permissions and the implementation of the extension, which will increase the review times.

Your extension will be listed on the Developer Dashboard and the status will be changed once it is published publicly.

Maintenance

Once your extension is published, you might want to check the statistics like number of downloads and ratings by the users. You can do that by clicking on the extension from the Developer Dashboard and clicking on the Stats and Ratings options in the left side menu.

You might also want to add new features and make it more beneficial for the users.

The good news is that you can do it as many times as you want, by following these steps:

• Update the extension code
• Update the version in the manifest.json file
• Create the zip file from the final code
• Go to extension details page by clicking on the extension in the Developer Dashboard page
• Click on Package option in the left side menu
• Click on Upload new package button in the top right corner
• Upload the new zip file
• Optionally update the other information if required
• Click Submit for review in the top right corner

And that is all!!!

Other UI Features

1. Popup (Docs): This is the UI that is displayed when you click an extension's icon in the toolbar. It is nothing but an HTML page with links to stylesheets and script files. The only difference is that it does not allow inline JavaScript.

2. Tooltip (Docs): A tooltip is displayed to the users when they hover over the browser icon. Tooltips can be registered in the manifest file as default_title under the browser_action or page_action section based on your set up.

3. Omnibox (Docs): The Chrome's address bar is called omnibox, which provides an API to let the user interact with your extension directly through the omnibox, based on the registered keyword. The following is an example of YouTube's omnibox implementation.

4. Context Menu: (Docs): You can use the chrome.contextMenus API to add items to Chrome's context menu. You will have to add contextMenus to the permissions section in the manifest file.

5. Commands: (Docs): You can define commands in bind them to different key combinations. There is a section for commands in the manifest file, where you can define all your commands and the respective key combinations.

6. Override Pages: (Docs): You can create an extension to override and replace History, New Tab or Bookmarks web page with your own custom web page. A very common example these days is the New Tab page by daily.dev.

Conclusion

You might feel overwhelmed with a lot of information, but I tried to gather as much information here as I can, because the official documentation is pretty scattered at the moment.

I really hope you will like it and add a little value to your learning.

Please feel free to share you feedback in the comments, especially if you feel if I missed something or if something needs improvement.

Also, don't forget to download and install this tiny little extension that will help you stay hydrated 🙌🏻

Happy learning!

So I thought that I'll share my journey and learning with all of you.

First thing first, please take the fear of failure and stress, out of your way.

It's just a matter of willful preparation & commitment and nothing else.

Introduction

IELTS has 4 modules:

1. Listening
2. Reading
3. Writing
4. Speaking

The first 3 are scheduled together in the same sequence, while speaking can be scheduled on the same day or any other day of your convenience.

I personally preferred the same day after other tests and get at once.

Getting Started

Before starting the preparation, judge yourself for all the 4 parts and figure out your weakest to strongest areas.

Mine was listening, so I started preparing for listening. Also, listening is the first module to be tested on the exam day.

When I started my presentation, I found the best resource, in my opinion:

IELTS Liz

Ms. Liz (Elizabeth) is a professional IELTS trainer and she has shared a ton of learning material on her website for all 4 modules.

Bookmark this website and you'll do yourself a favor.

Listening

It is more about focusing on and paying keen attention to the details.

I did extensive research online for free resources to help myself prepare for the listening exam and found 2 really valuable resources, that are totally free.

1. Randall’s ESL Cyber Listening Lab: It has a very good amount of sample listening tests with easy, medium, and hard levels along with a lot of other information. This was my main winning tool in the listening exam.
2. BBC Learning English app ( Android ) ( iOS ): This is a free app available on Google Play and Apple App Store. It has small audio clips that help build vocabulary and improve listening. This is super convenient because it is all audio, so you can listen to it any time you want to.

Reading

This module is generally easy if you have good reading speed, practice reading whatever you like.

I found an amazing trick somewhere for the question where you have to match headings with paragraphs, and the trick really worked for me.

1. Read the first paragraph completely and carefully. It is the introduction of everything in the subsequent paragraphs.
2. Read ONLY the first sentence of all subsequent paragraphs. It is the introduction of that particular paragraph and has all information you need.
3. Read the last sentence of the last paragraph. It is the summary of the whole text above.
4. Jump to the questions as soon as possible.

For the question where you have to fill the blanks or missing words, DO NOT write a word from your own, copy words from the text.

Writing

This is generally the hardest module of all, and the only way to succeed is to practice writing as much as possible.

The most important thing is to practice complex sentences, with proper punctuation. It will win you good points!

Speaking

This is easy but interesting. The big misconception is that you have to have a good accent. Which is totally wrong, DO NOT waste time in learning the accent.

All you need is good vocabulary, grammar, confidence, and a positive body language to support your speech.

When the examiner is speaking, listen to them very carefully without interrupting them and look straight in their eyes so they know that you are actually listening.

Final Words

In each module, listen/read instructions very very carefully and DON'T try to guess anything. That's the most common mistake and causes a lot of trouble.

I've uploaded some learning material on my Google Drive and made it public. If you have anything that can go there, please share it with me and I'll upload it too. The link to the data is here.

I hope you'll find this information helpful and useful. Please share it within your circles so it can benefit more people. Happy learning!!!

I have been into situations where I made major mistakes and I could've easily put the blame on someone or something else, but I chose to admit it in front of everyone, and once that time was over, I felt the trust and respect coming my way.

Sometimes, it can be very tough to take in the criticism, you might feel broken inside, but trust me, it's worth it. Take it positively, correct your mistakes, and move on.

On the contrary, if you are on the other side of the table, try to give plenty of room to others to explain and justify themselves. Help them cope with the situation instead of making it worse. Don't forget, today it's them, tomorrow it could be you. No one is perfect!

Learn to admit your mistakes and empathize with others for theirs. At the end of the day, we're all humans!

Angular is a feature-rich framework that has been globally adopted for small-scale to enterprise-scale web applications. One of the most obvious reasons is the tremendous amount of APIs and utilities available out of the box to help in everyday development. The core team at Angular has done an amazing job in maintaining & thoroughly documenting everything along with the community contributors, but obviously, there are some patches that are contributed by community and still pending to be documented. In this article, we will explore one of those interesting and quite helpful set of utilities, i.e. Coercion.

What is Coercion?

Coercion is the process of implicitly converting data to a required format.

There are no hard and fast rules for coercion or implicit type conversion, and may vary from case to case. But our friends at Angular and the amazing community got us covered for some basic data types like arrays, booleans, numbers, etc. They’ve built a collection of APIs that can be found under @angular/cdk/coercion namespace.

We'll take a detailed look at these utilities in the following sections. In all the examples, we’ll pass data as @Input properties of our example components and try to coerce the passed values through the coercion APIs, but these APIs can be used anywhere based on your needs.

Important:

Angular Ivy comes with stricter type checking that can be optionally disabled by using the TypeScript config (tsconfig.json) flags. We’ll see code examples that work with strict type checking enabled as well. You can read more about Angular’s Template type checking here .

coerceArray

export function coerceArray(value: T | T[]): T[]

Wraps the provided value in an array, unless it is an array already

Consider an example of a component that takes an array of strings and an array of a custom type Person as @Input.

// array-coercion.component.ts

import { Component, Input } from '@angular/core';
import { Person } from './person.interface';

@Component({
  selector: 'array-coercion',
  template: `...`
})
export class ArrayCoercionComponent  {
  @Input() strings: Array<string>;
  @Input() persons: Array<Person>;
}

// person.interface.ts

export interface Person {
  name: string;
  age: number;
}

This is how typically it will be used:

<!-- app.component.html  -->

<!-- person1 & person2 are objects of type Person  -->
<array-coercion
  [strings]="['array item 1', 'array item 2']"
  [persons]="[person1, person2]"
></array-coercion>

It will be nice if we allow passing in a single value and make it work without errors, like this:

<!-- app.component.html  -->

<!-- person1 is an object of type Person  -->
<array-coercion
  [strings]="'array item 1'"
  [persons]="person1"
></array-coercion>

To get this working, we will have to make the following changes to the ArrayCoercionComponent.

// array-coercion.component.ts

import { Component, Input } from '@angular/core';
import { coerceArray } from '@angular/cdk/coercion'; // NEW IMPORT
import { Person } from './person.interface';

@Component({
  selector: 'array-coercion',
  template: `...`
})
export class ArrayCoercionComponent  {
  // In the following code, `@Input strings` will NOT work with strict type checking
  // But we'll make the `@Input persons` to work with strict type checking as well

  // Declare private properties to hold coerced arrays
  private _stringArray: Array<string>;
  private _personArray: Array<Person>;

  // We have to separate this getter and name it differently to be used in the template
  // This works in combination with the `@Input set persons` defined on line 36
  get coercedPersons(): Array<Person> {
    return this._personArray;
  }

  // Use setter to call coerceArray method and convert passed values to arrays
  @Input()
  get strings(): Array<string> {
    return this._stringArray;
  }
  set strings(val: Array<string>) {
    this._stringArray = coerceArray(val);
  }

  // Note that the val parameter excepts a non-array value as well
  // We have to do this for strict type checking to work properly
  // If we don't do this, following error will be thrown:
  // Type 'Person' is not assignable to type 'Person[]'.
  @Input()
  set persons(val: Person | Array<Person>) {
    this._personArray = coerceArray(val);
  }
}

Q: What happens if the passed in value is null or undefined?

A: It gets wrapped into an array as well, see console log below:

You can see, we still get an array but with a single item being null or undefined. I believe this API can be improved in the following ways:

1. If the value is null or undefined, it should not be wrapped in an array, so the consumers can do a simple truthy/falsy check.
2. Remove all null or undefined items from the array, so to make it clean to be bound without additional truthy/falsy checks on array items.

As we have seen in the above examples, using the coerceArray method, we allow the users of our component to pass in an array or a single value without producing any error.

coerceBooleanProperty

function coerceBooleanProperty(value: any): boolean

Converts a value (typically a string) to a boolean

Let’s take an example of a component that takes two boolean flags as @Input.

// boolean-coercion.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'boolean-coercion',
  template: `...`
})
export class BooleanCoercionComponent  {
  @Input() flagOne: boolean;
  @Input() flagTwo: boolean;
}

Example usage of this component will be like the following examples:

<!-- app.component.html -->

<!-- Bound with class properties -->
<boolean-coercion
  [flagOne]="booleanTrue"
  [flagTwo]="booleanFalse"
>
</boolean-coercion>

<!-- Bound with strings expressions -->
<boolean-coercion
  [flagOne]="'true'"
  [flagTwo]="'false'"
>
</boolean-coercion>

Although these examples show the common way of usage, but as these are booleans, it will be great if we can allow using them like these as well:

<!-- app.component.html -->

<!-- Input names only, Angular will set the value as empty string ('') -->
<!-- Supposed to be truthy -->
<boolean-coercion flagOne flagTwo></boolean-coercion>

<!-- Strings true/false, without expressions -->
<boolean-coercion flagOne="false" flagTwo="true"></boolean-coercion>

<!-- Random string values, without expressions -->
<boolean-coercion flagOne="random" flagTwo="random"></boolean-coercion>

<!-- Number, with or without expressions -->
<boolean-coercion [flagOne]="0" flagTwo="1"></boolean-coercion>

<!-- Some object, null or undefined value -->
<boolean-coercion [flagOne]="person1" [flagTwo]="nullValue"></boolean-coercion>

Let’s make some changes to our BooleanCoercionComponent to make it work with the above usage examples as well.

// boolean-coercion.component.ts

import { Component, Input } from '@angular/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion'; // NEW IMPORT

@Component({
  selector: 'boolean-coercion',
  template: `...`
})
export class BooleanCoercionComponent  {
  // In the following code, `@Input flagOne` will NOT work with strict type checking
  // But we'll make the `@Input flagTwo` to work with strict type checking as well

  // Declare private properties to hold coerced booleans
  private _flagOne: boolean;
  private _flagTwo: boolean;

  // We have to separate this getter and name it differently to be used in the template
  // This works in combination with the `@Input set flagTwo` defined on line 36
  get coercedFlagTwo(): boolean {
    return this._flagTwo;
  }

  // Use setter to call coerceBooleanProperty method and convert passed values to boolean
  @Input()
  get flagOne(): boolean {
    return this._flagOne;
  }
  set flagOne(val: boolean) {
    this._flagOne = coerceBooleanProperty(val);
  }

  // Note that the val parameter excepts value of type 'any'
  // We have to do this for strict type checking to work properly
  // If we don't do this, following (or similar) error will be thrown:
  // Type 'string' is not assignable to type 'boolean'.
  @Input()
  set flagTwo(val: any) {
    this._flagTwo = coerceBooleanProperty(val);
  }
}

Note: In the strict type checking scenario, we are allowing any value to be passed, the catch here is that if an object is passed as input, it will also be coerced to a boolean. That’s where the component users will have to be careful while passing the inputs to avoid unwanted results.

The coerceBooleanProperty utility method is super handy to allow your component users with multiple ways to pass boolean inputs.

coerceCssPixelValue

function coerceCssPixelValue(value: any): string

Coerces a value to a CSS pixel value

This might be rare, but if you are in a situation where you have a need to pass a CSS pixel value to a component, which might use that value for some inline styling or some other logic, you will have something like this:

// css-pixel-coercion.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'css-pixel-coercion',
  templateUrl: './css-pixel-coercion.component.html'
})
export class CssPixelCoercionComponent  {
  @Input() padding: string;
}

<!-- css-pixel-coercion.component.html -->

<!-- Using Angular's Style Binding expression -->
<!-- The value of 'padding' will have 'px' appended to it -->
<!-- But it will be limited only to 'px' and won't allow 'em', 'rem' or '%' -->
<!-- Similarly if we do [style.padding.em], it will be limited to 'em' only -->
<div class="default" [style.padding.px]="padding">
  Hello Coercion, this div has {{ padding }} padding!
</div>

<!-- Using Angular's Style Binding expression -->
<!-- We don't use the unit expression, and leave it open for any value to be passed -->
<!-- We can do similar to above example using a custom conversion method -->
<!-- But again, we will limit to a certain unit, e.g. 'px' or 'em' -->
<div class="default" [style.padding]="padding">
  Hello Coercion, this div has {{ padding }} padding!
</div>

The example usage of the above component will be the following:

<!-- app.component.html -->

<!-- This will work if we have [style.padding.px] -->
<css-pixel-coercion [padding]="10"></css-pixel-coercion>

<!-- This will work if we have [style.padding] -->
<css-pixel-coercion [padding]="'10px'"></css-pixel-coercion>

It will be more intuitive if we allow the users of our component to pass in number, pixel value, em, or a value with any other valid unit. Examples of such usage can be like this:

<!-- app.component.html -->

<!-- This gets converted as 10px -->
<css-pixel-coercion [padding]="10"></css-pixel-coercion>

<!-- The following strings get bound as-is -->
<!-- The component users can pass in values with other units as well -->
<css-pixel-coercion [padding]="'10px'"></css-pixel-coercion>
<css-pixel-coercion [padding]="'1em'"></css-pixel-coercion>
<css-pixel-coercion [padding]="'1rem'"></css-pixel-coercion>

To make this work, let’s see how our CssPixelCoercionComponent will look like.

// css-pixel-coercion.component.ts

import { Component, Input } from '@angular/core';
import { coerceCssPixelValue } from '@angular/cdk/coercion'; // NEW IMPORT

@Component({
  selector: 'css-pixel-coercion',
  template: `...`
})
export class CssPixelCoercionComponent  {
  // In the following code, `@Input paddingX` will NOT work with strict type checking
  // But we'll make the `@Input paddingY` to work with strict type checking as well

  // Declare private properties to hold coerced booleans
  private _paddingX: string;
  private _paddingY: string;

  // We have to separate this getter and name it differently to be used in the template
  // This works in combination with the `@Input set paddingY` defined on line 36
  get coercedPaddingY(): string {
    return this._paddingY;
  }

  // Use setter to call coerceCssPixelValue method and convert passed values to pixel string
  @Input()
  get paddingX(): string {
    return this._paddingX;
  }
  set paddingX(val: string) {
    this._paddingX = coerceCssPixelValue(val);
  }

  // Note that the val parameter excepts value of type 'number | string'
  // We have to do this for strict type checking to work properly
  // If we don't do this, following error will be thrown:
  // Type 'number' is not assignable to type 'string'.
  @Input()
  set paddingY(val: number | string) { // [A] More details below
    this._paddingY = coerceCssPixelValue(val);
  }
}

[A]: As we saw that the coerceCssPixelValue method takes the value parameter of type any which means we could’ve written the setter as:

set paddingY(val: any)

But we restricted it only to pass in number or string only. The reason was that, if the user passes null or undefined, it would be converted to empty strings and if an object gets passed, it would be stringified as [object Object]px. So, we restricted the input but kept the flexibility to pass valid, usable values.

coerceElement

function coerceElement(elementOrRef: ElementRef | T): T

Coerces an ElementRef into an Element, unless it is already an Element

At times, we might need a component to accept a native HTML element as an input of our component and add some functionality around it. An example component might look something like this:

// element-coercion.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'element-coercion',
  template: `...`
})
export class ElementCoercionComponent  {
  @Input() elementOne: Element;
  @Input() elementTwo: Element;
}

Working with Angular, we make use of ElementRef wrapper very frequently, and we might want to allow passing in ElementRef to our component. So we can change the input as:

// element-coercion.component.ts

import { Component, ElementRef, Input } from '@angular/core';

@Component({
  selector: 'element-coercion',
  template: `...`
})
export class ElementCoercionComponent  {
  @Input() elementOne: Element | ElementRef;
  @Input() elementTwo: Element | ElementRef;
}

Now, we can pass in native HTMLElement or ElementRef, as in the following example.

<!-- app.component.html -->

<!-- Assuming that 'htmlElement' is a class property that returns a native HTML element -->
<!-- Assuming that 'elementRef' is a class property that returns an instance of ElementRef -->
<element-coercion
  [elementOne]="htmlElement"
  [elementTwo]="elementRef"
></element-coercion>

So far so good! But, in our ElementCoercionComponent, we needed only native HTML element. This is where we can make use of the coerceElement utility function, and change our component to look like this:

// element-coercion.component.ts

import { Component, ElementRef, Input } from '@angular/core';
import { coerceElement } from '@angular/cdk/coercion'; // NEW IMPORT

@Component({
  selector: 'element-coercion',
  template: ``
})
export class ElementCoercionComponent  {
  // In the following code, `@Input elementOne` will NOT work with strict type checking
  // But we'll make the `@Input elementTwo` to work with strict type checking as well

  // Declare private properties to hold coerced elements
  private _elementOne: Element;
  private _elementTwo: Element;

  // We have to separate this getter and name it differently to be used in the template
  // This works in combination with the `@Input set elementTwo` defined on line 36
  get coercedElementTwo(): Element {
    return this._elementTwo;
  }

  // Use setter to call coerceElement method and convert passed value to Element
  @Input()
  get elementOne(): Element {
    return this._elementOne;
  }
  set elementOne(val: Element) {
    this._elementOne = coerceElement(val);
  }

  // Note that the val parameter excepts value of type 'Element | ElementRef'
  // We have to do this for strict type checking to work properly
  @Input()
  set elementTwo(val: Element | ElementRef) {
    this._elementTwo = coerceElement(val);
  }
}

Sweet, right?

coerceNumberProperty

function coerceNumberProperty(value: any, fallbackValue = 0): number

Coerces a data-bound value (typically a string) to a number

Passing numbers as component inputs or function arguments is another very common practice. Let’s suppose we have a component that takes two numbers as input.

// number-coercion.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'number-coercion',
  template: `...`
})
export class NumberCoercionComponent  {
  @Input() numberOne: number;
  @Input() numberTwo: number;
}

Example usage of this component can be something like this:

<!-- app.component.html -->

<!-- Expression with a number value or a class property -->
<number-coercion [numberOne]="10" [numberTwo]="numericValue"></number-coercion>

It would be great if we can allow the following usage as well:

<!-- app.component.html -->

<!-- Inline string value or an expression with a string value -->
<number-coercion numberOne="10" [numberTwo]="stringValue"></number-coercion>

The input value can also be null or undefined and could cause unwanted situations or runtime errors. Let’s make some changes to our NumberCoercionComponent to make sure that the input values are always valid numbers after we receive them.

// number-coercion.component.ts

import { Component, Input } from '@angular/core';
import { coerceNumberProperty } from '@angular/cdk/coercion'; // NEW IMPORT

@Component({
  selector: 'number-coercion',
  template: `...`
})
export class NumberCoercionComponent  {
  // In the following code, `@Input numberOne` will NOT work with strict type checking
  // But we'll make the `@Input numberTwo` to work with strict type checking as well

  // Declare private properties to hold coerced numbers
  private _numberOne: number;
  private _numberTwo: number;

  // We have to separate this getter and name it differently to be used in the template
  // This works in combination with the `@Input set numberTwo` defined on line 36
  get coercedNumberTwo(): number {
    return this._numberTwo;
  }

  // Use setter to call coerceNumberProperty method and convert passed value to number
  @Input()
  get numberOne(): number {
    return this._numberOne;
  }
  set numberOne(val: number) {
    this._numberOne = coerceNumberProperty(val);
  }

  // Note that the val parameter excepts value of type 'any'
  // We have to do this for strict type checking to work properly
  // 'coerceNumberProperty' method takes a second parameter
  // The second parameter is the fallback or default value
  @Input()
  set numberTwo(val: any) {
    this._numberTwo = coerceNumberProperty(val, 12);
  }
}

There you go!

Conclusion

In the sections above, we saw how these small utilities help us make sure that our component inputs receive the data gracefully with some level of flexibility.

Although this is a small list of utilities, I am sure we can make improvements to the existing ones and add more to this list for the amazing community. I would recommend you to take a look at the implementation of these APIs here .

Looking forward to hearing your thoughts and feedback. Happy coding!

It was in 2015 when I got my first opportunity to lead a team of 5 people, where we had to build a product from the ground up. In my next 2 roles, I was lucky enough to get the same opportunity again, i.e. building a team and delivering critical projects.

Not to brag, but I have been always lucky to be blessed with the most amazing people around me, and WE managed to build the best teams with best results, teams that were cohesive, motivated, and successful.

What did I do in my role as a Lead?

The answer to this question is not a short one. I learned my lessons over time, trying different approaches, from time to time, day over day.

Spoiler Alert: There is absolutely nothing technical!

I took my time to validate these simple but effective approaches before bringing them to you. I made a checklist that can be easily referred to, and you can selectively pick or mix & match any of these based on the situation.

Here you go!

★ Be an example of how you want to see your team

★ Respect everyone equally, this is THE MOST IMPORTANT thing

★ No matter how stressed you are in your personal life, it should NOT reflect at work

★ Humans make mistakes! If someday, it’s one of your team members, don’t embarrass them, don’t hurt their self-respect, and don’t leave them alone to fix it

★ Everyone has a different personality, try best to understand everyone in your team and don’t let any biases occupy your mind

★ Learn from others, everyone knows something you don’t know

★ Share what you know, even general life experiences

★ Try to know the skills of every individual in your team and what everyone is really good and comfortable at

★ Gossip about non-work matters occasionally

★ Plan some recreational activity (game, dinner, etc) at least once a month, be it inside or outside of work premises

★ Make sure to check on their health and that of their loved ones

★ Appreciate frequently even the smallest of things

★ Talk about their future goals and put your best effort to help achieve those goals

★ Build a sense of ownership about work and tasks in hand and make sure everyone gets their due credit of every single contribution

★ Start your day by visiting everyone individually, maybe only 5 minutes, talk about work and inquire if they have any issues or impediments, resolve them as early as possible

★ Encourage and empower everyone by giving them responsibilities, start with small if they’re hesitant

★ Stress and crunch times are common, handling them is the real challenge

• ★ Make sure that everyone is assigned to what they are good at
• ★ Try to help them prioritize and deliver their tasks
• ★ Be the helping hand they need, sit with them if they’re stuck

★ Conflicts are natural and can happen internally within the team, cross-functional team members and some times between team members and management

• ★ Listen!!! Listen to both sides of the story before even thinking of a decision
• ★ Be a diplomat and don’t take sides unless one side is clearly wrong, but more inclination should be towards your team and their benefits
• ★ Don’t bring conflicts to public attention, keep them secret
• ★ Don’t let conflicts change your opinions about either side
• ★ Prevent heated arguments, make sure to realize that at the end of the day, it is just a job

★ Trouble makers, problem child type, and negative people are inevitable

• ★ Identify them sooner than later
• ★ Keep your eyes and ears open
• ★ If they are infecting the team, try to intervene without exposing your intentions
• ★ If you see behavioral changes in your good people, talk to them and win their confidence back and ask them if they need any help
• ★ As soon as you notice things getting out of control, engage HR, and make sure that the situation gets handled positively without injustice to anyone

Most of these might not be new for you, but I am sure that having them listed at one consolidated place will help. Last but not the least, I want to say:

Reward!!! “What gets rewarded, gets repeated”

In the end, I would like to thank you for reading. Please share your thoughts and experiences on the topic. I would love to hear and learn!

Similar types of dependencies exist in the software engineering world, and those dependencies have to be made available by some mechanism generally called Dependency Injection, and that is what I’d like to discuss today.

What is Dependency Injection?

Dependency Injection or DI is generally thought to be a very complex topic, but in truth, it’s quite simple and easy to understand, even if you’re five, as this example illustrates:

How to explain dependency injection to a 5-year-old?

When you go and get things out of the refrigerator for yourself, you can cause problems. You might leave the door open, you might get something Mommy or Daddy doesn’t want you to > have. You might even be looking for something we don’t even have or which has expired.

What you should be doing is stating a need, “I need something to drink with lunch,” and then we will make sure you have something when you sit down to eat.

Source: StackOverflow

DI is a technique under the Inversion of Control (IoC) principle/pattern. In this mechanism, a centralized object is made responsible for providing all the services or things on which our application blocks depend. The application blocks define the list of services or items they need, and they don’t have to worry about how to construct or instantiate those services and how to dispose of them if they’re no longer required.

Angular’s Implementation of DI

In the Angular framework, DI is one of the core mechanisms, taking care of instantiating and loading dependencies for all components, directives, and services.

Angular automatically creates a centralized Injector that is loaded when the application bootstraps. The injector looks for all defined dependencies and maintains instances that can be reused, inside a container, generally referred to as DI Container.

But how does the injector know how to load or create an instance of a dependency? Angular has something called Provider, which “provides” that information to the injector. When you require a dependency, be it a service, function, or value in your application, you have to register a provider in the application injector. The injector will then use that registered information to instantiate and load the dependency whenever it is required.

import { AppService } from './app.service';

@Component({
 selector: 'app-component',
 templateUrl: './app.component.html',
 providers: [ AppService ]
})
export class AppComponent {
 constructor(private appService: AppService) {}
}

A component that depends on a service named AppService

Considering the constructor here, as soon as code reaches a point to instantiate this component class, it informs Angular about the dependency. The Angular process checks if the injector has an existing instance of the dependency. The injector looks for an existing instance in its container and creates one if not, and finally returns the instance to Angular by keeping a reference in the container.

Note: The type of dependency is NOT optional, you have to tell Angular about the object type so it can create its instance when needed. In this example, it’s the AppService type.

In this example, we have only one dependency, whereas, in practice, it can be more. When Angular finally receives the instances of all the dependencies from the injector, it then calls the constructor with those service instances as arguments, of course, in the same sequence.

There is a small caveat in this example; we provided the service reference to Angular using the component's providers' collection. If we use this approach, we are telling Angular to get a new instance of the AppService for each instance of the component. But that probably isn't what we needed, right?

Hierarchical Injector

The Angular’s root or centralized injector is a hierarchical injector, which is one of its most exciting features.

It means if we provide a service for one module or component, the instance of that service will be available to all the descendants of that module or component. In an Angular application, there are multiple places where we can “provide” a service:

AppModule: If we provide a service at this level, it will act as a Singleton service, i.e., one instance for the whole application, unless we override this for a sub-module or component.

AnyOtherSubModule: If we provide services at this level, Angular will create a child injector automatically, which will inherit from the parent injector. This child injector will be responsible for maintaining instances of the services provided for this module and all its children (modules, components, directives, services, etc.) unless we override this in a sub-module or component.

AppComponent: Providing a service at this level means one instance of service is available for AppComponent and all its children, but not other services or AppModule. Angular will again create a child injector inherited from the parent injector to maintain instances of services at the AppComponent level.

AnyOtherSubComponent: As in the example above, one instance of service will be available for one set of instances of this component and it’s children (if they exist). This will also be handled by an automatically created child injector for each instance of the component.

Note: None of these patterns are wrong. It will vary depending on the application needs and whether you want one Singleton instance of a service or you want separate instances of the service for each component and its descendants.

In real-world applications, most of them will have child injectors being created by Angular to manage service instances and provide them whenever needed. Since Angular creates these child injectors automatically, Angular handles all the clean up as well when those child injectors are no longer required.

The @Injectable Decorator

We’ve talked about injecting services into components, directives, and pipes, etc., but haven’t talked about injecting services into services. Look at the example below and guess if it has an error:

export class LoggingService {
 private _logItems: Array<{
   action: string,
   counter: number
 }> = [];

 constructor() {}

 log(action: string, counter: number) {
   this._logItems.push({action, counter});
 }
}

LoggingService: A simple class that maintains a collection of log items

import { LoggingService } from './logging.service';

export class CounterService {
 counter = 0;

 constructor(private loggingService: LoggingService) {}

 increment() {
   this.counter++;
   this.loggingService.log('increment', this.counter);
 }

 decrement() {
   this.counter--;
   this.loggingService.log('decrement', this.counter);
 }
}

CounterService: Another class with a few methods, and depends on the LoggingService class

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

AppModule: @NgModule with both services declared above listed in the 'provider's' collection

There is a problem in the example above and Angular will report an error similar to the one below:

The class ‘CounterService’ cannot be created via dependency injection, as it does not have an Angular decorator. This will result in an error at runtime.

Either add the @Injectable() decorator to ‘CounterService’, or configure a different provider (such as a provider with ‘useFactory’).

This is a very common misconception about the @Injectable decorator. Since the CounterService depends on the LoggingService, we have to tell Angular that CounterService is “injectable”, which means it depends on some other service and that other service will be injected “into” this service. So we have to add the @Injectable decorator before the CounterService declaration like below.

The important thing to note here is that no error was reported for LoggingService because it doesn’t depend on anything for instantiation.

For the sake of performance, consistency, and avoiding any future errors, it’s a best practice to add @Injectable decorator to all service classes. For instance, if we decide to inject some dependency in the LoggingService in the future and forget the @Injectable decorator, Angular will throw the same error.

To fix the above error, simply add the @Injectable decorator to the CounterService class.

import { Injectable } from '@angular/core';
import { LoggingService } from './logging.service';

@Injectable()
export class CounterService {
 counter = 0;

 constructor(private loggingService: LoggingService) {}
}

CounterService with @Injectable decorator

The Super Power of the @Injectable Decorator

The amazing @Injectable decorator has another fascinating usage. We can use it to provide a service at the root injector level, which makes this service globally accessible to all modules, services, components, pipes, etc. No matter where your service resides in the code, you can make it globally accessible by passing in a special object to the @Injectable decorator like below:

@Injectable({
 providedIn: 'root'
})

@Injectable decorator with config to provide service for root injector

Voila! Our service is now globally accessible and can be injected into other modules, services, and components without providing it anywhere else. And one very important benefit that we get here is that our service is now fully tree-shakable. 🙌🏼

By default, Angular CLI generates services with this pattern and recommends having @Injectable decorator being added to all the services. As mentioned earlier, it’s a best practice to have it with all service classes, but it is up to the application requirements and use cases to choose for other available options and patterns.

As of Angular 9, the Angular team introduced two more value options for the providedIn property, listed below:

'platform': Since we can have multiple Angular applications running on one page, for instance, if you have a micro frontend architecture, you can share services across applications using this value.

'any': Use this value to instruct Angular to create a global instance of this service for all eagerly loaded modules, and a separate instance of this service for all lazy-loaded modules that inject it.

Take Away

In this article, we saw how Dependency Injection works in an Angular application and how we can utilize the injectors and providers to get instances of our services based on our requirements. However, this topic is broad and I have only skimmed the surface. But I hope that my simplistic approach was able to provide you with a broad understanding of Angular DI and inspired you to consider it for your next development.

The example code for this article is attached for download here.

When working in such a heterogeneous environment, it's very common, rather inevitable, to have conflicts and arguments over so many various matters. Mostly it's because of the aforementioned differences as all those attributes mold our personality. Also, for some people, some days are just different. We're all humans, and we have personal lives and personal matters, which affect our day to day personality as well.

If we realize and understand these facts, we can very easily avoid workplace conflicts and stress, most of the time, if not every time. By keeping all these realities in mind, we should:

1. Practice empathy before judging and jumping to conclusions
2. Try to listen and absorb the other person's point of view
3. Think with different angles, if possible
4. Try to put yourself in the other person's shoes

Another interesting theory I have is, that we should try to build a Professional Personality, which might be different from what our real personality is. For instance, someone might be an introvert or a shy person, which is natural, but that doesn't help much in professional life. They have to be vocal and good in communication while at work, which is kind of going against their personality, but it is really very important.

Workplace harmony is critical for any organization and more so for every professional to do their job peacefully. We should all learn to compliment each other in a positive way as good humans.

I would love to hear your thoughts!