File tree Expand file tree Collapse file tree 1 file changed +15
-4
lines changed
Expand file tree Collapse file tree 1 file changed +15
-4
lines changed Original file line number Diff line number Diff line change @@ -85,23 +85,29 @@ class YourComponent {}
8585#### Rendering a Component
8686
8787To render a Component into a specific column header/cell/footer, you can pass a ` FlexRenderComponent ` instantiated with
88- your `ComponentType, with the ability to include parameters such as inputs and an injector.
88+ your `ComponentType, with the ability to include parameters such as inputs, outputs and a custom injector.
8989
9090``` ts
9191import {flexRenderComponent } from " ./flex-render-component" ;
9292import {ChangeDetectionStrategy } from " @angular/core" ;
93+ import {output } from " nx/src/utils/output" ;
9394
9495@Component ({
9596 template: `
9697 ...
9798 ` ,
9899 standalone: true ,
99- changeDetectionStrategy: ChangeDetectionStrategy .OnPush
100+ changeDetectionStrategy: ChangeDetectionStrategy .OnPush ,
101+ host: {
102+ ' (click)' : ' clickEvent.emit($event)'
103+ }
100104})
101105class CustomCell {
102106 readonly content = input .required <string >();
107+ readonly cellType = input <MyType >();
103108
104- readonly type = input <MyType >()
109+ // An output that will emit for every cell click
110+ readonly clickEvent = output <Event >();
105111}
106112
107113class AppComponent {
@@ -120,7 +126,12 @@ class AppComponent {
120126 inputs: {
121127 // Mandatory input since we are using `input.required()
122128 content: context .row .original .rowProperty ,
123- type // Optional input
129+ // cellType? - Optional input
130+ },
131+ outputs: {
132+ clickEvent : () => {
133+ // Do something
134+ }
124135 }
125136 }
126137 )
You can’t perform that action at this time.
0 commit comments