DEV Community: Uzochukwu Eddie Odozi

How to create a custom toast component with React

Uzochukwu Eddie Odozi — Mon, 27 Apr 2020 08:42:47 +0000

Toast notifications are modal-like elements used to display information to a user. The toast notifications might sometimes hold some call to action buttons. The information displayed are usually brief and could be auto-expiring or removed through a user action. Toast notifications do not interfere with the user's interaction whether on a website or mobile device. A common use of toast notifications are to display

success message upon successful form submission or API request
error message upon failed API request
chat information and so on

In this tutorial, I'll show you how to create a custom toast component with React. We'll use React hooks like useState and useEffect. After creating the toast component, we'll add some simple buttons that will be used to try out and display the toast on our page.

Here is how the toast notifications will look after been created and when called.

Check the full source code for this tutorial on the Github repo.

We will create some buttons to trigger the toast notifications and this is how the page will look.

Auto Delete Toast after 3 Seconds

Getting Started

To get started, we need to create our react application. The assumption here is that node.js is already installed on your computer (Get Node.js). Node.js comes with npm and the tool that will be used to create our react app is called create-react-app which we can use with npx (npx is bundled with npm).

Open a terminal and navigate to the directory where you want to add your project and type

npx create-react-app react-toast

You can create the project with whatever name you want. We are not going to install any other module inside the project. We will use the modules added by the create-react-app tool.

The default folder structure looks like below

The src folder is where our work will be done. Inside the src, create a new folder called components (inside this components folder, we are going to add our toast component and button component).

In React, you can either use class components (which requires you to extend a React.Component and create a render function that returns a react element) or functional components (which is just a plain javascript function that accepts props and returns a react element). We are going to use functional components throughout. By default create-react-app uses functional components.

Inside the App.js component, you can remove the content of the header element and then change the header to a div with className="app-header". The parent element class should be changed to app. The function should also be changed to an arrow function because I prefer it that way (You can use the default function).

import React from 'react';

import './App.css';

const App = () => {
    return (
        <div className="app">
            <div className="app-header">

            </div>
        </div>
    );
}
export default App;

Next is to add the css style into the App.css file. Delete the contents of the App.css and add the styles into the file. You can get the css styles from HERE.

Some of the elements with styles in the css file have not been added. The elements will be added as we progress. The styles consist of some simple css properties.

Also, delete the contents of index.css and add

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
body {
  margin: 0;
  font-family: 'Roboto', 'sans-serif';
}

Toast Component

Now, let us create our toast component. Create a folder called toast inside the components directory and then add two files Toast.js and Toast.css. We are using .js extension for our javascript files and also css (Optionally, you can use jsx and scss files).

Inside the Toast.js file, create an arrow function called Toast and export function as default. Set the parent element to empty tags.

import React from 'react';
const Toast = () => {
    return (
        <>

        </>
    )
}
export default Toast;

The function will always return a react element. The first element to add is the notification container which will wrap every notification toast element that will be displayed.

<div className="notification-container">
</div>

Later, we are going to add a dynamic property that will display the position of the notification container. Next, we add other elements inside the container to display the button, image, title and message.

<div className="notification toast">
    <button>
        X
    </button>
    <div className="notification-image">
        <img src="" alt="" />
    </div>
    <div>
        <p className="notification-title">Title</p>
        <p className="notification-message">Message</p>
    </div>
</div>

The button will be used to close a particular toast notification. An image icon will be displayed depending on the type of toast. We are essentially going to be having four types of toast, which are

Success
Danger
Info
Warning

Import the Toast.css file into the component and add the below css style for the notification-container into the Toast.css file

.notification-container {
    font-size: 14px;
    box-sizing: border-box;
    position: fixed;
}

We are going to have four different positions for the toast elements. The positions are

Top Right
Bottom Right
Top Left
Bottom Left

Below are the css styles for the position

.top-right {
    top: 12px;
    right: 12px;
    transition: transform .6s ease-in-out;
    animation: toast-in-right .7s;
}

.bottom-right {
    bottom: 12px;
    right: 12px;
    transition: transform .6s ease-in-out;
    animation: toast-in-right .7s;
}

.top-left {
    top: 12px;
    left: 12px;
    transition: transform .6s ease-in;
    animation: toast-in-left .7s;
}

.bottom-left {
    bottom: 12px;
    left: 12px;
    transition: transform .6s ease-in;
    animation: toast-in-left .7s;
}

The positions will be added dynamically depending on the position props added by the user to the toast component.

The next css styles are for styling the notification class which contains the remove button, image, title, message and the animations to slide the toast from either left or right of the page. Copy the styles from the github repo and add into the Toast.css file.

Get the toast component css from here

In other for us to see what the toast component looks like, let us use some properties like the position that will be passed as props inside the toast component.

Props which stands for properties are used for passing data from one component to another in react.

The toast component will take in two props which are toastList and position. The toastList will be an array that will contain some objects and the position will determine the placement of the notification container on the page. We are going to add a props parameter to the Toast function and then use es6 object destructing to get the toastList and position props.

const Toast = (props) => {
    const { toastList, position } = props;

    return (
        <>
            ...
        </>
    )
}
export default Toast;

To use the position prop, let use add it to the element with className notification-container. Remove the class from the notification-container and then add

className={`notification-container ${position}`}

Also, remove the class from notification div and add

className={`notification toast ${position}`}

Whatever position prop is passed into the toast component, it will be added as a class to those elements (recall we already set the css position properties in the css file).

Since the toastList is an array, we can loop through it directly in the html but i am not going to do that. Instead I will use the useState hook to create a new property. useState hook allows you to create a stateful variable, and a function to update it (React Docs).

First, import the useState and useEffect hooks from react where the useState will be used to create a variable and function to update the variable and the useEffect hook will be called when there is a re-rendering required.

import React, { useState, useEffect } from 'react';

Add this after the props destructuring

const [list, setList] = useState(toastList);

The default value of the useState list is going to be whatever the default value of the toastList array is.

Add the useEffect method and use the setList to update the list property.

useEffect(() => {
    setList(toastList);
}, [toastList, list]);

The useEffect hook takes a function and an array of dependencies. The setList method is used to update the list array whenever a new object is added to the toastList array (which is passed as a prop). The array consist of dependencies that are watched whenever there is a change to their values. In other words, the useEffect method will always be called when there is an update to the values in the dependencies array.

Let us now loop through the list array inside the html. We are going to use the map method to loop through the array.

import React, { useState, useEffect } from 'react';

