Implement declarative pattern for "fab-" components

[bengry]

From @benfeely on July 12, 2018 18:20

The initial effort to create wrappers for Fabric components is targeted at closely following the React Fabric API. This means implementing a largely imperative pattern, particularly for scenarios such as defining "items" within a "CommandBar". Following the react pattern, these items are defined by passing in an object as a property. Although this is a valid pattern, the Angular community tends to lean more towards a declarative model...

Imperative

This is the initial implementation which follows the React Fabric API for the component closely. Component

commandBarItems: ICommandBarItemOptions[] = [
  {
    key: 'run',
    text: 'Run',
    iconProps: {
      iconName: 'CaretRight',
    },
    disabled: true,
  },
  {
    key: 'custom-element',
    onClick: () => {
      console.log('custom element clicked');
    },
    render: this._customCbItemRef/* this.customCbItemTemplate */,
  },
];

Template

<fab-command-bar #commandBar [items]="commandBarItems" [farItems]="commandBarFarItems">
</fab-command-bar>

Declarative

This is the proposed implementation to add to the extend the API and allow for declarative syntax (preferred by many Angular teams).

<fab-command-bar #commandBar [items]="commandBarItems" [farItems]="commandBarFarItems">
  <items>
    <fab-action-button [iconProps]="{ iconName: 'AddFriend' }" text="Compound" [secondaryText]="'Loren ipsum dolor sit amet'" (onClick)="onActionButtonClicked($event)"></fab-action-button>

    <fab-compound-button [iconProps]="{ iconName: 'AddFriend' }" [secondaryText]="'Loren ipsum dolor sit amet'" (onClick)="onCompoundButtonClicked($event)" text="Compound"></fab-compound-button>
  <items>
  <far-items>
    ...
  <far-items>
</fab-command-bar>

Note: This proposal is based on Commercial Store's implementation of BSX-List (which is patterned after the Angular Material list and other components). Please see BSX-List source for implementation examples.

Copied from original issue: benfeely/angular-react#11