in libs/fabric/src/lib/components/command-bar/command-bar.component.ts [137:178]
private _initDirective<TCommandBarItemsDirective extends CommandBarItemsDirectiveBase>(
directive: TCommandBarItemsDirective,
itemsPropertyKey: 'items' | 'farItems' | 'overflowItems'
) {
const transformItemsFunc =
(directive instanceof CommandBarItemsDirective && (newItems => this._createTransformedItems(newItems))) ||
(directive instanceof CommandBarFarItemsDirective && (newItems => this._createTransformedFarItems(newItems))) ||
(directive instanceof CommandBarOverflowItemsDirective &&
(newItems => this._createTransformedOverflowItems(newItems)));
null;
if (!transformItemsFunc) {
throw new Error('Invalid directive given');
}
const setItems = (
mapper: (items: ReadonlyArray<ICommandBarItemOptions>) => ReadonlyArray<ICommandBarItemOptions>
) => {
this[itemsPropertyKey] = mapper(this[itemsPropertyKey]);
transformItemsFunc(this[itemsPropertyKey]);
this.markForCheck();
};
// Initial items
setItems(() => directive.items);
// Subscribe to adding/removing items
this._subscriptions.push(
directive.onItemsChanged.subscribe((newItems: QueryList<CommandBarItemDirective>) => {
setItems(() => newItems.map<ICommandBarItemOptions>(directive => directive));
})
);
// Subscribe for existing items changes
this._subscriptions.push(
directive.onChildItemChanged.subscribe(({ key, changes }: CommandBarItemChangedPayload) => {
setItems(items => items.map(item => (item.key === key ? mergeItemChanges(item, changes) : item)));
this.markForCheck();
})
);
}