Demonstrate custom component inside command bar

Author: Ben Grynhaus

apps/demo/src/app/app.component.html

@@ -30,17 +30,17 @@ <h2>Getting up and running...</h2>
       </fab-command-bar-item>
       <fab-command-bar-item key="copy" text="Copy" [iconProps]="{ iconName: 'Copy' }" (click)="onCopyClicked()"></fab-command-bar-item>
       <fab-command-bar-item key="custom" text="custom text" (click)="onCopyClicked()">
-        <!--  <render>
+        <render>
           <ng-template let-item="item">
-            <div>Custom render</div>
+            <counter></counter>
           </ng-template>
-        </render> -->
+        </render>
 
-        <render-icon>
+        <!-- <render-icon>
           <ng-template let-contextualMenuItemProps="contextualMenuItemProps">
             <div>custom icon</div>
           </ng-template>
-        </render-icon>
+        </render-icon> -->
       </fab-command-bar-item>
       <fab-command-bar-item *ngIf="runDisabled" key="sometimesVisible" text="woosh"></fab-command-bar-item>
     </items>

apps/demo/src/app/app.component.ts

@@ -64,7 +64,6 @@ export class AppComponent {
   onCustomItemClick(item: any) {
     this.customItemCount++;
     console.log('custom item clicked', item);
-    this.cd.detectChanges();
   }
 
   constructor(private readonly cd: ChangeDetectorRef) {}

apps/demo/src/app/app.module.ts

@@ -1,9 +1,38 @@
 import { AngularReactBrowserModule } from '@angular-react/core';
-import { FabBreadcrumbModule, FabButtonModule, FabCalloutModule, FabModalModule, FabCheckboxModule, FabChoiceGroupModule, FabComboBoxModule, FabCommandBarModule, FabDatePickerModule, FabDialogModule, FabDividerModule, FabFabricModule, FabGroupedListModule, FabIconModule, FabImageModule, FabPanelModule, FabPersonaModule, FabSpinnerModule, FabMessageBarModule, FabLinkModule, FabToggleModule, FabPivotModule, FabHoverCardModule, FabTooltipModule, FabShimmerModule, FabSliderModule, FabSearchBoxModule } from '@angular-react/fabric';
+import {
+  FabBreadcrumbModule,
+  FabButtonModule,
+  FabCalloutModule,
+  FabModalModule,
+  FabCheckboxModule,
+  FabChoiceGroupModule,
+  FabComboBoxModule,
+  FabCommandBarModule,
+  FabDatePickerModule,
+  FabDialogModule,
+  FabDividerModule,
+  FabFabricModule,
+  FabGroupedListModule,
+  FabIconModule,
+  FabImageModule,
+  FabPanelModule,
+  FabPersonaModule,
+  FabSpinnerModule,
+  FabMessageBarModule,
+  FabLinkModule,
+  FabToggleModule,
+  FabPivotModule,
+  FabHoverCardModule,
+  FabTooltipModule,
+  FabShimmerModule,
+  FabSliderModule,
+  FabSearchBoxModule,
+} from '@angular-react/fabric';
 import { NgModule } from '@angular/core';
 import { NxModule } from '@nrwl/nx';
 import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
 import { AppComponent } from './app.component';
+import { CounterComponent } from './counter/counter.component';
 
 @NgModule({
   imports: [
@@ -37,7 +66,7 @@ import { AppComponent } from './app.component';
     FabSliderModule,
     FabSearchBoxModule,
   ],
-  declarations: [AppComponent],
+  declarations: [AppComponent, CounterComponent],
   bootstrap: [AppComponent],
 })
 export class AppModule {

apps/demo/src/app/counter/counter.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+
+@Component({
+  selector: 'counter',
+  template: `
+    <div>{{ count }}</div>
+    <button (click)="onClick()">+</button>
+    `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CounterComponent {
+  count = 0;
+
+  constructor(private readonly cd: ChangeDetectorRef) {}
+
+  onClick() {
+    this.count++;
+    this.cd.detectChanges();
+  }
+}