import './Toast.css';

const Toast = props => {
    const { toastList, position } = props;
    const [list, setList] = useState(toastList);

    useEffect(() => {
        setList(toastList);
    }, [toastList, list]);

    return (
        <>
            <div className={`notification-container ${position}`}>
                {
                    list.map((toast, i) =>     
                        <div 
                            key={i}
                            className={`notification toast ${position}`}
                        >
                            <button>
                                X
                            </button>
                            <div className="notification-image">
                                <img src={toast.icon} alt="" />
                            </div>
                            <div>
                                <p className="notification-title">{toast.title}</p>
                                <p className="notification-message">
                                    {toast.description}
                                </p>
                            </div>
                        </div>
                    )
                }
            </div>
        </>
    );
}

The structure of the objects that will be added to the toastList array looks like

{
    id: 1,
    title: 'Success',
    description: 'This is a success toast component',
    backgroundColor: '#5cb85c',
    icon: ''
}

The background color of the toast will be dynamically added as well but to achieve that we need to add a style property to the notification element. On the element with class notification toast, add a style property that will use the backgroundColor from the list. Add it after the className

style={{ backgroundColor: toast.backgroundColor }}

Let us now use this component inside the App component. Go into the App component and import the toast component. Add this

import Toast from './components/toast/Toast';

After the div element with class name of app-header, add the toast component.

<Toast />

We need to pass the props into the toast component. Go to the github repo and download the svg files for the toast icons. Get files from here. Create a new directory called assets inside the src folder and add all the svg files.

Add the imports to the App component

import checkIcon from './assets/check.svg';
import errorIcon from './assets/error.svg';
import infoIcon from './assets/info.svg';
import warningIcon from './assets/warning.svg';

Each icon will be used for the different types of toast notification which are success, danger, info and warning.

To try out the toast component, add this array inside the App component (this is just for testing)

const testList = [
    {
      id: 1,
      title: 'Success',
      description: 'This is a success toast component',
      backgroundColor: '#5cb85c',
      icon: checkIcon
    },
    {
      id: 2,
      title: 'Danger',
      description: 'This is an error toast component',
      backgroundColor: '#d9534f',
      icon: errorIcon
    },
];

Pass this testList as a prop to the toast component and also set the position to bottom-right.

<Toast 
    toastList={testList}
    position="bottom-right"
/>

Recall that the toastList and position are props that we destructured inside the Toast component.

Open the project in a terminal and run npm start or yarn start to start the server. The server should run on port 3000. This is the result on the browser

You can change the position to see the the placement of the toasts on the page.
If you hover on the toast elements you will see some effects. Add this objects to the testList array.

{
    id: 3,
    title: 'Info',
    description: 'This is an info toast component',
    backgroundColor: '#5bc0de',
    icon: infoIcon
},
{
    id: 4,
    title: 'Warning',
    description: 'This is a warning toast component',
    backgroundColor: '#f0ad4e',
    icon: warningIcon
}

After adding the other objects to the array, this it how the toast components look.

Let us add some prop-types to the toast component. React provides type-checking features to verify that components receive props of the correct type. PropTypes helps to make sure that components receive the right type of props.

Import prop-types from react. The toast component expects two props toastList and position.

import PropTypes from 'prop-types';

Add the following props check below the toast component arrow function.

Toast.defaultProps = {
    position: 'bottom-right'
}

Toast.propTypes = {
    toastList: PropTypes.array.isRequired,
    position: PropTypes.string
}

The position prop is not a required prop (you can make it a required prop if you want). If no position is set, the default position prop will be used.

Create Button Components

Now that we have been able to create a toast component and seen how the components look, let us create a button component and use the buttons to trigger the toast notifications.

Create a new folder called button and add a file called Button.js. Paste the below code inside the file.

import React from 'react';
import PropTypes from 'prop-types';

const Button = props => {
    const { label, className, handleClick } = props;
    return (
        <>
            <button 
                className={className}
                onClick={handleClick}
            >
                {label}
            </button>
        </>
    );
}

Button.propTypes = {
    label: PropTypes.string.isRequired,
    className: PropTypes.string.isRequired,
    handleClick: PropTypes.func
}

export default Button;

The props required inside the button components are the label, className and handleClick which is the onClick method on the button. All we need to do is pass the props into the button component.

Inside the App component, import the Button component and then add a BUTTON_PROPS array just before the App arrow function.

import Button from './components/button/Button';

const BUTTON_PROPS = [
  {
    id: 1,
    type: 'success',
    className: 'success',
    label: 'Success'
  },
  {
    id: 2,
    type: 'danger',
    className: 'danger',
    label: 'Danger'
  },
  {
    id: 3,
    type: 'info',
    className: 'info',
    label: 'Info'
  },
  {
    id: 4,
    type: 'warning',
    className: 'warning',
    label: 'Warning'
  },
];

The reason for adding this array is so that we can pass the Button component inside a loop with the different properties.

Inside the div element with class app-header, add

<p>React Toast Component</p>
<div className="toast-buttons">
    {
        BUTTON_PROPS.map(e => 
            <Button 
                key={e.id}
                className={e.className}
                label={e.label}
                handleClick={() => showToast(e.type)}
            />
        )
    }
</div>

You can see that instead of creating four different buttons, we used one button inside a loop and the loop will display the number of buttons according to the length of the BUTTON_PROPS.

Now create a function called showToast and pass a parameter called type.

const showToast = (type) => {
}

Import the useState hook and then create a new property called list.

const [list, setList] = useState([]);

When any button is clicked, we display the corresponding toast depending on the position selected by the user. If no position is selected, the default position is used.

Inside the showToast method we are going to use a javascript switch statement to pass the corresponding toast object into the toastList array.

Create a new variable

let toastProperties = null;

We are going to randomly generate the ids of each toast notification because the ids will be used when the delete functionality is added. Inside the showToast method, add

const id = Math.floor((Math.random() * 100) + 1);

The ids will be between 1 and 100. Each case inside the switch statement will be for each button.
The cases will be success, danger, info and warning;

Add the following switch cases inside the showToast method.

