Modal build better cloud infrastructure for data apps

Modal

A guide on how to master React Native modal complex flows. Do you find using modals in React Native to be a bit of a pain? You’re not alone! Trying to keep control of its open state and repeating the code everywhere you want to use it can be pretty tedious. And the problem only gets worse when you try to create complex flows. Once you get past two modals, your main component is a mess, and the state is all over the place.  I’ve experienced this first-hand in many big companies, like (by AB-InBev), , and now at . Zé Delivery Alfred Delivery X-Team But don’t despair! Most people think that’s the only way. Still, in this article, I will explain how problems start and how to deal with them elegantly while improving your development experience. It will even help you use modals inside and outside React components (in Sagas, for example!) . This article's teachings have been encapsulated in this library: https://github.com/GSTJ/react-native-magic-modal The Challenges Of A “Simple Flow” Imagine this. You work on Facebook, and the Product Team asks for a ‘simple flow’: As a company, I would like to show a modal asking the user to rate the app between 0–5 stars after the user likes a post for the first time. a. I show another modal asking for feedback on how to improve. f the user rates it with less than four stars, b. , show a happy modal asking the user to rate us on the app store. Otherwise , show a ‘thanks’ modal, thanking the user for their support. Finally It isn’t so far-fetched, right? Four modals deep, it brings up a lot of questions from the developer's side. Where should this logic be placed? How should we process the output from the last modal? How do we keep this clean? Can you spot what the code will be like? Do you see yourself writing complex logic to handle the order of the modals, making sure every modal has already transitioned to not visible and having tons of useStates in place? The growth of the problem Imagine you finally did it, you finished the flow, and the Product Team loves the outcome! They now want to expand this flow to show up only once whenever the user likes **anything** for the first time, whether it’s a post, a comment, or a product. How would you approach it? You will have to copy-paste all those four modals on every screen where liking is possible. Maybe you even go ahead and turn all of those into a single component. Even then, adding this wrapper component to every screen is still needed. A few months pass by, and the Development Team now sees the complexity of handling likes differently on every screen and wants to pass this responsibility to a that can be called from anywhere. How do you show the modal only when the [Saga’s Action](https://(https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers) is fired? Sagas run outside React components. Redux Saga I can confidently say that I’ve experienced those scenarios happening. Working in the food delivery industry, we consistently asked the user to rate the app, the delivery, and their purchase. How to avoid it? Let’s start by tackling the state. Managing it is one of the most important things while working with modals. Expose Internal Properties With “useImperativeHandle” In short, allows you to expose internal properties via Ref. If you have a modal component, you could use to expose their `show` and `hide` functions. Meaning it can take care of its own state without delegating to its parent component with , for example.  This can be helpful when you want to make your code clearer and avoid passing down many props. Let’s give it a try: useImperativeHandle useImperativeHandle props import React, { useState, useImperativeHandle } from 'react';
import { Text } from 'react-native';
import ModalContainer from 'react-native-modal';

export const ExampleModal = React.forwardRef((ref) => {
  const [isVisible, setIsVisible] = useState(false);

  const show = () => setIsVisible(true);
  const hide = () => setIsVisible(false);

  useImperativeHandle(ref, () => ({ hide, show }));

  return (
    <ModalContainer onBackdropPress={hide} isVisible={isVisible}>
      <Text>My awesome modal!</Text>
    </ModalContainer>
  );
}); That's the transition to a better place. While this is a step in the right direction, it doesn't solve all of our problems. Namely: To use it, we need to pass a prop from a hook, which means we can't call outside React components. ref useRef show We still need to instantiate the component on every screen. There’s no way to use it on multiple screens without having repeated. ExampleModal Externally exposing the component’s Ref Most people don't know this, but React has a createRef method that can be used outside React components. In fact, it's even in the React-Navigation documentation for edge cases. In practice, the flexibility it brings can be seen here: import React, { useState, useImperativeHandle } from 'react';
import { Text } from 'react-native';
import ModalContainer from 'react-native-modal';

export const imperativeModalRef = React.createRef();

export const SmartExample = () => {
  const [isVisible, setIsVisible] = useState(false);

  const show = () => setIsVisible(true);
  const hide = () => setIsVisible(false);

  useImperativeHandle(imperativeModalRef, () => ({ hide, show }));

  return (
    <ModalContainer onBackdropPress={hide} isVisible={isVisible}>
      <Text>My awesome modal!</Text>
    </ModalContainer>
  );
}; Now can be imported and used anywhere, as long as is on the root. We can use show and hide from every component, function, or . imperativeModalRef SmartExample Saga That solves most of our issues, but there's still one: It is hard to manage a project with many modal refs and modals on the root. That's where you can get creative with abstractions to make the render any modal you want! One way to do this is to make the function receive a component and render it. SmartExample show Going the extra mile Instead of making you guys reinvent the wheel, I've created an open-source library that encapsulates all these concepts and more, with full TypeScript support based on . react-native-modal Here's a basic idea of how to use it: "Talk is cheap. Show me the code." ― Linus Torvalds. import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { MagicModalPortal, magicModal } from 'react-native-magic-modal';

const ConfirmationModal = () => (
  <View>
    <TouchableOpacity onPress={() => magicModal.hide({ success: true })}>
      <Text>Click here to confirm</Text>
    </TouchableOpacity>
  </View>
);

const ResponseModal = ({ text }) => (
  <View>
    <Text>{text}</Text>
    <TouchableOpacity onPress={() => magicModal.hide()}>
      <Text>Close</Text>
    </TouchableOpacity>
  </View>
);

const handleConfirmationFlow = async () => {
  // We call it with or without props, depending on the requirements of the modal.
  const result = await magicModal.show(ConfirmationModal);

  if (result.success) {
    return magicModal.show(() => <ResponseModal text="Success!" />);
  }

  return magicModal.show(() => <ResponseModal text="Failure :(" />);
};

export const MainScreen = () => {
  return (
    <View>
      <TouchableOpacity onPress={handleConfirmationFlow}>
        <Text>Start the modal flow!</Text>
      </TouchableOpacity>
      <MagicModalPortal />
    </View>
  );
}; Example using react-native-magic-modal As you can see, it gives you loads of flexibility, unimaginable before, by simply abstracting the concepts we’ve gone through. Now, the confirmation flow can be called from anywhere. Inside or outside React components. Also, it automatically deals with common issues regarding modals. Did you know that, in React Native, you can’t show two modals simultaneously? Even if you try to show a modal right after another, it would probably fail as the last modal is still animating its ‘close’ state. Fortunately, the issue is already dealt with on our side. https://github.com/react-native-modal/react-native-modal/issues/30 This same logic has already been battle-tested on big companies I’ve worked on, like (by AB-InBev), , and . Zé Delivery Alfred Delivery X-Team The documentation is easy to understand and will give you a headstart. You can learn more about it here: React Native Magic Modal https://github.com/GSTJ/react-native-magic-modal Contributions accepted! Thanks for the read. If you liked the article, follow me on and . Linkedin Github Also Published here

What Everyone Is Getting Wrong About React Native Modals

Modal is a common UX element. A modal is a dialog box/popup window that is displayed on top of the current page. You must have used pop-ups and notifications for your website. For some people pop-ups are really annoying😫 if it doesn't behave as it should. It must have good UI/UX. In this article, we're going to create an efficient 🤩 from scratch without using any library. Modal component Demo Link🖤: https://react-reusable-components.vercel.app/ Our main goal is to create an efficient modal which, Has a good layout Doesn't break ui when we use overflow in the parent component Can render content Dynamically Clean and Elegant animation Looks good (good UI) Have more control for User (like clicking outside can close modal) etc. Let’s get started! If you prefer video format then you can watch this video 📽👇 Create your react-app using, npx create-react-app react-modal For this tutorial, I'm going to use so make sure you have installed node-sass package. To install it do, Sass npm install node-sass Let's create a Basic Modal component open App.js file. clean🧹 unnecessary code. Now create one button in the App.js file to open and close modal just like this 👇 </div> <div className= "App" > < button > Modal </ button > Create one state to open and close modal. Write below 👇 code: );
} import { useState } from "react" ; import "./App.scss" ; function App ( ) { const [modal, setModal] = useState( false ); const Toggle = () => setModal(!modal); return ( < div className = "App" > < button className = "clickme" onClick = {() => Toggle()}> Modal </ button > </ div > export default App; Contains modal state which is false initially. Line 6: A Toggle method to toggle modal state from false to true and vice-versa. Line 7: Make sure to connect method to onClick of the button. Line 11: Toggle() Next, create file and Write below 👇 code: Modal.js );
}; const Modal = () => { return ( < div > Modal </ div > export default Modal; Now import it in the Modal in file. App.js Here we have imported `Modal` component. And passed 
modal state as shown in the props. Line 17: Now open and write below code 👇 Modal.js );
}; import Close from "./times-solid.svg" ; const Modal = ( { show } ) => { return ( <> { show ? < div className = "modalContainer" > < div className = "modal" > < header className = "modal_header" > < h2 className = "modal_header-title" > Modal Title </ h2 > < button className = "close" > < img src = {Close} alt = "close" /> </ button > </ header > < main className = "modal_content" > This is Modal Content </ main > < footer className = "modal_footer" > < button className = "modal-close" > Cancel </ button > < button className = "submit" > Submit </ button > </ footer > </ div > </ div > : null } </> export default Modal; Deconstruct Show from the props. Line 3: We will display the modal only when the show state is true. Line 7: This is the whole .
 Modal Container div contains the modal. Line 9 to 30: Modal layout In the modal div, There is one header that contains the and Button (You can use any icon for the close button). modal title close The main tag contains the of the modal. content Footer has 2 buttons one is and another is . submitted canceled Now when you press a button modal will show and on pressing again it will close the modal. First Let's add some styling to our modal. Create a file and import it in the file. Modal.scss Modal.js Copy and paste this styling in the file. Modal.scss This will give your modal a better look. By applying this you can make it 
look like frost-glass. Line 21: backdrop-filter Let's add Close event in modal In the file pass toggle method as props in the modal just like this 👇 App.js <Modal show={modal} title= "My Modal" close={Toggle}/> open file and deconstruct close from the props. Modal.js );
}; import Close from "./times-solid.svg" ; const Modal = ( { show, close } ) => { return ( <> { show ? < div className = "modalContainer" onClick = {() => close()} > < div className = "modal" onClick = {(e) => e.stopPropagation()}> < header className = "modal_header" > < h2 className = "modal_header-title" > Modal Title </ h2 > < button className = "close" onClick = {() => close()}> < img src = {Close} alt = "close" /> </ button > </ header > < main className = "modal_content" > This is modal content </ main > < footer className = "modal_footer" > < button className = "modal-close" onClick = {() => close()}> Cancel </ button > < button className = "submit" > Submit </ button > </ footer > </ div > </ div > : null } </> export default Modal; Deconstruct Close from the props. Line 3: We have added close method in 3 places: At the close button. Line 16: At the cancel button. Line 22: : We have also added a close method here too. Why? because whenever the user clicks outside it should close the modal. So here, when the user clicks on the modalContainer it closes the modal. Line 11 here we have to stop these click events in the modal else it will close it so for that we have used e.stopPropagation(). Line 13: You can also add event Listener and add functionality 
in which when user clicks esc key, It closes the modal. (It is good for user experience) hint: Let's use Portals to render the Modal component ⏩ What🧐 are ? portals Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. ⏩ Why🤔 should we use portals? Sometimes when we use or properties in the parent component then we need child component (like modal or dialogues) to break container visually, and portals can be very handy to do that because it renders children outside of DOM hierarchy. overflow z-index ⏩ The syntax✍ for to create a portal👇 ( 
element, ) ReactDOM.createPortal DOM node where you want to render this element So let's implement portals in our Modal component. To use the portal we have to create one more element in the dom. Generally, our whole App renders in the div with the id root. Open file. index.html and above the root div create one more div with the id . modal Just like this 👇 <div id= "modal" /> < div id = "root" /> Open file and edit it just like this, Modal.js );
}; import ReactDOM from "react-dom" ; import "./modal.scss" ; import Close from "./times-solid.svg" ; const Modal = ( { show, close } ) => { return ReactDOM.createPortal( <> { show ? < div className = "modalContainer" onClick = {() => close()} > < div className = "modal" onClick = {(e) => e.stopPropagation()}> < header className = "modal_header" > < h2 className = "modal_header-title" > Modal Title </ h2 > < button className = "close" onClick = {() => close()}> < img src = {Close} alt = "close" /> </ button > </ header > < main className = "modal_content" > This is modal content </ main > < footer className = "modal_footer" > < button className = "modal-close" onClick = {() => close()}> Cancel </ button > < button className = "submit" > Submit </ button > </ footer > </ div > </ div > : null }, document.getElementById("modal") </> export default Modal; Import ReactDom. Line 1: After return creates a portal using , As it's the first argument we have passed the whole modal component and for the second argument we have passed the dom node where we want to render it. Line 6: ReactDom.createPortal We want to render our component in the div with id modal. Line 34: Let's make Modal content Dynamic: open file and pass title as a prop and content inside the component as shown below, App.js This is Modal content
</Modal> <Modal show={modal} title= "My Modal" close={Toggle}> Here we have passed the title as props and modal content as the children. Open and write, Modal.js (Final Modal.js code) Deconstruct and from the props. Line 5: title children Insert title in the curly braces. Line 17: Render children using the curly braces. Line 22: Now if you want to add a little animation in the modal you can watch the video or you can go to the git repository and read📚 code. Thanks For Reading😄 Feel free to visit my youtube channel: @CodeBucks

ReactJS Custom Modal Component using Hooks and Portals

Componente modal personalizado de ReactJS usando ganchos y portales

Nowadays, Modals are one of the most used components in React Application, having an easy way to create React Modals will help you sheep Modals related features fast in your upcoming React Applications. In this tutorial, we will build A simple React Modal using only 22 lines of code. The gif below will help you understand what we are trying to build Let's started Create React Project First, create a simple react project using create-react-app CLI. $ npx Create-react-app SimpleModal React ; ReactDOM ; ; { ( <h1>Create React Modal in X line of code </h1> <button>Click Me</button> );
} rootElement = .getElementById( );
ReactDOM.render( import from "react" import from "react-dom" import "./styles.css" ( ) function App return < = > div className "App" </ > div const document "root" , rootElement); < /> App In this tutorial, we will use the package  which is a simple and Powerful react component with a lot of benefits : react-popup Modal, Tooltip, Menu: All in one 🏋️ Full style customization 👌 Function as children pattern to take control over your popup anywhere in your code. 💪 IE Support. 🚀 TypeScript Support 👌 All these clocks in at around 3 kB zipped. ⚡️ This package is available in npm repository as reactjs-popup. It will work correctly with all popular bundlers. $ yarn add reactjs-popup Create React Modal Import Component from reactjs-popup and start using it like the following. Popup Add property as a simple React Button element and set property to true. trigger modal React ; ReactDOM ; Popup ; ; { ( <h1>Create React Modal with 22 line of code </h1> <Popup modal trigger={<button>Click Me</button>}>
        Modal Content
      </Popup> );
} rootElement = .getElementById( );
ReactDOM.render( import from "react" import from "react-dom" import from "reactjs-popup" import "./styles.css" ( ) function App return < = > div className "App" </ > div const document "root" , rootElement); < /> App Customizing and Styling  React Modal we need to create a file for Modal Content component and add some style Content.js React ; ({ close }) => ( <a className="close" onClick={close}>
      &times;
    </a> <div className="header"> Modal Title </div> <div className="content">
      {" "}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a nostrum.
      Dolorem, repellat quidem ut, minima sint vel eveniet quibusdam voluptates
      delectus doloremque, explicabo tempore dicta adipisci fugit amet
      dignissimos?
      <br />
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit
      commodi beatae optio voluptatum sed eius cumque, delectus saepe
      repudiandae explicabo nemo nam libero ad, doloribus, voluptas rem alias.
      Vitae?
    </div> ); //content.js import from "react" export default < = > div className "modal" </ > div { : ;
} > { : ; : solid gray; : ; : center; : ;
} > { : ; : ;
} > { : auto;
} > { : ; : ; : center;
} > { : pointer; : absolute; : block; : ; : ; : - ; : - ; : ; : ; : ; : solid ;
} /* index.css */ .modal font-size 12px .modal .header width 100% border-bottom 1px font-size 18px text-align padding 5px .modal .content width 100% padding 10px 5px .modal .actions margin .modal .actions width 100% padding 10px 5px text-align .modal .close cursor position display padding 2px 5px line-height 20px right 10px top 10px font-size 24px background #ffffff border-radius 18px border 1px #cfcece Now it's time for some magic Because provides a child as function pattern, you have full control on Popup state reactjs-popup we will update our example to use a function as a child instead of a  react element to implement `close` button. React ; ReactDOM ; Popup ; Content ; ; { ( <h1>Create React Modal with 22 line of code </h1> <Popup modal trigger={<button>Click Me</button>}>
        {close => <Content close={close} />}
      </Popup>
    </div> <App /> //index.js import from "react" import from "react-dom" import from "reactjs-popup" import from "./Content.js" import "./styles.css" ( ) function App return < = > div className "App" );
}

