Override Component UI with an Angular TemplateRef

This refactor particularly has been one of the more confusing to me, both here and in its original React context. Are there any rule-of-thumbs of when to use this over the previous (provider binding methods). Ive noticed that sometimes (as in Dans original React course) these lessons sets will describe a concept in a 'vanilla' raw implementation form, and then go on to teach us the abstracted shortcut, e.g. doing a mapStateToProps manually, and then teaching us the react-redux connect() function. Is that whats happening here, where this is favorable over the provider.directive pattern? If not, do you have any use case examples of when you'd use which.

Thanks for this lesson set, Ive been googling for this 'translation' to angular for a while now.

I can't speak to your comparison with mapStateToProps, but here's how I would compare the pros and cons of the compound component pattern vs. using TemplateRefs.

Compound components give the component author more control over the UI. Using TemplateRefs gives the user of the component control over the whole UI. If there are parts of your component UI that you want to let the user do whatever they want with, use a TemplateRef. If there are parts that really need to be rendered in a certain way and you don't want to let the user mess it up, use Compound Components (or inside of a user's TemplateRef use Content Directives).

It all comes down to who should be in control.

Yesss, thats exactly the type of answer I was looking for, really appreciate you understanding the context of the question, which was about decision making.

Just to clarify, the mapToStateProps part of my comment was to highlight something I see many tutorials do. They take a concept, say 'state management' and over the course of say 5 'lessons' they will start with the most vanilla version of implementation, often from scratch. The instructor then introduces tools to make the process easier, like reacts connect() method. Sometimes its not clear if a lesson is 'a different way of doing the previous' or a 'better way of doing the previous', which is what spawned my original question to you.

I'm getting this error:

compiler.js:2427 Uncaught Error: Template parse errors:
Binding to event property 'on' is disallowed for security reasons, please use ()=...
If 'on' is a directive input, make sure the directive is imported by the current module. ("is off" }}
    <!-- The red squiggles on toggle() can be ignored, but are annoying. -->
    <switch [ERROR ->][on]="on" (click)="toggle()"></switch>
  </ng-template>

Please help!

You can look at a working example here: https://stackblitz.com/edit/adv-ng-patterns-06-use-template-refs-pdwded

Check to see if you have the SwitchComponent in the declarations list of the AppModule.

Hi there, very nice lessons. Just an other approach clearer imo using bind https://stackblitz.com/edit/adv-ng-patterns-06-use-template-refs-b3qetu