switch(type) {
    case 'success':
        toastProperties = {
            id,
            title: 'Success',
            description: 'This is a success toast component',
            backgroundColor: '#5cb85c',
            icon: checkIcon
        }
        break;
    case 'danger':
        toastProperties = {
            id,
            title: 'Danger',
            description: 'This is an error toast component',
            backgroundColor: '#d9534f',
            icon: errorIcon
        }
        break;
    case 'info':
        toastProperties = {
            id,
            title: 'Info',
            description: 'This is an info toast component',
            backgroundColor: '#5bc0de',
            icon: infoIcon
        }
        break;
    case 'warning':
        toastProperties = {
            id,
            title: 'Warning',
            description: 'This is a warning toast component',
            backgroundColor: '#f0ad4e',
            icon: warningIcon
        }
        break;
    default:
        setList([]);
}
setList([...list, toastProperties]);

The toastProperties object in each case is the same objects we had inside the testList. You can delete the testList array. If the success button is clicked then the toastProperties object will be added to the list array.

setList([...list, toastProperties]);

The list array is first destructured using the spread operator and the toastProperties object is added. The setList method is used to update the list array. Now the toast component inside the App component should look like this

<Toast 
    toastList={list}
    position="bottom-right"
/>

Here, we are using the bottom-right position to place the toast notifications. Let us create a select tag where the user can select a position from the dropdown.

Add these divs below toast-buttons div inside the App component.

<div className="select">
    <select
        name="position"
        value={position}
        onChange={selectPosition}
        className="position-select"
    >
        <option>Select Position</option>
        <option value="top-right">Top Right</option>
        <option value="top-left">Top Left</option>
        <option value="bottom-left">Bottom Left</option>
        <option value="bottom-right">Bottom Right</option>
    </select>
</div>

The select tag has the name, value and onChange properties. Whenever an option is selected, the position property will be updated and set to the value property on the select tag. The position will be updated using a useState method and inside the selectPosition method of the onChange. Add a new useState method

const [position, setPosition] = useState();

You can see here that the useState does not have a default value. The reason for this is because inside the toast component, we set a default props for the position. If you don't want to set the default props in the toast component, you can just add the default into the useState.

Create a function called selectPosition which takes in a parameter called event. Inside this method, we are going to pass the event.target.value into the setPosition in other to update the position based on the option selected by the user and also pass an empty array into the setList method that will always clear the list array whenever a new position from the tag is selected.

const selectPosition = (event) => {
    setPosition(event.target.value);
    setList([]);
}

Setting the position prop on the toast component to the useState position variable, the toast component inside the App component should look like this

<Toast 
    toastList={list}
    position={position}
/>

If the user does not select any position before clicking on a button, the default position set on the toast component prop-types will be used.

Top Right

Top Left

Bottom Left

Bottom Right

Delete Toast Notification

Now that we have seen how to create a toast component and then display toast notifications when buttons are clicked, let us add the method to delete a toast from the page and also from the toastList array.

We are going to use javascript findIndex and splice methods. We will use the unique id of the toast inside the toastList object array to find the index of the object and the use the splice method to remove the object from the array thereby clearing the particular toast from the page.

Go into your toast component. On the button, add an onClick with a method called deleteToast which takes a toast id as a parameter.

onClick={() => deleteToast(toast.id)}

Create a deleteToast method.

const deleteToast = id => {
    const index = list.findIndex(e => e.id === id);
    list.splice(index, 1);
    setList([...list]);
}

After getting the index of the toast object inside the list array, the index is used inside the splice method which removes the property at that index from the array. The number 1 lets the splice method know we want to remove only one value. After removing the toast, we use the spread operator to update the list array using the setList method. That is all we need in other to delete a toast notification.

Auto Delete Toast Notification

Toast notifications can be auto deleted by adding a delete functionality inside javascript setInterval method after a certain time has passed.

The toast notification component will take two new props:

autoDelete - boolean that determines if the notification needs to be deleted.
autoDeleteTime - a number in milliseconds

Add the new properties to the props object in the toast component.

const { ..., autoDelete, autoDeleteTime } = props;

Multiple react useEffect methods can be added into a functional component as long as the order in which they are called is preserved.

Add another useEffect method

useEffect(() => {
}, []);

Inside this useEffect, add the setInterval() method

useEffect(() => {
    const interval = setInterval(() => {

    }, autoDeleteTime);
}, []);

The second parameter of the setInterval method is the autoDeleteTime which is a number in milliseconds that determines how the setInterval method is called. The interval variable is a number and it needs to be cleared by calling the clearInterval() method. The clearInterval() method clears a timer set with the setInterval() method. The interval is cleared inside a useEffect cleanup method.

useEffect(() => {
    const interval = setInterval(() => {

    }, autoDeleteTime);
    return () => {
        clearInterval(interval);
    }
}, []);

The cleanup method is called after the useEffect method unmounts and starts a new re-render. If the clearInterval method is not called, the interval variable will always hold the last timer value and this will cause issues with how the setInterval method is called.

Let's update the deleteToast method by removing items from the toastList array.

const deleteToast = id => {
    ...
    ...
    const toastListItem = toastList.findIndex(e => e.id === id);
    toastList.splice(toastListItem, 1);
    ...
}

Whenever an item is removed from the list array, that same item is deleted from the toastList array. The deleteToast method will be called inside the setInterval().

The autoDelete property is a boolean and it determines if the notifications are to be automatically removed after a certain time. If the property is true then the notifications are auto deleted, otherwise they are not deleted automatically.

Inside the setInterval(), we need to check if the autoDelete is true and also if list and toastList arrays have values in them. Recall, that the deleteToast method requires an id parameter to be able to remove the toast from the arrays. We will get the id of the first item in the toastList array and pass it into the deleteToast method.

useEffect(() => {
    const interval = setInterval(() => {
        if (autoDelete && toastList.length && list.length) {
            deleteToast(toastList[0].id);
        }
    }, autoDeleteTime);

    return () => {
        clearInterval(interval);
    }
}, []);

Each time the setInterval is called, the id of the item at index 0 is passed into the delete method. The method is skipped if toastList and list arrays have no more values in them. We don't need the defaultProps inside the component, it can be removed.

Add these to the props validation

Toast.propTypes = {
    ...
    autoDelete: PropTypes.bool,
    autoDeleteTime: PropTypes.number
}

Now that we have updated the toast component with the new properties, let us add the values as props to the component from inside the App component. For demonstration purposes, I will add a checkbox input and a text input so a user can dynamically set the values of the props.
Add two useState variables inside the App component.

let [checkValue, setCheckValue] = useState(false);
const [autoDeleteTime, setAutoDeleteTime] = useState(0);

Before the select dropdown tag, add these new elements

<div className="select">
    <input 
    id="auto"
    type="checkbox"
    name="checkbox"
    value={}
    onChange={}
    />
    <label htmlFor="auto">Auto Dismiss</label>