const rootElement = document.getElementById("root");
ReactDOM.render( , rootElement); Final Result reactjs-popup : https://react-popup.elazizi.com/ Repo : https://github.com/yjose/create-react-modal-with-22-line-of-code Codesandbox : https://codesandbox.io/s/create-react-modal-with-22-lines-of-code-v2u7t Make sure to visit react-popup home page Thanks for reading! If you think other people should read this post and use this project, tweet, and share the post. Remember to follow me, so you can get notified about my future posts.

Create React Modal using reactjs-popup

When building apps in Angular, you will likely need to trigger a modal or pop-up at some point. Sometimes, this is easy and can be done with some simple CSS, but other times, it may be more complicated. You may need to append markup to the bottom of your document so that it can be placed on top of everything else. Or maybe, depending on the scroll position, a pop-up will need to open upward instead of downward. There are lots of possible scenarios where you may need more than what’s capable with CSS by itself, and that’s where the CDK Overlay Module comes into play. In this post, we’ll look at how we can use the CDK Overlay Module to create a globally positioned modal that’s placed on top of everything else and centered within the viewport. And to contrast, we’ll create a pop-up connected to a button that will automatically position itself within the viewport based on scroll position. Alright, let’s get to it! https://youtu.be/S7d2zvbFKhs?embedable=true The Angular CDK Overlay module is really powerful and provides many features. And this means there’s a lot to know and understand. The aim of this post is to demonstrate a basic setup for two common types of overlays, modals, and pop-ups. Since there’s so much to cover within the Overlay module, I will be creating posts of more advanced Overlay module features in the future, so keep an eye out for those. For now, though, let’s start with a basic modal example. Creating a Modal With the Angular CDK Overlay Service Here, we have this list of NBA players. We have this button in the upper right corner of each player. When we click this button, we want to open up a modal to display more information about the specific player. This is something that is fairly easy to do using the CDK Overlay module. How to install the Angular CDK But, before we can use it, we first need to install the Angular CDK, which we can do with this command within our Angular app: npm i @angular/cdk How to import the Angular CDK Overlay prebuilt CSS After we have it installed, we will want to include the overlay-prebuilt CSS file from the library. It provides some basic styles in order to create modals and pop-ups that work correctly. I normally include it in something like the global stylesheet for the Angular app, so let’s import it there. global_styles.scss @import '@angular/cdk/overlay-prebuilt.css'; Ok, now we’re ready to wire up our modal. The first thing we need to do is inject the Overlay service into our constructor so that we can use it. player.component.ts export class PlayerComponent {
    ...
    constructor(private overlay: Overlay) {}
} Now, let’s create an method that we’ll call at the click of a button. Within this method, first, we’ll create our overlay using the method from the service. This method will create an overlay and return the reference to it, so we’ll set it as a variable named overlayRef since that’s what we will have after calling . openModal() create() create() export class PlayerComponent {
    ...
    protected openModal() {
        const overlayRef = this.overlay.create();
    }
} Ok, at this point we’ve created it, now we need to attach some markup to the overlay. So, we’ll use our overlayRef variable, and we’ll call the method. This method has a parameter where we need to pass a . attach() CdkPortal export class PlayerComponent {
    ...
    protected openModal() {
        const overlayRef = this.overlay.create();
        overlayRef.attach();
    }
} This template portal will need to wrap whatever markup we want to display in our modal. Before we can add this portal, we first need to import it into the Portal Module. ...
import { PortalModule } from '@angular/cdk/portal';

