Support for dynamic content projection

[jolleekin]

The same issue for AngularJS can be found here.

For my use case, I'm trying to create an Angular component that mimics the styling and behavior of the XAML command bar. The command bar has one nice feature, that is, it automatically moves command buttons from the primary area to the secondary area if there's not enough width and move them back when there's enough width. Moving command buttons (the projected content) dynamically requires Angular to support dynamic content projection, which is not available at the moment.

This is how the command bar will be used.

<my-command-bar>
  <!-- These command buttons are in the primary area but may be
       moved to the secondary area if the width is not enough -->
  <my-command-button icon="back" label="Back"></my-command-button>
  <my-command-button icon="play" label="Play"></my-command-button>
  <my-command-button icon="forward" label="Forward"></my-command-button>

  <!-- These command buttons are always in the secondary area -->
  <my-command-button label="Like" secondary></my-command-button>
  <my-command-button label="Dislike" secondary></my-command-button>
</my-command-bar>

[matanlurey]

We don't plan to support dynamic content projection.

You could use <template> tags and move them around manually, using either the ViewContainerRef API or something higher-level like ComponentLoader:

https://github.com/dart-lang/angular/blob/master/doc/component_loading.md#load-next-to-a-location

[jolleekin]

To use ViewContainerRef, I need to get hold of the ViewRefs of the projected command buttons. However, @ContentChildren(MyCommandButton, read: ViewRef) is resolved into an empty list. Is there a way to access the ViewRefs of the projected components?

my_command_bar.dart

class MyCommandBar {
  // Resolved into a list of [MyCommandButton].
  @ContentChildren(MyCommandButton)
  QueryList<MyCommandButton> buttons;

  // Resolved into an empty list.
  @ContentChildren(MyCommandButton, read: ViewRef)
  QueryList<ViewRef> buttonViewRefs;

  @ViewChild('primary', read: ViewContainerRef)
  ViewContainerRef primaryContainerRef;

  @ViewChild('secondary', read: ViewContainerRef)
  ViewContainerRef secondaryContainerRef;
  
  ...
}

my_command_bar.html

<div id="innerCommandBar">
    <div id="contentArea">
        <ng-content select="[content]"></ng-content>
    </div>
    <div id="primaryArea">
        <template #primary></template>
    </div>
    <my-command-button [hidden]="overflowButtonHidden"
                        id="overflowButton"
                        icon="ellipsis"
                        (invoke)="open()">
    </my-command-button>
</div>
<div id="secondaryArea">
    <template #secondary></template>
</div>

[stefanmatar]

@jolleekin Try checking bootViewRefs in the AfterViewInit of the component