I have developed a select-all feature for my custom table component. I want to offer users of my directive two different ways to instantiate it:
1:
<my-custom-table>
<input type="checkbox" my-select-all-directive/>
</my-custom-table>
2:
<input type="checkbox" [table]="myTableRef" my-select-all-directive/>
<my-custom-table #myTableRef></my-custom-table>
I managed to implement the first method by utilizing Host, Inject, and forwardRef in the constructor of my directive:
constructor(@Host() @Inject(forwardRef(() => MyCustomTableComponent)) table?: MyCustomTableComponent) {
this.table = table; //later I can call this.table.selectAll();
}
However, when attempting to use the second way of instantiation, an exception is thrown indicating that there is no provider for MyCustomTableComponent. This is likely because MyCustomTableComponent is not the parent in the second approach, causing Host and forwardRef to return null...
How can I modify the parameter to be optional so that my directive can utilize its parent or grandparent MyCustomTableComponent if available, or fallback to using the provided table as input...