fix(angular-table): handle null and number values with flex-render (#…

…5550)

* fix: handle flex-render null

* fix: handle flex-render null

* support number values in flex-render

packages/angular-table/src/flex-render.ts

@@ -16,8 +16,10 @@ import {
 
 type FlexRenderContent<TProps extends NonNullable<unknown>> =
   | string
+  | number
   | FlexRenderComponent<TProps>
   | TemplateRef<{ $implicit: TProps }>
+  | null
 
 @Directive({
   selector: '[flexRender]',
@@ -27,8 +29,11 @@ export class FlexRenderDirective<TProps extends NonNullable<unknown>>
   implements OnInit, DoCheck
 {
   @Input({ required: true, alias: 'flexRender' })
-  content: string | ((props: TProps) => FlexRenderContent<TProps>) | undefined =
-    undefined
+  content:
+    | number
+    | string
+    | ((props: TProps) => FlexRenderContent<TProps>)
+    | undefined = undefined
 
   @Input({ required: true, alias: 'flexRenderProps' })
   props: TProps = {} as TProps
@@ -62,7 +67,7 @@ export class FlexRenderDirective<TProps extends NonNullable<unknown>>
       return null
     }
 
-    if (typeof content === 'string') {
+    if (typeof content === 'string' || typeof content === 'number') {
       return this.renderStringContent()
     }
     if (typeof content === 'function') {
@@ -72,21 +77,25 @@ export class FlexRenderDirective<TProps extends NonNullable<unknown>>
   }
 
   private renderContent(content: FlexRenderContent<TProps>) {
-    if (typeof content === 'string') {
+    if (typeof content === 'string' || typeof content === 'number') {
       return this.renderStringContent()
     }
     if (content instanceof TemplateRef) {
       return this.viewContainerRef.createEmbeddedView(
         content,
         this.getTemplateRefContext()
       )
+    } else if (content instanceof FlexRenderComponent) {
+      return this.renderComponent(content)
+    } else {
+      return null
     }
-    return this.renderComponent(content)
   }
 
-  private renderStringContent() {
+  private renderStringContent(): EmbeddedViewRef<unknown> {
     const context = () => {
-      return typeof this.content === 'string'
+      return typeof this.content === 'string' ||
+        typeof this.content === 'number'
         ? this.content
         : this.content?.(this.props)
     }
@@ -97,7 +106,9 @@ export class FlexRenderDirective<TProps extends NonNullable<unknown>>
     })
   }
 
-  private renderComponent(flexRenderComponent: FlexRenderComponent<TProps>) {
+  private renderComponent(
+    flexRenderComponent: FlexRenderComponent<TProps>
+  ): ComponentRef<unknown> {
     const { component, inputs, injector } = flexRenderComponent
 
     const getContext = () => this.props