@Component({
    selector: 'app-player',
    imports: [..., PortalModule]
    ...
} Ok, now we can switch over to our component template. We’ll add an . On this we’ll add the directive. And within this let’s add our player details component. This component has an input where it takes in a player object, so we’ll pass it to our current player. ng-template ng-template cdkPortal ng-template player.component.html <ng-template cdkPortal>
    <app-player-details [player]="player"></app-player-details>
</ng-template> Now, we also need to import this player component, so let’s do that real quick. player.component.ts ...
import { PlayerDetailsComponent } from './player-details/player-details.component';

@Component({
  selector: 'app-player',
  imports: [..., PlayerDetailsComponent]
  ...
}) Ok, the next thing we need to do is access the portal that we just added in the template so that we can pass it to our attach method. We can do this using the Angular View Child decorator. And for the , its selector will be the . We’ll call this property , and we’ll type it to as well. @ViewChild CdkPortal portal CdkPortal import { CdkPortal, PortalModule } from '@angular/cdk/portal';

export class PlayerComponent {
    @ViewChild(CdkPortal) portal!: CdkPortal;
    ...
} Now that we have a handle on the portal, we can simply add it to our attach method. export class PlayerComponent {
    @ViewChild(CdkPortal) portal!: CdkPortal;
    ...
    protected openModal() {
        const overlayRef = this.overlay.create();
        overlayRef.attach(this.portal);
    }
} And the last thing we need to do is call this open modal method when the button is clicked. So, back in our component template, on the button, we bind to the click event, and then we call our method. player.component.html <button (click)="openModal()">
    ...
</button> Ok, now let’s click our button and take a look. And there it is, the click opens the modal with our player details. So, this is pretty cool, but at first glance, this may not seem like anything special, but let me tell you, it actually is. If we inspect the modal, we can see that the markup for our player details is actually getting injected into a container at the end of the . This is pretty crazy since our player component is up above within the app component. body This is what ensures that this modal will properly be placed on a layer that is unaffected by anything else within our app. And that can be really handy in many modal situations. How to Customize the Angular Overlay Settings With a Custom Overlay Config Object Now, as I mentioned earlier, there’s a lot of functionality and configuration available with the Overlay Module. For example, if we want to position our model in the center of the viewport, We can do this by passing a custom configuration object to the overlay. To do this, let’s create a variable. This will be set to a new object. We’ll need to make sure that class is imported. Within this, we’re going to set the for the overlay. config OverlayConfig positionStrategy We’ll add , and then we’ll call the method. It’s going to be a position, which just means that it will be positioned relative to the viewport and not any specific element. From there, we’ll call , and then . this.overlay position() global() centerHorizontally() centerVertically() Let’s also set a width of sixty percent to keep it from growing too wide. Then, we can pass this custom config in our create method. The items we’ve included in this custom config will now override the default values for those properties. ...
import { ..., OverlayConfig } from '@angular/cdk/overlay';

export class PlayerComponent {
    ...
    protected openModal() {
        const config = new OverlayConfig({
            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
            width: '60%'
        });
        const overlayRef = this.overlay.create(config);
        overlayRef.attach(this.portal);
    }
} Ok, let’s check it out. Looking pretty good right? How to Close an Angular CDK Overlay on a Backdrop Click Now, what if we want to put up a layer over the viewport when the modal is open, and when we click on that layer, we want to close the modal? Well, we can do this by adding more custom configurations in our . We can add true. This will add a backdrop element to our overlay. OverlayConfig hasBackdrop Now, to close the modal when this backdrop gets clicked, we have a method on our overlay ref that we can call. This method returns an observable that will fire every time the backdrop is clicked as long as it is open, so we can subscribe. Then, in the callback here, we will close our overlay by calling . backdropClick() overlayRef.detach() ...
export class PlayerComponent {
    ...
    protected openModal() {
        const config = new OverlayConfig({
            ...
            hasBackdrop: true
        });
        ...
        overlayRef.backdropClick().subscribe(() => overlayRef.detach());
    }
} Now, let’s try this. Cool, it closes when we click on this backdrop. Now, there’s a ton more available to us here, so I’ll save it for a future post. Just know that there’s quite a bit more functionality and configuration available to you if needed. For now, let’s look at an example of a Connected Position overlay. Creating a Pop-up With a Connected Position Angular CDK Overlay Creating a “connected position” overlay means that our pop-up, instead of being globally positioned within the viewport, will be positioned relative to the button that we clicked on to open it. As if it’s attached to it. For this, we can use a couple of directives provided by the Overlay module instead of using the Overlay service. We’ll use the directive, which will be applied to the item that we want to position from, in our case, our button. And then, we’ll use the directive that will be applied to the that we want to inject into our popup. cdkOverlayOrigin cdkConnectedOverlay ng-template For this example, since we’ll be using these directives, we can actually remove most of what we added when we were using the Overlay service. Well, get rid of the , the constructor, and the function. We can also remove the , , , and imports as well. @ViewChild openModal() PortalModule CdkPortal Overlay Overlay Config Now, within the component template, we can replace the click binding on our button with the directive. cdkOverlayOrigin <button cdkOverlayOrigin>
    ...
</button> On the overlay , we can replace the directive with the directive. ng-template cdkPortal cdkConnectedOverlay <ng-template cdkConnectedOverlay>
    ...
</ng-template> Now, we need to connect the overlay to the origin. To do this, the overlay has an input called . We need to pass this input to our origin directive instance. So we add a template reference variable, let’s call it trigger, on our origin button. cdkConnectedOverlayOrigin <button
    cdkOverlayOrigin
    #trigger="cdkOverlayOrigin">
    ...
</button> Now, we can pass this reference to the overlay with the input. cdkConnectedOverlayOrigin <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger">
    ...
</ng-template> To make this pop-up open, we’ll use the input. This input expects a boolean value telling it whether it should be open or not. So, let’s add a property called , and initialize it to false. cdkConnectedOverlayOpen detailsOpen ...
export class PlayerComponent {
    protected detailsOpen = false;
} We’ll toggle the property when the button is clicked using a click event binding. <button
    cdkOverlayOrigin
    #trigger="cdkOverlayOrigin"
    (click)="detailsOpen = !detailsOpen">
    ...
</button> Then, we can bind our input to this property on the overlay. cdkConnectedOverlayOpen <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="detailsOpen">
    ...
</ng-template> Ok, let’s give this a try. Cool, now it gets positioned next to the button. And, if we inspect this again, the markup gets injected in the same location, at the end of the body. What’s even more cool is that on the item at the bottom of the viewport, we will want it to open upward because we don’t have room to see it if it opens downward. Well, if we click on the button, we can see that this actually happens without us doing anything at all. Super cool. This really saves us a ton of effort. All the tough stuff has already been figured out for us. And just like the global positioning method, when using the Overlay service, there are a bunch of configurations available to us. This time, with the directives, however, we use s and s. @Input @Output So, if we want to add the width, for example, we can use the input. cdkConnectedOverlayWidth <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="detailsOpen"
    cdkConnectedOverlayWidth="60%">
    ...
</ng-template> Now, the pop-up won’t grow beyond sixty percent of the width of its container. And if we want to close this pop-up when we click anywhere outside, we can use the output, which will fire when it detects a click outside of itself. When this happens, we can set our details open property to false. overlayOutsideClick <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="detailsOpen"
    cdkConnectedOverlayWidth="60%"
    (overlayOutsideClick)="detailsOpen = false">
    ...
</ng-template> Now, when we open our pop-up and then click outside, it closes. Just like with the Overlay service, there’s a ton more available to us, which I’ll save for a future post. Just remember that there’s more functionality and configuration available outside of what I’ve covered here. So, some pretty cool stuff is happening in these examples. It’s all actually quite complex from a development perspective, but there’s not much for us to figure out in order to leverage it, thanks to the folks who built it. Found This Helpful? If you found this article helpful and want to show some love, you can always buy me a coffee! Want to See It in Action? Check out the demo code and examples of these techniques in the Stackblitz example below. If you have any questions or thoughts, don’t hesitate to leave a comment. https://stackblitz.com/edit/stackblitz-starters-hnqgln?ctl=1&embed=1&file=src%2Fplayer%2Fplayer.component.ts&embedable=true Also published . here

Learn the Basics of Angular CDK Overlay: Angular Modals and Pop-ups

Every application is built from the same type of components - buttons, inputs, dropdowns, etc., and modal windows are in this list. The reason is simple - modal windows allow us to communicate with a user and do not overwhelm a UI with additional information until it becomes needed. In this article, I will explore one of the approaches to managing modal windows in apps. Angular We use the primeng library for modals in the article's examples. Your case can be different. The general idea will be the same despite the libraries, but API can be different; be aware of it. Modal windows are just regular components - they have markup, style, and selector. But in contrast to regular components, they usually don't have to be shown on the page immediately. We need them only for the result of users' actions - confirm, discard, fill a form, etc. That's why we won't include them in our build - we will download them dynamically only if we require them. Let's see an example: public openModal(): void {
    const modalComponent = async (): Promise<any> => import('./path-to-your-modal');
    this.modalService.open(modalComponent());
} Here, we have the dynamic import approach. It means that our component will be loaded when we invoke the method. It's quite useful because we don't load the modal immediately in our chunk - only when the user needs it. This approach can help you to slightly reduce the bundle size, especially if your modals are full of logic and components. openModal In general, this is the working solution. But we can go further. Let's make a service that will handle the dynamic imports and return an instance of the modal: import { Injectable } from '@angular/core';
import { DialogService } from 'primeng/dynamicdialog';

@Injectable({ providedIn: 'root' })
export class CustomModalService {
    public modalWindowComponents: { [key: string]: () => Promise<any> } = {
        ConfirmModalComponent: () =>
            import('your-path/to-component').then((component) => component.ConfirmModalComponent),
    };

constructor(private modalService: DialogService) {}

    public async openDynamicDialogModal({
        componentName,
        data,
    }: {
        componentName: string;
        data?: { [key: string]: any };
    }): Promise<any> {
        const modalComponent = this.modalService.open(await this.modalWindowComponents[componentName](), { ...data });

        modalComponent.onClose.subscribe(() => {
            // some logic
        });
        return modalComponent;
    }
} Here, we can see several important things: We use an object to store modal windows imports where the key is the component name, and the value is an import function that returns Promise; Our method is taking the params object with the component's name (to take the import function from the object) and some additional data, which contains whatever you want for a component or its appearing configuration. Also, we have a subscription for close events. It is more convenient to handle window closing in one place; We return a Promise with the imported component. It allows us to handle the logic for each modal. Here is an example of the usage of this service: public async handleOpeningModalWindow(): Promise<void> {
    const dialogRef = await this.primengModalService.openDynamicDialogModal({
        componentName: 'DeleteStreamModalComponent',
        data: {
           // your params
        },
    });

    dialogRef.onClose
        .pipe(
            // your pipes
        )
        .subscribe(() => {
            // your logic
        });
} Conclusion By adopting the approach outlined above, Angular developers can achieve a leaner, more manageable modal window system. This strategy not only reduces bundle size but also offers a unified method for modal control and customization. Embracing dynamic imports and service-based architecture empowers developers to optimize user experiences while maintaining code scalability and efficiency.

