Angular Design Patterns - Bridge [Advanced, 2020] 

After a long time, I have seen a serious angular RU-vidr with advanced content. Videos are very good and explained very well.

I'm on a spree watching your videos, a breath of fresh air

thankyou for your videos. i always look forward to your videos !

Very useful stuff, thanks! Very well explained.

After a long time, I have seen an advanced angular RU-vidr with advanced content. I just loved how you explain things, and really is putting some advanced Angular concepts into practice, please never stops and keep bringing us this awesome advanced content

Absolutely amazing. Thanks for this explanation 🚀

Clear examples well explained. Thanks!

Good job, Dmytro! Very actual problem and very good solution!

Thanks! It was a perfect explanation, good job Dmytro 💪👍!!!

Wow...Super awesome technique. Thanks for sharing. 🎉

simply a mind-blowing explanation boss.

Quite late to finding your videos but they are super useful - thank you!

Thank you for this video and your channel!

Great lesson! Thank you.

Learnt new things, thanks for explaining amazing concepts

I can't thank you enough for explaining so nicely. Amazing topics and the way you explain is awesome. Keep posting good videos like this. I wish you get whatever you want in life...

Amazing content man, keep going!

Thank you so much, I appreciate your efforts.

This is just brilliant, I'm so happy I found your channel

Thanks for the great content!

Awesome tutorial with clear explanation as usual, thanks! I would suggest you to also maybe briefly discuss the Bridge Design Pattern alone before jumping on implementation with Angular so we can have a clearer idea of what exactly we want to achieve using Angular's DI (some diagrams probably would help). But thanks again this was a great explanation! =)

soooo useful to me .I really need to advanced level concepts so i can level my understand up of Angular .. Thank you

Excellent job buddy, youtube really needs such high quality and descriptive angular videos. Thanks a ton.

Awesome content!

Ooh I was not aware of this kind of implementation earlier, Great job dude. It is actually an Advance talk.

Great job! Awesome explanation and really good examples

This is genius, thanks mate!

Great Content, very useful

This the kind of Angular content I want to see on youtube. Nice solution.

Thank you a lot, Dmitro. Або просто щиро дякую :)

This is really useful video. I was looking for something like this for a long time. Thank you that you are creating this kind of advanced Angular topics.

thank you it is really helpful !!! keep going

Excellent video. I finally understand something about tokens, and I learned something new about ContentChild (the `static: true` part)

Thank you for explanation. Good example.

Good job man!!! Loved it

Phenomenal coverage of an advanced topic. Not even GDEs are this good at explaining Angular like you. Keep up the excellent work!

Amazing content. Keep going

This is a great example of bridge pattern illustration. Most cases I see on the internet as "bridge pattern" example, they are just equivalent to Strategy pattern, so there are no reasons not to use strategy pattern, but this example clearly is suitable for Bridge. Good job!

Thanks man. I used to do lot of if elss statment to identify the context. Definitely will give it a try.👍

It was helpful, Thanks

Where have you been, bro? I just loved how do you explain things, and really is putting some advanced Angular concepts in practice, please never stops and keep bring us this awesome advanced content.

Nice and clear!

Great trick!

Thank you a lot i appreciate it !

This is a very slick and elegant pattern, thank you! My one critique on your videos: Please pre-build all the functionality and go directly to the heart of the advanced concepts you want to explain. Also, if the title of your video is referring to the bridge pattern, explain it briefly and then relate it to the material. I caught the one sentence you uttered where you say it is the token that makes it a bridge. It made sense but it was very small detail in your explanation. Highlight the important points and get to them quickly. Your videos are really good, but if you want them to be truly useful you should not assume we have infinite time to watch you type code and explain the obvious things in the code we can see. In short: be brief and succinct. This could have been a three-to-five minute video, which is much, much more useful than half an hour. In any case, I really appreciate your help. Thanks again!

Thanks a lot bro!

Great video! Thank You Dmytro ;)

thanks man, interesting stuff, goes good with the cup of tea :)

Hey Friend, it was really new learning for me... Thanks 🙏

Thank you! This is a good idea. I am doing something similar now and will try to do it in my task.

Cool, thank you very much.

Very Nice video.. Got to know so many concepts.. Thanks for last minute explanation on how it works.. I understood lot of things.. Thank you

ive been trying to figure out how you can select the widget from a dropdown or some sort of list to load them in dynamically. these videos are great. ive watched probably all your vids and love the dependency injection series, that really helped with this.

Big thanks to you, sir, for this helpful video. I've switched from react to angular and a lot of angular concepts is pretty new to me (as I am just a junior), and I struggle with all this OOP stuff, but with your explanations I can clarify this, and get better in creating reusable components and writing good extendable code. My admiration)

that's so cool. thanks

Awesome, thanks!

Very good!

Awesome as always. Note, NgTemplateOutlet could be an alternative approach making the concrete components similarly irrelevant to the wrapper component. That way a new interface or injection token wouldn't be needed as well. Many thanks for your great tutorials.

Great explanation bro.

Awesome content, thanks! U have a subscriber from Turkey now :P

Nice explanation of injection tokens)

Just bought one of your courses after watching this video👍

Great!!!

very useful video

It's really awesome , thank you so much. Can you please discuss deeper on this injection token, injector and how angular resolve the dependency through token. Keep marking videos like this. Excellent work.

great !!!

Where have you been, bro? This is my first time watching your video and I really love it. I have already subscribed though.

