Portals: Decoupling presentation from ownership.
This week I learned how to create portals in Angular.
Frameworks like Angular, Reactjs, and Emberjs make it easy for front-end developers to write clean, reusable, and maintainable code. They achieve this reusability by providing an API for encapsulating similar functionalities into components.
Component is a coupling/combination of user interface(UI) and the controlling logic that brings the UI to life.
This coupling means that all action elements will have to live close together, which makes it hard to satisfy all user experience needs.
For example, you want to allow a customer to apply for insurance once they have filled out the required information.
- When user opens the site, you show them some explanation of what you sell and “Get a Quote” button to send them to the product section.
- Once he/she provide required information, an “Apply Now” button shows up.
- Now, if he/she decides to go back to the information section, it would be convenient for them to see an “Apply Now” instead of “Get a Quote” button.
In order to achieve this presented case (example above), we need a way to break the component encapsulation (Or, basically declare a piece of UI in one component, then display it in a different component).
Fortunately, these Frameworks provide developers with the tools to do just that, and today I’ll show you how to use Angular provided tools to help our users remember to save their progress.
Disclaimer: The code presented below is incomplete and for demo purpose only.
- Prepare a container where ported UI will be displayed.
- Put UI inside the owning component, and wrap it inside a “portal”.
- Create the Portal and give it access to the container.
- Now if you open your app, the UI should appear in the container and any action you take should be handled by the owning component.
The portal concept allows developers to satisfy UX requirements without breaking the Framework encapsulation mechanism.
Portals - React
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the…