Just starting off the conversation here in case anyone has any questions or comments.

@haydenbraxton Really great article! :clap: I’ve been using the concepts from @SCooper’s talk on ngTemplateOutlet for a while now, but this takes <ng-template> to the next level and I will definitely start using structural directives more. I had a few suggestions that I noticed while reading:

  1. You can type the context object that’s made available to the TemplateRef for additional type safety. So in your callback-template.directive.ts file, you could have this:

     export interface CallbackTemplateContext {
       $implicit: {
         openFileSelectDialog: () => void;
     @Directive({ selector: "[callbackTemplate]" })
     export class CallbackTemplateDirective {
       constructor(public template: TemplateRef<CallbackTemplateContext>) {}

    You can then also use this CallbackTemplateContext interface to type the context object in your file-select.component.ts file.

  2. The multiple input of your file picker isn’t affecting the component the way you anticipated. This is one of those cases where the presence of the attribute affects whether the change happens or not, so rather than writing [attr.multiple]="multiple" in the file-picker’s template, it should instead be [attr.multiple]="multiple ? '' : null" (see this SO answer if this isn’t clear)

  3. I think the name callback-template works well for your explanation. If you wanted to offer a naming convention to the readers, it seems that the Angular Material seems to use ____Def in similar cases (see the CDK table API, for instance)

@johnnycopes Thanks for reading and thanks for your suggestions.

  1. I typically use this in practice, but left it our for the sake of brevity
  2. Thanks for catching that! I honestly didn’t even use that input, so I wouldn’t have known.
  3. I’m not a big fan of the angular material naming convention, but that’s just my subjective opinion. Thanks for the recommendation anyways though.

@johnnycopes I actually just went to fix the multiple issue. If I set [multiple]="true" on either the file-select or headless-file-select, that seems to allow multiple selections. If I remove that property binding, I can only select a single file. So it seems to be working as intended, unless I’m missing something? The input expecting a boolean, so if you provide a string instead, you may get unexpected results.