How to Manage Modal Windows in Angular Apps

It's hard to imagine modern Application without pop-up dialogs for confirming addresses, deleting items from a cart, and other such interactions — challenges every developer faces daily. a React The design and management architecture of these dialogs often raises numerous questions. I've encountered everything from complex integration schemes with stores to extensive prop drilling for opening windows, and intricate setups using event emitters. It's time to tackle these issues head-on. In this article, I'll share the solution our team has developed, which significantly aids us in maintaining clean code daily, even as our project scales. Problem Let's take a look at this typical example of how developers usually display models: Boilerplate №1: Managing dialog in an app often involves creating several state variables to control their opening and closing. A typical setup for a component might start with several lines of code like this: const [openConfirm, setOpenConfirm] = useState(false);
const [deleteDialogOpened, setDeleteDialog] = useState(false);
const [editDialogOpened, setEditDialog] = useState(false);
const [moveOnDialogOpened, setMoveOnDialog] = useState(false); Does this code look familiar? Can you imagine the complexity involved in rendering this component, where hundreds of lines of code in JSX track how and when these dialogs open? Managing several dialog windows in this way not only clutters the components but also increases the risk of bugs, as the state of each dialog is intertwined with the overall logic of the component. №2: Performance Imagine you have a table where every cell has its own set of dialog boxes for management tasks. If you put the dialog control logic right inside each cell's component, React ends up doing a lot of work. For every update, it has to check through hundreds of these virtual parts to figure out which dialog boxes to show or hide. This can slow things down because React has to keep comparing all these parts every time something changes. It makes your code more complex and harder to deal with, too. Moving dialogs to a parent level seems straightforward, but the main issue was this: . Ultimately, you end up having to pass data through many layers to reach the dialog windows, which complicates matters. It's like unraveling a knot that only gets tighter the more you pull on it. prop drilling №3: Package size In large projects with numerous dialogs, a problem arises: many dialogs are loaded but never used by some users. Without code splitting, other forms of preloading/caching, or similar strategies, the application can become sluggish, loading unnecessary items. Solutions We often see two main types of dialogs in apps. First, there are the common ones, used about 90% of the time, like confirmation messages, map location pickers, ads, or subscription offers. These dialogs pop up frequently, look similar, and aren't tied to any specific part of the app. Then, there's the other 10%: specialized dialogs made for one-time events or specific actions. By figuring out which dialogs are used most and which are for special occasions, we can make managing and loading them much easier. Modal Manager My idea is to create a single entry point for all dialogs, allowing us to manage them as conveniently as routes in React applications. This means we will describe their behavior strategy, share data, and invoke them using hooks and React context. By leveraging Suspense, we can ensure that these dialogs are not loaded unnecessarily. This approach streamlines dialog management, making it more efficient and less prone to performance issues. By centralizing dialog control, we can easily adjust their behavior and appearance across the entire application, improving consistency and user experience. Additionally, using Suspense for lazy loading helps keep our app lightweight, loading resources only when they are truly needed. Let’s do it: import { lazy } from 'react'