Exceptional... 🥇

Nice. I have some trouble to understand DI in the Angular, so after this video i founded some case where i can use this mechanism

It was soooo useful

nice example

Fantastic video! There is a serious lack of advanced, "enterprise", angular guides. Looking forward to watching your remaining videos in the series and even more advanced topics! Consider zooming in vscode to make the code easier to read. GG

🔥🔥🔥 Awesome topic.... waaaaaooo, It would be very helpful, if you start video playlist for Spartacus. ..:) You are a nice tutor .

Love your content, Can you please make a video about “Strategy Patter” in Angular ? We would love to see it

I had no idea about this pattern until I watched your video. After watching it, I used this pattern to implement a reasonably complex validation in a text field. And it turned out to be one of the most elegant and robust solutions I have ever coded in Angular. Thanks a lot 🙏for making videos on such advanced Angular topics, I look forward to more such videos in future! Btw, any plans on making similar content for @NestJS? 😃

Such a great job! Could you please then explain the difference between Bridge and Strategy design patterns?

very underrated channel! you deserve way more views. I feel like there aren't many channels that explain advanced Angular concepts and you do an amazing job at it

A lot of thanks for such a valuable content. As always you've done a great job which all of us appreciate! though I am wondering about couple of things... Could we use abstract class instead of injection token? I suppose it would be possible both implementing it and providing it as a token. And, as well as that, are there any difference for our finale purpose, pehaps some edge cases which I am not aware about?

Hello bro, I am really learning new things from your videos. By the way, could you please do a video on how to properly structure an angular app.

Great video sir, you should be in Udemy!

great implementation. question: what if I have several "widget" components inside wrapper. Is there a way to get a list of widgets and not only one?

Hi!!! Is the best practice use setTimeout() or exist any recommendations? Thank you.

nice technique! is there a way to declare the provider in the NgModule instead of the components themselves? (in case each child component belongs to a specific module)

Hi Dmytro! Great tutorials, I really appreciate what you're doing! I think I missed something while exploring DI topic. Can we use two existing instances of two different classes for a single token key "WIDGET" without putting multi property to "true"

Is it possible to access the methods of the Host Component in the child component ?

Hi Dmytro, awesome video, I've been using this pattern since you uploaded this into your channel 😀 Can you upload another version of this using Angular 15? haha. I'm kind of stuck right now on ng14 because this pattern no longer works with ng 15 😅

Can you show more use-case where this bridge design pattern will be useful in angular ?

How can we apply the bridge pattern on view child ? Here we are using content projection but what if we call multiple components that needs to have different load behavior ?

What is the purpose of using injection token and how the load and refresh method were trigger? can u elaborate it? Thanks

Hey, Dmytro, after 8 months I came back to your video, which is a sign of LEGENDARY content) I've got another question now. This pattern you showed and called Bridge pattern reminds me of Strategy so hard, by both implementation and the problem you solved. Problem: you have a family of algorithms (widgets in our case) which has interface: Widget. These algorithms can do different things (concrete loading and refreshing implementations) and are being provided to the Context (WidgetWrapperComponent - concrete implementation, not abstraction) dynamically by use of DI which is great=) So that looks like a pure Strategy problem and pure strategy pattern implementation. The Bridge Pattern would be applicable if apart from Widget Abstraction we would have also wrapper abstraction. E.g. abstract class WidgetWrapper{ abstract ngonInit(): void {} abstract onRefresh(): void{} } Then you could have a few concrete implementations of it: WidgetWrapperComponent1, WidgetWrapperComponent2... WidgetWrapperComponent - lets same it is the same as you showed in you example. LoggingWidgetWrapperComponent: LoggingWidgetWrapperComponent implements WidgetWrapper, OnInit { ngOnInit(){ this.widget.load(); console.log('Widget data is loaded') } onRefresh(){ this.widget.refresh(); console.log('Widget data is refreshed') } } But the main idea is not to find a way how to implement pattern, but to find a pattern that solves a general problem, and identify what general problem we have. And I think you solved it BRILIANTLY, but with Strategy instead of Bridge, which is a right way in this case most probably. Because once again I cannot see crucial part of Bridge: two hierarchies of abstractions. I see one abstraction - Widget, it's implementations - WeatherWidget, VelocityWidget, and a concrete context - WidgetWrapperComponent that uses Widget abstraction. What you think about it?

Wow

great tuutorial- how would this work if you are using the same wrapper that contains more than 1 content children that extends the same interface. I guess you can use content-children and do some type of condition if > 1 then forEach.load / forEach.refresh.. seems kind of ugly though

how can we use "useExisting: WeatherWidgetComponent" ? in fact I don't know when WeatherWidgetComponent key register in _container(map) (i believe value of useExisting should be exist in _container as key in relevant Injector class. is it wrong?

Should we use useExisting: forwardRef(() => WeatherWidgetComponent) instead useExisting: WeatherWidgetComponent?

What if you had used the Widget interface as the @ContentChild parameter?

the WIDGET token id not provided only below the WidgetWrapper Component, not above. If we If we are following the Injector hierarchy, how is the dependency getting resolved here

Instead of wrapping calls in an if, you can just use optional chaining: this.weatherWidget?.refresh()

You are angular black belt 😊

Why do you have to bother with the token stuff? Can't you just use the Interface inside the ContentChild input?

I have one question on this.. U shown how u can call a function from a parent to child using token.. In the same manner can i call a function from child to parent(I don't want to use event emitter)