</div>

<div className="select">
    <input 
    type="text"
    name="checkbox"
    placeholder="Dismiss time Ex: 3000"
    autoComplete="false"
    onChange={}
    />
</div>

Css styles for the new elements

input[type=checkbox] + label {
  display: block;
  cursor: pointer;
  margin-top: 1em;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label:before {
  content: "\2714";
  border: 0.1em solid #fff;
  border-radius: 0.2em;
  display: inline-block;
  width: 1em;
  height: 1em;
  padding-top: 0.1em;
  padding-left: 0.2em;
  padding-bottom: 0.3em;
  margin-right: 1em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
}

input[type=checkbox] + label:active:before {
  transform: scale(0);
}

input[type=checkbox]:checked + label:before {
  background-color: #4aa1f3;
  border-color: #4aa1f3;
  color: #fff;
}

label {
  font-size: 14px;
}

input[type=text] {
  margin: 15px 0;
    padding: 15px 10px;
    width: 100%;
    outline: none;
    border: 1px solid #bbb;
    border-radius: 5px;
  height: 1px;
  background-color: #282c34;
  font-size: 14px;
  color: #fff;
}

.disabled {
  cursor: none;
  pointer-events: none;
  opacity: 0.5;
}

.btn-disable {
  cursor: none;
  pointer-events: none;
  opacity: 0.6;
}

::-webkit-input-placeholder {
  color: #acabab;
  font-style: italic;
}

:-ms-input-placeholder {
  color: #acabab;
  font-style: italic;
}

::placeholder {
  color: #acabab;
  font-style: italic;
}

Let's disable the buttons until a position is selected from the select dropdown and also disable the input if the auto dismiss checkbox is unchecked. To achieve that, add the string Select Position to the useState method for position.

const [position, setPosition] = useState('Select Position');

Then on the buttons className, add

className={`${position === 'Select Position' ? `${e.className} btn-disable` : `${e.className}`}`}

If the position is the string Select Position, add the class btn-disable and the class name for each button. If the position is not the string Select Position, then add only the button class name.

On the input text box for adding the auto delete time, add

className={`${!checkValue ? 'disabled' : ''}`}

The input is disabled by default unless the checkbox is checked.

Disabled Buttons and Text Input

Enabled Buttons and Text Inputs

Update the toast component

<Toast 
    toastList={list}
    position={position}
    autoDelete={checkValue}
    autoDeleteTime={autoDeleteTime}
/>

Create a new method onCheckBoxChange inside the component and add it to an onChange method on the checkbox input.

<input 
    id="auto"
    type="checkbox"
    name="checkbox"
    value={checkValue}
    onChange={onCheckBoxChange}
/>

const onCheckBoxChange = () => {
    checkValue = !checkValue;
    setCheckValue(checkValue);
    setList([]);
}

The default value for useState checkValue is false. If the checkbox is clicked, the value is changed to its opposite since it is a boolean and then updated with setCheckValue method and the list array is reset to empty.

Add an onInputChange method to the text input

<input 
    className={`${!checkValue ? 'disabled' : ''}`}
    type="text"
    name="checkbox"
    placeholder="Dismiss time Ex: 3000"
    autoComplete="false"
    onChange={onInputChange}
/>

const onInputChange = (e) => {
    const time = parseInt(e.target.value, 10);
    setAutoDeleteTime(time);
}

We cast the value from a string to a number and pass into the setAutoDeleteTime method.
Below is a display of the result of auto deleting toast notifications.

Auto Delete after 2 Seconds

Auto Delete after 3 Seconds

Check the full source code for this tutorial on the Github repo.

If you prefer to watch a video tutorial so as to watch me as i code, you can checkout the YouTube video here

Conclusion

So far we have created a simple custom toast component that is capable of displaying multiple notifications. We used the popular react hooks useState and useEffect. This tutorial showed how you can display and dismiss a toast notification You can customize the toast component the way you feel like.

THINGS THAT WILL HAPPEN IN THIS DECADE (2020s)

Uzochukwu Eddie Odozi — Sun, 26 Apr 2020 07:48:50 +0000

According to Wikipedia, the future is the time after the present. Its arrival is considered inevitable due to the existence of time and the law of physics. Well, here we are not going to talk about the laws of physics but instead about the technological events that will happen in this decade.

As we know, sometimes the future is uncertain. Over the years, predictions have been made about the future. According to experts in different fields of endeavours, predictions have been made about this decade. For now, this is how we see the future.

ADVANCEMENT IN QUANTUM COMPUTING

Google scientists announced in October 2019 that they have achieved quantum supremacy. The phrase quantum supremacy was coined by physicist John Preskill and it refers to the use of a quantum computer to make a calculation much faster than we know how to do it even with the fastest supercomputers available. Quantum computers are complicated and fragile machines that will one day work alongside todays computers and supercomputers. It is worth noting that they won’t be ready in the next ten years, but within this decay a significant advancement will be achieved.

THERS'S AI EVERYWHERE

Will artificial intelligence destroy the human race in the next decade? We don't know. What's for sure is that AI will play an increasing role in our lives. The change will be gradual, according to Dan Pitchford, co-founder of AI Business, but it will also be profound. "In ten years' time we will likely be living and working in a way that has AI organically embedded within all aspects of our lives," he says.

OBJECTS ARE DOING IT FOR THEMSELVES

We need to get used to the idea of things doing stuff for themselves. That means robots, drones, vehicles and appliances. And it means more than just a machine being programmed to do things – AI will allow machines to interact with their surroundings and with people. According to Gartner research, these ‘autonomous things’ will increasingly be deployed in uncontrolled public spaces. And we may see them acting collaboratively in swarms on the factory floor or working together in the delivery market: an autonomous delivery vehicle could move goods to the target area, and then robots and drones on board the vehicle could affect the final delivery.

5G MOVES TO THE NEXT PHASE

The arrival of 5G and its potential benefits have well been documented. The less well-known phase of 5G technology is focused more on industrial applications. It is designed to improve 5G performance indoors, particularly in environments that have been historically challenging, such as buildings with metal shelving or conveyor belts. Gradually, over the next ten years, this will bring flexible, massive-scale connectivity to the world of manufacturing and logistics, further supporting the rise of Industry 4.0 and the smart factory.

RISE OF COBOT (COLLABORATIVE ROBOTS)

Will you be replaced by a robot in the coming decade? Probably not. Will you find yourself working next to a robot? Possibly. According to McKinsey Global Institute, about 30 per cent of the activities in 60 per cent of all occupations could be automated. So-called ‘cobots’ are designed to physically interact safely with humans in a shared workspace. They’re relatively cheap and can be easily programmed to do a variety of tasks. We humans are likely to concentrate on more complex, creative stuff.

BLOCKCHAIN FOR ALL

The first blockchain technology was introduced in the last decade. There were lots of hype, but it seemed to have stalled. Other than cryptocurrency making lots of money for some and allowing others to lose quite a lot, the technology seems to have had little effect on our daily lives. But with time, once all the elements of blockchain are fully developed and deployed, including tokenization and decentralization, it could well start to change our lives in a significant way.

HUMAN COMPUTER-PLUS

The aim of linking the brains with computers will see a significant development in this decade. It is unlikely we will be communing with our computers in the 2020s, but other ways of augmenting our bodies with technologies may flourish, from chips embedded under our skin to good Google Glass, allowing us to see the world through data-aided eyes.

REALITY GETS MORE EXTENDED

Overlaying digital information onto the real world has countless applications, from healthcare to real estate, and from entertainment to outdoor navigation, and its commercial potential seems equally limitless. This decade will see reality get more extended.

Conclusion

There are lots of technological advancements that will be made in this decade

In ten years' time, I hope we can all have a l

Number Formatter in Javascript

Uzochukwu Eddie Odozi — Tue, 18 Jun 2019 14:10:48 +0000

In this short tutorial, we are going to create a simple number formatter using Javascript. Numbers greater than or equal to a thousand will be shortened and replaced with number category symbol. Examples of symbols:

Thousand    = K
Million     = M
Billion     = G
Trillion    = T
Quadrillion = P
Quatrillion = E

And so on.

The method below is the number formatter functionality

numberFormatter(number, digits){
    const symbolArray = [
      { value: 1, symbol: "" },
      { value: 1E3, symbol: "K" },
      { value: 1E6, symbol: "M" },
      { value: 1E9, symbol: "G" },
    ];
    const regex = /\.0+$|(\.[0-9]*[1-9])0+$/;
    let result = "";

    for(let i = 0; i < symbolArray.length; i++) {
        if (number >= symbolArray[i].value) {
            result = (number / symbolArray[i].value).toFixed(digits).replace(regex, "$1") + symbolArray[i].symbol;
        }
    }
    return result;
}

Other values than can be added are

1E12 = 1000000000000
1E15 = 1000000000000000
1E18 = 1000000000000000000

Examples

numberFormatter(1000, 1) = "1K"
numberFormatter(10000, 1) = "10K"
numberFormatter(2134564, 1) = "2.1M"
numberFormatter(5912364758694, 3) = "5.912T"

You can follow me Twitter and also subscribe to my YouTube channel.

Build a Password Strength Checker With Angular

Uzochukwu Eddie Odozi — Sat, 15 Jun 2019 13:49:11 +0000

In this post, we are going to create a simple form with password input field. We will then add a password strength checker functionality. We are going to add the following rules to the password input form. Password

Must be at least 6 characters long
Must contain at least one uppercase letter
Must contain at least one lowercase letter
Must contain at least one number
Must contain at least one special character

We are going to validate each of the rules above using RegExp and then display some color bars to indicate how strong the password is. At the end of the post, we are going to see how to use

Reactive Forms (In a simple way)
Component interactions using @Input and @Output decorators
Colors and bars to represent password strength

Here is how the final app will look like:

Getting Started

First, we are going to create a new project using the Angular CLI by running the command



ng new password-strength

In this application, there is no navigation so there is no need to add a routing file.

For simplicity sake, let us install bootstrap 4.



npm install bootstrap

Add this



@import '~bootstrap/dist/css/bootstrap.min.css';

to your styles.scss or styles.css file in the src directory of your project. Note that you can use any other library of your choice for styling the app.

If you are using yarn



yarn add bootstrap

Creating the Form

In the app.module.ts, add the import of ReactiveFormsModule



import { ReactiveFormsModule } from '@angular/forms';

Then add the ReactiveFormsModule into the imports array



imports: [
    BrowserModule,
    ReactiveFormsModule
]

You can use a Template Driven Form if you so choose. Here I decided to go with with Reactive Forms.

Now, in the app.component.html file, add the html template



<div class="container">
  <div class="row">
      <div class="col mt-5 col-xs-6 col-md-6 col-lg-6">
        <h2>Check Password Strength</h2>
        <br>
      <form>
        <div class="form-group">
          <input type="password" class="form-control" autocomplete="off" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-primary">
          Submit
        </button>
      </form>
    </div>
  </div>
</div>

The form contains a password input field. The classes added to the div elements are from bootstrap 4.

In the app.component.scss or app.component.css depending on what you selected, add to the file



.col {
  margin: 0 auto;
  text-align: center;
}

To use a Reactive Form in Angular, we need to add a formGroup property to the form and then add a formControlName to the input field.

On the form, add



[formGroup]="passwordForm"

So the form looks something like



<form [formGroup]="passwordForm">
    ...
</form>

Also, on the password input field, add



formControlName="password"

Next, we need to initialize the Reactive form. In the app.component.ts file, add the imports



import { FormGroup, FormBuilder, Validators } from '@angular/forms';

The FormGroup tracks the state of the form-control elements. The FormBuilder helps to reduce the boilerplate required to create the form. Validators provides some set of built-in validators to be used. We are using the classes so we can initialize the form.

Create a property of type FormGroup.



passwordForm: FormGroup;

We need the construtor and ngOnInit methods. First, we need to implement the OnInit interface and then import from @angular/core. The export class line will become



export class AppComponent implements OnInit

Add both methods



constructor(private fb: FormBuilder) {}

ngOnInit() {
    this.passwordForm = this.fb.group({
        password: ['', Validators.required],
    });
}

In the constructor, the FormBuilder class is injected so that we can use methods available in the class. In the ngOnInit method, the passwordForm is initialized using the FormBuilder and then validating the password field. The key in the object inside the group method must match the formControlName in the template. The required validator is added to the input field. Now we have the form and the password field setup. We can now create a new component that will be used to display the password strength.

Password Strength Component

The password strength component which will be added as a child of the main component will be used to display some bars that will indicate the strength of the password the user types. As the user types into the password field, the bars will automatically be updated with different colors.

To create a new component, we run



ng generate component password-strength

This component will be automatically added to the app.module.ts file. In the password-strength.component.html file, add



<div class="strength">
  <ul class="strengthBar">
    <li class="point" [style.background-color]="bar0"></li>
    <li class="point" [style.background-color]="bar1"></li>
    <li class="point" [style.background-color]="bar2"></li>
    <li class="point" [style.background-color]="bar3"></li>
  </ul>
  <br>
</div>

Add these properties to the password-strength.component.ts file



bar0: string;
bar1: string;
bar2: string;
bar3: string;

In the styles file of the component, add



.strengthBar {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
  vertical-align: 2px;
}

.point:last-of-type {
  margin: 0 !important;
}

.point {
  background: #DDD;
  border-radius: 2px;
  display: inline-block;
  height: 5px;
  margin-right: 1px;
  width: 62px;
}

p {
  font-weight: bold;
  font-size: 20px;
}

Go to the app.component.html file and add the password-strength component as a child component by using the component selector name <app-password-strength></app-password-strength>. The component should be added after the password input field.



<div class="container">
  <div class="row">
      <div class="col mt-5 col-xs-6 col-md-6 col-lg-6">
        <h2>Check Password Strength</h2>
        <br>
      <form [formGroup]="passwordForm">
        <div class="form-group">
          <input type="password" class="form-control" formControlName="password" autocomplete="off" placeholder="Password">
          <app-password-strength></app-password-strength>
        </div>
        <button type="submit" class="btn btn-primary">
          Submit
        </button>
      </form>
    </div>
  </div>
</div>

The component consists of a div with ul and li tags. The li tags represent the bars on the page. As a user types into the input field, the color that will be specified in the component's class will be displayed. Once the password matches all specified characters, the color of all bars will become green.

Password Strength Functionality

The interaction between the parent and child component will be achieved using the @Input decorator. The password from the password form will be bound to an Input property coming from the password strength component. There are different ways whereby the data can be intercepted. We are going to intercept the data using the ngOnChanges method.

Let us create an input property called passwordToCheck



@Input() public passwordToCheck: string;

Then create an array of colors to be displayed on the bars. The number of colors in the array should match the number of bars in the component.



private colors = ['darkred', 'orangered', 'orange', 'yellowgreen'];

Now, let us create a method to check the strength of the password. Add the following code



checkStrength(p) {
  // 1
  let force = 0;

  // 2
  const regex = /[$-/:-?{-~!"^_@`\[\]]/g;
  const lowerLetters = /[a-z]+/.test(p);
  const upperLetters = /[A-Z]+/.test(p);
  const numbers = /[0-9]+/.test(p);
  const symbols = regex.test(p);

  // 3
  const flags = [lowerLetters, upperLetters, numbers, symbols];

  // 4
  let passedMatches = 0;
  for (const flag of flags) {
    passedMatches += flag === true ? 1 : 0;
  }

  // 5
  force += 2 * p.length + ((p.length >= 10) ? 1 : 0);
  force += passedMatches * 10;

  // 6
  force = (p.length <= 6) ? Math.min(force, 10) : force;

  // 7
  force = (passedMatches === 1) ? Math.min(force, 10) : force;
  force = (passedMatches === 2) ? Math.min(force, 20) : force;
  force = (passedMatches === 3) ? Math.min(force, 30) : force;
  force = (passedMatches === 4) ? Math.min(force, 40) : force;

  return force;
}
```
First, a property called force of type number is defined which is used as the return type of the method. The value assigned to the property will be used to determine the strength of the password. The 2nd part is where the regular expressions are defined. The regex of special characters, lowercase test, uppercase test, number test and regex test. The 3rd part is an array that contains the regular expressions to be used. In the 4th part, a property called `passedMatches` of type number is defined and its value is incremented inside the loop depending on the regular expression that is satisfied. So, if the first criteria in the flags array is met, the value of `passedMatches` is incremented by 1. If the second criteria is met, the current value is also incremented by 1 until all criterias are met. Otherwise, the value 0 is added. The 5th part checks if the password length is greater than 10 and then multiplies the `passedMatches` value by 10. The 6th part is where the length of the password (which needs to be at least 6 characters) is checked. The 7th part is where the final `force` value is set based on the value of `passedMatches`. Then the force value is returned.

Next we need to bind the `passwordToCheck` input property to the form password. Add `[passwordToCheck]="signupForm.value.password"` to the child component inside `app.component.html`.
```html
<app-password-strength [passwordToCheck]="signupForm.value.password"></app-password-strength>
```
The `passwordToCheck` is the `@Input` property defined in the password strength component. It is bound to the password value from the `formGroup`. So whatever value is stored in the password value field, it will be received in the child component.

Like i said earlier, there are multiple ways the password value can be intercepted in the child component. You can checkout out this [documentation](https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding). We are going to be using the ngOnChanges method to intercept the changes. 

Implement the `OnChanges` interface in the `PasswordStrengthComponent` class and then import the interface from `@angular/core`. Next is to add the method
```js
ngOnChanges(changes: { [propName: string]: SimpleChange }): void {
  const password = changes.passwordToCheck.currentValue;
  this.setBarColors(4, '#DDD');
  if (password) {
    const c = this.getColor(this.checkStrength(password));
    this.setBarColors(c.index, c.color);
  }
}

private getColor(s) {
  let index = 0;
  if (s === 10) {
    index = 0;
  } else if (s === 20) {
    index = 1;
  } else if (s === 30) {
    index = 2;
  } else if (s === 40) {
    index = 3;
  } else {
    index = 4;
  }
  return {
    index: index + 1,
    color: this.colors[index]
  };
}

private setBarColors(count, col) {
  for (let n = 0; n < count; n++) {
    this['bar' + n] = col;
  }
}
```

The `ngOnChanges` method takes in property of type `SimpleChange`. In the SimpleChange property, we have the `passwordToCheck` input property which contains the password's currentValue. As the value changes, the password is intercepted by the ngOnChanges method. The `setBarColors` defined before the if statement is used to set a default color for the bars. If the password is available then the `getColor` method is called and it takes in the `checkStrength` which in turn takes the password as a parameter. Note that the `checkStrength` returns a number which is used in the `getColor`. The `setBarColors` is used to set the colors in the colors array on the bars.

In the `getColor` method, if the return value of the `checkStrength` is equal 10 then we set the index value to zero and so on. Then an object with the index and color is returned. Recall that the bars have a style property with a number appended to the name. E.g: `bar0, bar1, bar2, bar3`. The `setBarColors` is just used to set the colors from the array on the bars.

![](https://thepracticaldev.s3.amazonaws.com/i/27lvks38xkhyuyjft9xi.gif)

We can add more functionalities by displaying a message as the user types and also disabling the submit button unless the password is valid.

### Disable Button
To disable the submit button, we are going to use the `@Output` decorator to send data from child to parent. In this case from the password strength component to the main component.

Add this line to the password strength component class:
```js
@Output() passwordStrength = new EventEmitter<boolean>();
```

Add the `Output` interface and `EventEmiiter` to the `@angular/core` imports. The EventEmitter will emit a boolean value. In this case a true value when the password becomes valid and the emitted value will be used to enable the submit button.

In the `ngOnChanges` method, add the below line into the if statement
```js
const pwdStrength = this.checkStrength(password);
pwdStrength === 40 ? this.passwordStrength.emit(true) : this.passwordStrength.emit(false);
```
Here we are setting the return value of `checkStrength` method to a variable. Then using a ternary operator to emit a boolean value. If pwdStrength is equal to 40 then emit `true`. If the pwdStrength is less than 40 then emit `false`. The line is the same as
```js
if (pwdStrength === 40) {
  this.passwordStrength.emit(true)
} else {
  this.passwordStrength.emit(false)
}
```

The next step is to use this `@Output` eventemitter in the main component. In the component `<app-password-strength></app-password-strength>`, add
```js
(passwordStrength)="passwordValid($event)"
```
which then becomes
```html
<app-password-strength [passwordToCheck]="signupForm.value.password" (passwordStrength)="passwordValid($event)"></app-password-strength>
```

The `passwordStrength` is the output property while `passwordValid($event)` is a method that needs to be defined in the main class component. The `$event` property added as a parameter will contain the emitted boolean value.

Add a new property to the main component's class.
```js
passwordIsValid = false;
```
And also add the `passwordValid` method
```js
passwordValid(event) {
  this.passwordIsValid = event;
}
```
The emitted value from the EventEmitter is set to the `passwordIsValid` property. We can now use this property to disable the button.

On the submit button, add `[disabled]="!passwordIsValid"`.
```html
<button type="submit" class="btn btn-primary" [disabled]="!passwordIsValid">
  Submit
</button>
```
So if the value of `passwordIsValid` is false then the button will be disabled. When the password is valid, the button will be enabled on the page.

![](https://thepracticaldev.s3.amazonaws.com/i/hz2lzr3gqq5w8segtgzx.gif)

The last part to take care of is to add a message as the user types. Create two new variables
```js
msg: string;
msgColor: string;
```
in the password strength component class. Then add a `p` tag after the `ul` tag in the template with the `msg` varaible.
```html
<p [style.color]="msgColor">{{msg}}</p>
```
Inside the if statement in the `ngOnChanges` method, add this switch statement
```js
switch (pwdStrength) {
  case 10:
    this.msg = 'Poor';
    break;
  case 20:
    this.msg = 'Not Good';
    break;
  case 30:
    this.msg = 'Average';
    break;
  case 40:
    this.msg = 'Good';
    break;
}
```
If the `pwdStrength` is 10 then the msg is set equal to `Poor` and so on. So as the user types into the input field, the msg variable is updated. Also, we want to be able to clear the message if the user decides to clear the input field. So add an else part to the if statement and add
```js
this.msg = '';
```
If the input field is empty then the msg should be cleared. In the `getColor` method, add `this.msgColor = this.colors[index]` before the return statement. The method now becomes
```js
private getColor(s) {
  ...
  this.msgColor = this.colors[index];
  ...
}
```

![](https://thepracticaldev.s3.amazonaws.com/i/p9o10dc3bsm8utc32ejw.gif)

# Conclusion
So far we have been able to add the password strength functionality. We saw how to use Reactive Forms in Angular, @Input and @Output decorators for component interactions. You can add more regular expression validations to the password.

[Find the github repo for the sample app here](https://github.com/uzochukwueddie/password-strength).

If you are interested in more Angular related stuff, you can follow me [Twitter](https://twitter.com/uzochukwueddie) and also subscribe to my [YouTube channel](https://www.youtube.com/channel/UCqTEGhqVPcjfhs7_bQjnoRA/videos?view_as=subscriber).

Unsubscribe from RxJS subscriptions using SubSink

Uzochukwu Eddie Odozi — Sat, 08 Jun 2019 11:52:19 +0000

In this article, we will learn how to use the subsink module to unsubscribe from rxjs subscriptions.

Angular uses RxJS as a backbone of the Angular application. RxJS is a javascript library that brings to us the concept of Reactive Programming to the web. In other words, RxJS is a library that uses observables to make it easier to compose callback base code or asynchronous code RxJS Docs.

RxJS uses the concept of Observables and Observers, where the Observable is the source of data and the Observer uses the data. Each time an Observable produces data, the Observer is notified and the data is handled inside the subscribe method. It is very important to note that if this subscriptions are not handled properly, it can lead to the possibility of memory leaks.

In other to prevent memory leaks due to Observable subscriptions, there are different methods or operators from RxJS that can be used as well as modules.

Let us build a sample angular app and then use the SubSink module for unsubscription.

Application Setup

First, we need to create a new angular project (With assumption that you have the angular cli). Run the command

ng new sub-sink

Install bootstrap 4

npm i bootstrap

Add this to your styles.css file

@import '~bootstrap/dist/css/bootstrap.min.css';

We need two new components and a service. The first component will only subscribe to the Observable while the second component will subscribe to the Observable using SubSink and then it will be unsubscribed in the ngOnDestroy method of the component. The service will contain two simple methods.

To generate a component

ng g component components/card
ng g component components/subsink

The ng generate command creates two components inside a components directory. The components directory is optional.

Next, create the service file

ng g s services/subsink --flat --skipTests=true

The flag options added to the above command will create the service file without its spec.ts and with its own directory.

In the service file, add

private capitalizeFirstLetter$ = new Subject();

constructor() { }

capitalizeFirstLetter(value: string) {
    if (typeof value === undefined) {
      return;
    }
    let str = value.charAt(0);
    str = str ? str.toUpperCase() + value.slice(1) : '';
    this.capitalizeFirstLetter$.next(str);
}

getString() {
    return this.capitalizeFirstLetter$;
}

Also, import Subject

import { Subject } from 'rxjs';

The capitalizeFirstLetter method just converts the first letter of the string to uppercase and then pass the value into the next method of the Subject (Docs) which is the property capitalizeFirstLetter$. The getString method returns the value passed into the Subject's next method.

Add into the app.component.ts file

showCards = true;

constructor(private subsinkService: SubsinkService) {}

capitalizeFirstLetter(value) {
    this.subsinkService.capitalizeFirstLetter(value);
}

displayCards() {
    this.showCards = true;
}

hideCards() {
    this.showCards = false;
}

and also import the subsink service

import { SubsinkService } from './services/subsink.service';

The capitalizeFirstLetter method gets the method from the subsink service that converts the first letter to uppercase. The displayCards method shows the cards from the components using the showCards property while the hideCards hides the components.

Add these code to the app.component.html template file. It contains a form and the components as children.

<br>
<div class="container" style="text-align: center">
  <h1>Angular Subsink Example</h1>
  <br>
  <div class="row mt-12" >
    <form class="form-inline" style="margin: 0 auto; text-align: center">
      <div class="form-group mx-sm-3">
        <input type="text" class="form-control" #field placeholder="Message">
      </div>
      <div class="form-group mx-sm-3">
        <button type="button" class="btn btn-primary" (click)="capitalizeFirstLetter(field.value)">Capitalize</button>
      </div>
      <div class="form-group mx-sm-3">
        <button type="button" class="btn btn-danger" (click)="hideCards()">Close Card</button>
      </div>
      <div class="form-group mx-sm-3">
        <button type="button" class="btn btn-success" (click)="displayCards()">Open Card</button>
      </div>
    </form>
  </div>
  <br>
  <div class="row mt-5">
    <app-card *ngIf="showCards"></app-card>
  </div>
  <div class="row mt-5">
    <app-subsink *ngIf="showCards"></app-subsink>
  </div>
</div>

<router-outlet></router-outlet>

The template consist of a form with an input and three buttons. The first button calls the capitalizeFirstLetter method, the second button is for hiding the cards and the third button is for displaying the cards. By default, the cards are displayed.

Now to use the getString method inside the card component, add to the card.component.ts file and also import the subsink service file

name = 'No unsubscribe component';
message: string;

constructor(private subsinkService: SubsinkService) { }

ngOnInit() {
    this.subsinkService.getString()
      .subscribe((message: string) => {
        this.message = message;
        console.log(`${this.name} - ${message}`);
      });
}

import { SubsinkService } from './../../services/subsink.service';

A name and message variables are defined. The subsink service is injected into the contructor of the class. In the ngOnInit method, we subscribe to the getString method and then console log the values. The message and name properties are used in the card template file.

<div class="col">
  <div class="card text-center bg-primary text-white" style="width: 20rem;">
    <div class="card-header">{{name}}</div>
    <div class="card-body">
      <h5 class="card-title">{{message}}</h5>
    </div>
  </div>
</div>

You can see above that when the user types in a value and then click on the capitalize button, it displays the text inside the card component and also log some values in the browser's console. This is the normal behaviour to expect because the component is active in the DOM. When the close card button is clicked and the card is destroyed, you can see that the component still subscribes to the RxJS Observable when the capitalize button is clicked. This is not a behaviour that we want and it is as a result of not unsubscribing from the Observable. If this behaviour continues, it will lead to memory leak.

One of the many solutions to use in fixing the behaviour is by using the SubSink module (npm). This module absorbs the RxJS subscriptions in an array and when the unsubscribe method is called, it gracefully unsubscribes all added subscriptions.

First, install the subsink module

npm i subsink

Add this to the subsink.component.ts file and import the subsink module and service file

name = 'Subsink component 1 - Test';
message: string;

private subs = new SubSink();

constructor(private subsinkService: SubsinkService) { }

ngOnInit() {
  this.subs.sink = this.subsinkService.getString()
    .subscribe((message: string) => {
      this.message = message;
      console.log(`${this.name} - ${message}`);
    });
}

ngOnDestroy() {
  this.subs.unsubscribe();
}

import { SubSink } from 'subsink';
import { SubsinkService } from 'src/app/services/subsink.service';

Just like how we did with the card component, here we added the extra SubSink property. An instance of the SubSink class is created. Then, the getString method's subscription is set equal to the sink property from the SubSink class.

this.subs.sink = this.subsinkService.getString()
  .subscribe((message: string) => {
    this.message = message;
    console.log(`${this.name} - ${message}`);
  });

The sink property is used to assign subscription so as to add it to the tracked subscriptions. The subscription is removed inside the ngOnDestroy method. That is, when the component is destroyed. Add the template

<div class="col">
  <div class="card text-center bg-success text-white" style="width: 20rem;">
    <div class="card-header">{{name}}</div>
    <div class="card-body">
      <h5 class="card-title">{{message}}</h5>
    </div>
  </div>
</div>

You can see from the above image that when both components are active in the DOM, they subscribe to the Observable but when both components are destroyed, the subscription for the subsink component stops while the other card component still subscribes. In the code above there is only one subscription. There might be cases where more than one subscription is needed in the same class. SubSink provides a method than can be used to add all subscriptions to the array and automatically unsubscribe from all at once.

Add this code to the template file

<div class="col">
  <div class="card text-center bg-warning text-white" style="width: 20rem;">
    <div class="card-header">{{name2}}</div>
    <div class="card-body">
      <h5 class="card-title">{{msg}}</h5>
    </div>
  </div>
</div>

Also, to the subsink component class, add

name2 = 'Subsink component 1 - Test';
msg: string;

subSinkSubscriptions() {
  this.subs.add(
    this.subsinkService.getString()
      .subscribe((message: string) => {
        this.message = message;
        console.log(`${this.name} - ${message}`);
      }),
    this.subsinkService.getString()
      .subscribe((message: string) => {
        this.msg = message;
        console.log(`${this.name2} - ${message}`);
      })
  );
}

Comment the code inside the ngOnInit method and add this new method

this.subSinkSubscriptions();

In the above method, the add method from subsink is used to add the subscriptions to the tracked subscriptions. With this add method, you can add multiple subscriptions to the array and unsubscribe from them all when the component is destroyed.

Conclusion

When a component is destroyed, all custom Observables need to be unsubscribed manually. The SubSink approach is not the only available approach that can be used to unsubscribe from RxJS Observables. There are operators from RxJS like takeWhile and takeUntil that can be used. Also, AsyncPipe can be used to unsubscribe from an Observable as well as the unsubscribe method from RxJS Subscription class.

Find the github repo for the sample app here.

If you prefer watching a video tutorial for this article, you can check it our here

If you are interested in more Angular related stuff, you can follow me Twitter and also subscribe to my YouTube channel.