export enum Modals {
ConfirmModal,
SubscriptionModal,
}

export const DialogManager = {
[Modals.ConfirmModal]: lazy(() => import('./modals/ConfirmModal')),
[Modals.SubscriptionModal]: lazy(
() => import('@components/common/Subscriptions')
),
} The - just a simple hashmap, where each dialog is associated with a unique key and contains a lazy component of the dialog. DialogManager Provider As I mentioned before context and provider - it’s an approach to initialize our dialogs and share value in any place, let’s make it: type DialogStructure = {
id: string
component: () => JSX.Element
}

export type DialogCloseHandler<T = boolean> = {
onCloseHandler?: (value?: T) => T
}

const useDialogProvider = () => {
const [activeDialogs, setActiveDialogs] = useState<Array<DialogStructure>>([])

const close = useCallback(
(id: string, value?: unknown) => {
setActiveDialogs(activeDialogs.filter(dialog => dialog.id !== id))

 return value
},
[activeDialogs]

const open = useCallback(
<T extends Modals>(
type: T,
props: Omit<ComponentProps<(typeof dialogManager)[T]>, 'onCloseHandler'>
) => {
const id = nanoid()
const Component = dialogManager[type as Modals]

  setActiveDialogs([
    {
      id,
      component: () => (
        <Component {...props} onCloseHandler={value => close(id, value)} />
      ),
    },
    ...activeDialogs,
  ])

  return null
},
[activeDialogs, close]

)

return useMemo(
() => ({ open, close, activeDialogs }),
[open, close, activeDialogs]
)
}

export const DialogContext = createContext<
ReturnType<typeof useDialogProvider> | undefined Let's delve deeper into our methodology: In the state, we accumulate our dialogs. This is an array because we anticipate that multiple dialogs might be called one after another. activeDialogs is what's passed as a value to our . It's crucial that it returns both an opening function and a closing function, as well as a list of all dialogs. useDialogProvider DialogContext The function is generic, thanks to , it knows the props our dialog accepts. This will be incredibly useful for invoking our dialogs in the future. open <ComponentProps<(typeof dialogManager)[T]> - simply deletes our component from close activeDialogs is one of the key tricks of our architecture. The only thing our manager-created dialog needs to know is how to close itself. There are numerous ways to teach it this, but the simplest method seems to be incorporating a callback into each of the dialogs invoked by our system that can perform this action. onCloseHandler Context and suspense part Now, let's focus on our context setup: export const DialogProvider: FC<PropsWithChildren> = ({ children }) => {
const value = useDialogProvider()

return (
<DialogContext.Provider value={value}>
{children}
{typeof window !== 'undefined' && value.activeDialogs.length ? (
<Suspense fallback={null}>
{value.activeDialogs.map(({ id, component: LazyDialog }) => (
<LazyDialog key={id} />
))}
</Suspense>
) : null}
</DialogContext.Provider>
)
} Remember how we opted for wrapping for our dialogs within the manager to facilitate on-demand loading? By incorporating in our provider, we streamline this process even further. Now, iterating through any open dialogs in our provider becomes straightforward, ensuring that dialogs are loaded efficiently and only when necessary, enhancing the overall performance and user experience of our application. lazy Suspense Hook useDialog This is the final piece of our entire splendid structure. Now, we need to learn how to conveniently invoke our dialogs from anywhere within our application. I suggest doing this with the hook, as all the necessary functionality for it is already in place: useDialog export const useDialog = () => {
const context = useContext(DialogContext)

if (context === undefined) {
throw new Error('useDialog() called outside of DialogProvider')
}

return context
} That's it. Now, in any component, we can simply call: const {open} = useDialog()

return (
<button onClick={() => open(Modals.subscription, { onConfirm: () => location.reload() })}>Buy subscription</button> After we use , our TS and IDE will help us correctly identify the missing props. Therefore, we've added an callback because that's what our subscription dialog component requires. Modals.Subscription onConfirm Finally In essence, this is what we've achieved: All popular or frequently used popups are extracted and described in a special manager. If you prefer not to use this approach for some dialogs, you can still do it the old way, and everything will work just fine. A Clearly Defined Dialog Structure: We load our code as needed using lazy loading and Suspense, making our application lighter and faster. Asynchronous Code: Managing the state of our dialogs is now encapsulated within the hook and can be expanded according to the needs of your application. No More Boilerplate: useDialog With these improvements, our application benefits from a more organized, efficient, and scalable dialog management system. This structure not only enhances performance but also simplifies development and maintenance, providing a clear path forward for incorporating dialog windows in a React application.

Mastering Modal Dialogs in React Like a Pro

Using modal dialogs in is fairly common. Whether you want to edit a record in a table without navigating to a different page, look up some data, or just show a warning message to your users, using a modal dialog may be a great user experience. Unfortunately, doing that is not very easy in without a third-party library. It requires writing some non-trivial code and understanding of the internal mechanisms of the Angular framework. That is the reason why we developed a library at Developer Partners for showing modal dialogs in Angular. We are going to use our library in this article. web applications Angular 1. Install the Library We will have to install our library via NPM and include that in our Angular modules to be able to use it. Here is the NPM command to install it: @developer-partners/ngx-modal-dialo g npm install @developer-partners/ngx-modal-dialog Next, we have to include it in the Angular modules where we have to use modal dialogs. Our demo application is very small, it has only one module called AppModule. We have to include ModalModule from the library in the imports array of our AppModule Angular module: We are all set. We can start using the modal dialog component in our application. 2. Show a Modal Dialog As mentioned before, we are going to show our modal dialog when we want to add or edit a book in our list of books. Let's first create a component where we are going to show the list of books. We are going to create a new Angular component and call it . BookListComponent This is the content of the Typescript class: BookListComponent Our class uses a hardcoded list of books as the data to show in our table for simplicity. It also needs the Angular service from the ngx-modal-dialog library to be able to show the modal dialogs that is why we injected it into our constructor. BookListComponent ModalService Next, we will create the HTML file for where we will show the list of books in an HTML table: BookListComponent The HTML code above is pretty simple. It show the list of books in a table. It also has a button called "Add New Book". This is what the UI looks like so far: When the "Add New Book" button is clicked, it calls the function in our Typescript class. The function shows the modal dialog for adding a new book to our table. This is the Typescript code of the function: createBook createBook createBook The function shows the modal dialog by calling the function of the class. The function takes 2 parameters: the class of the Angular component to show inside the modal dialog and the options of modal dialog which are the settings of the dialog such as the title, size, position, and a few other things. The modal dialog needs an Angular component to show in its body. Without that component, our modal dialog would be just an empty panel overlaying the screen. That component is which is the first parameter of the function in the screenshot above. createBook show ModalService show CreateEditBookComponent show The Angular component is going to be responsible for both adding and editing books. We will start by working on the code for adding new books. Here is the HTML code of the CreateEditBookComponent which has only a few fields for entering the ID and title of the book we want to create and has buttons for closing the dialog and saving the data: CreateEditBookComponent This is what the modal dialog UI looks like: Here is the Typescript code of the CreateEditBookComponent component: The component uses an Angular service called from the library. We use that service for interacting with the modal dialog where our component is placed such as closing the modal or subscribing to its events. We simply close the modal dialog in the function in the screenshot above. We call the function when the "Cancel" button from HTML is clicked. When we click the "Save" button in the HTML code, it submits the form which calls the function. In the function, we close the modal dialog just like in the function but we also pass the property to it that contains the data for adding a new book to our list. CreateEditBookComponent ModalReference ngx-modal-dialog cancel cancel saveData saveData cancel book The service is a generic type. When we call the function of the service, we have to pass an object of the same type as its generic parameter. In our case, it's a Typescript interface called . The parameter that we pass to the function is passed back to the component that created the modal dialog by calling the function of the class. ModalReference closeSuccess ModalReference Book closeSuccess show ModalService When the call the closeSuccess function of the ModalReference service, it closes the modal dialog and triggers an RxJS event passing the newly create book to the subscribers of that event. In the screenshot above, the parameter of our callback function is the newly created book that we received from the modal dialog, so we simply add it to our array to show it in the UI. newBook books 3. Passing Data to Modal Dialogs There are some cases where you need to pass some data to modal dialogs. For example, if we want to edit a book from the list, we can pass the book record that we want to edit to the modal dialog to have the initial data that we want to modify. Let's start by adding a button to the table rows for editing the row data: This is what the UI looks like with the Edit button in each row of the table: The function has almost the same code as the function with just one important difference. It passes the book that we want to edit to the modal dialog by using the property of the of the dialog options. editBook createBook model The parameter that we pass to the modal dialog using the property becomes available in the service in the component used inside the dialog via its property. model ModalReference config.model In the screenshot above, we are copying the passed parameter and assigning it to the property of the component. The property of object is passed by reference, so any changes we make in the properties of that object will be reflected in the table where we show the list of books. The reason why we copy it is to not modify the row in the table until the user clicks the "Save" button. If the user clicks the "Cancel" button, the table data will not be updated. book CreateEditBookComponent model ModalReference.config This is what the Edit Book modal dialog looks like: Conclusion Building a modal dialog for Angular from scratch is not easy, but it is much easier with our modal dialog library. We went through how to set up the library and use it for showing modal dialogs in your project. We went through most basic use cases and features of the dialogs, but the @developer-partners/ngx-modal-dialog library has a lot of other features that you may find useful in your real projects. Also published here. Please follow the link below to learn more about it: @developer-partners/ngx-modal-dialog In case if you would like to show a nice loading spinner in your modal dialogs, please see our article about building a loading spinner in Angular: How to Create a Loading Spinner in Angular

Modal

modal.com

-- employees

Since n.d.

COMPANY RANKING

MODAL

EVERGREEN INDEX #7016

Modal WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

Modal

modal.com

-- employees

Since n.d.

COMPANY RANKING

MODAL

EVERGREEN INDEX #7016

RELATED COMPANIESRANK

STORIES ABOUT MODAL

Modal WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!