Added PipeFunction for NgModel Error when using NgModel with select option. Also changed toolbarActions file to use together toolbarAction and toolbar component .

npm/ng-packs/packages/core/src/lib/core.module.ts

@@ -37,6 +37,7 @@ import { getInitialData, localeInitializer } from './utils/initial-utils';
 import { ShortDateTimePipe } from './pipes/short-date-time.pipe';
 import { ShortTimePipe } from './pipes/short-time.pipe';
 import { ShortDatePipe } from './pipes/short-date.pipe';
+import {PipeFunction} from "./pipes";
 
 export function storageFactory(): OAuthStorage {
   return oAuthStorage;
@@ -72,7 +73,8 @@ export function storageFactory(): OAuthStorage {
         ToInjectorPipe,
         ShortDateTimePipe,
         ShortTimePipe,
-        ShortDatePipe
+        ShortDatePipe,
+        PipeFunction
     ],
     imports: [
         OAuthModule,
@@ -100,7 +102,8 @@ export function storageFactory(): OAuthStorage {
         ToInjectorPipe,
         ShortDateTimePipe,
         ShortTimePipe,
-        ShortDatePipe
+        ShortDatePipe,
+        PipeFunction
 
     ],
     providers: [LocalizationPipe]

npm/ng-packs/packages/core/src/lib/pipes/index.ts

@@ -4,3 +4,4 @@ export * from './to-injector.pipe';
 export * from './short-date.pipe';
 export * from './short-time.pipe';
 export * from './short-date-time.pipe';
+export * from './pipe-function.pipe';

npm/ng-packs/packages/core/src/lib/pipes/pipe-function.pipe.ts

@@ -0,0 +1,14 @@
+import {Pipe, PipeTransform} from "@angular/core";
+
+@Pipe({
+  name: 'pipeFunction'
+})
+export class PipeFunction implements PipeTransform {
+  public transform(value: any, handler: (value: any) => any, context?: any): any {
+    if (context) {
+      return handler.call(context, value);
+    }
+
+    return handler(value);
+  }
+}

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html

@@ -8,7 +8,7 @@
       <ng-container *abpPermission="action.permission">
         <ng-container *ngIf="action.component as component; else button">
           <ng-container
-            *ngComponentOutlet="component; injector: createInjector(action)"
+            *ngComponentOutlet="component; injector: action | pipeFunction: createInjector : this "
           ></ng-container>
         </ng-container>
 

npm/ng-packs/packages/theme-shared/extensions/src/lib/models/toolbar-actions.ts

@@ -68,7 +68,9 @@ export type ToolbarComponentOptions<R = any> = O.Optional<
   'permission' | 'visible' | 'action'
 >;
 
-export type ToolbarActionDefaults<R = any> = Record<string, ToolbarAction<R>[]>;
+export type ToolbarActionDefault<R = any> = ToolbarAction<R> | ToolbarComponent<R>;
+
+export type ToolbarActionDefaults<R = any> = Record<string, Array<ToolbarActionDefault<R>>>;
 export type ToolbarActionContributorCallback<R = any> = ActionContributorCallback<
   ToolbarActionList<R>
 >;