Angular CDK - Portal Module [Advanced, 2021]

Angular CDK - Portal Module [Advanced, 2021]

In this advanced #Angular CDK tutorial we will see what is a Portal Module and how we can use it in real Angular Applications in order to make them more flexible and maintainable.

Hello guys, In this advanced #Angular CDK tutorial we will see what is a Portal Module and how we can use it in real Angular Applications in order to make them more flexible and maintainable. Portals allow you to render some piece of UI from one component and render it in completely different part of your page but you won’t need to spread the feature across different components and you will be able to handle events in one component.

⚠️ New to Angular? Get the best onboarding Angular course which I used for easy start with Angular: http://bit.ly/angular-for-beginners

Time codes: 00:00:00 - Intro; 00:00:32 - Project starter overview; 00:03:10 - Bad solution overview; 00:08:32 - Implement the first Portal; 00:19:17 - simplify Portal creation with cdkPortal directive; 00:21:40 - Handle events from Portal; 00:24:02 - Create Portal from Component; 00:28:07 - Create Portal from DOM element; 00:31:25 - Bonus section: Create Portal Outlet manually;

I am sure you will find myriad places in your app where it might be great option. Enjoy watching and do not forget to leave your feedback :)

⚠️ If you are working with GraphQL then check out my video course about Hasura GraphQL engine with the lowest possible price: ✅ 20%-off with HASURA-EASY-START code: https://bit.ly/complete-hasura-course ✅ SkillShare with 14 Days Free Trial: https://skl.sh/3fahki2

🔗 Link to the source code on GitHub: https://github.com/DMezhenskyi/angular-cdk-portal-example

🔗 Angular CDK Portal official docs: https://material.angular.io/cdk/portal/overview

angular cdk

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Create a Component Harness For Your Tests With Angular CDK

Learn how to create and consume a custom component harness using Angular CDK. With a step-by-step case study, we run it in unit tests and end-to-end tests.

Tooltip with Angular CDK

During the development, we’ve faced a bunch of interesting puzzles that Angular CDK has helped us to overcome. That’s why I decided to start a series of articles on challenges Angular CDK may aid you with. Tooltip with Angular CDK

How to Use Angular CDK

In this post, I am going to show you how to create a reusable modal overlay/dialog using Angular CDK Overlay that can be reused inside our Angular project multiple times with ease. We are going to try and match the behavior and the functionality of Angular Material Dialog component, but using the UI Framework of our choice.