Implement declarative pattern for "fab-" components

[bengry]

From Ben Feely (@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