Angular Design Patterns – Bridge [Advanced, 2020]

Summary

In this informative video, Dmytro Mezhenskyi introduces the Bridge design pattern within the context of Angular, focusing on its application in creating complex Material form fields. The video demonstrates how to implement a widget wrapper with dynamic content and refresh mechanisms, using the Bridge pattern to separate the abstraction from the implementation. By leveraging Angular's Content Projection and Injection Token, the tutorial shows how to efficiently manage components with different behaviors and appearances while maintaining a unified public API.

Takeaways

• 🌟 Introduction to the Bridge Design Pattern in the context of Angular, explained by Dmytro Mezhenskyi.
• 🔍 Understanding the Control Value Accessor concept in Angular from a previous video is essential for this lesson.
• 🏗️ Implementing a complex Material Form field with the Bridge Pattern in Angular will be covered in the next video.
• 📦 Demonstration of two widgets (Widget 1 and Widget 2) with common header but different content and refresh mechanisms.
• 🔄 Widgets have distinct implementations for showing weather and velocity, including different spinners for their refresh strategies.
• 🎯 Utilizing the Bridge Pattern to separate the common aspects of the widgets from the implementation details.
• 🛠️ Creation of a 'patterns example model' for showcasing the implementation of the Bridge Pattern.
• 🔢 Explanation of the Angular component structure, including the use of 'ng content' for content projection.
• 🔄 Discussing the challenge of triggering the refresh mechanism of the concrete widget from the widget wrapper.
• 🔧 Solving the reference issue by using 'ContentChild' decorator to access the concrete widget component.
• 📈 Unification of the public API for concrete widget components through the creation of a 'Widget' interface.
• 🔑 Introduction of an 'InjectionToken' as an abstraction layer to resolve the proper component instance based on the provided token.

Q & A

What design pattern is the video focusing on and in which context?

The video is focusing on the Bridge design pattern, specifically in the context of Angular.

What is the purpose of the Control Value Accessor mentioned in the video?

The Control Value Accessor is a feature in Angular that allows for the creation of custom form controls and is necessary for implementing complex material form fields.

What are the two widgets demonstrated in the video and what is their commonality?

The two widgets demonstrated are Widget 1, which shows the weather, and Widget 2, which shows the velocity of a sprint. Their commonality is the header with a title and a refresh button, while the content inside is completely different.

How does the Bridge pattern help in implementing these widgets?

The Bridge pattern helps in decoupling the abstraction from the implementation, allowing the widgets to be interchangeable without changing the underlying system, which in this case is the Angular application.

What is the role of the 'ng content' in the video?

The 'ng content' is used for content projection in Angular, which allows the dynamic content of the widget to be rendered inside the widget wrapper.

How is the refresh mechanism triggered in the widget wrapper?

The refresh mechanism is triggered by creating a click handler for the refresh button in the widget wrapper and then using the 'content child' decorator to get a reference to the concrete component and call its refresh method.

What issue arises when trying to trigger the refresh method for different widgets?

The issue is that the reference to the concrete component is specific to each widget (e.g., VelocityWidget), so when a different widget is used (e.g., WeatherWidget), it results in an undefined error because the reference is not correctly typed.

How is the public API of the concrete widget components unified?

The public API is unified by creating an interface called 'WidgetInterface' that defines the 'load' and 'refresh' methods, which both concrete components must implement.

What is the purpose of the 'injection token' created in the video?

The 'injection token' serves as an abstraction layer that allows the Angular dependency injection system to resolve the correct widget component instance based on the provided token.

How does the resolver work with the 'injection token'?

The resolver provides the 'widget' token for each concrete widget component, so when the token is accessed, Angular will use the existing instance of the respective widget component (either WeatherWidget or VelocityWidget).

What is the final outcome of implementing the Bridge pattern with the described approach?

The final outcome is a flexible and maintainable solution where different widget components can be interchanged within a widget wrapper without the need for extensive if-checks or manual reference adjustments, as the Angular framework handles the component resolution through the injection token.