Get child directive using a structural directive

Question

Get child directive using a structural directive

I am struggling to access a 'child' directive within a structural directive in order to pass some data into that directive. Unfortunately, I keep getting undefined or an injection error.

Here is the HTML snippet I have:

<app-table [dataSource]="data">
  <button *customColumn="let row" [highlightRowOnClick]="row">
    click here!
  </button>
</app-table>

I aim to inject all rows using the customColumn directive into the [highlightRowOnClick] directive so that clicking on one row will deselect all other rows.

The flow of passing rows to the directive should be: (app-table --> *customColumn --> [highlightRowOnClick]).

I have set up a Stackblitz to showcase this issue with row selection functioning correctly but not with row deselection.

My Thoughts

I am aware that accessing child components via @ContentChildren is not possible due to the [highlightRowOnClick] directive not being a direct child, rather a sibling in the view (read more here).
A structural directive can select its host element (e.g., an attribute directive like ngSwitch) through the @Host decorator, but it doesn't work the other way around, leading to an Injector error (
```
no provider for 'customColumn' found
```
). (Details available here)
Using a service to inject the data could cause bugs when multiple tables exist in the current view since the service is a singleton and overlapping rows could create unexpected selection issues (like selections happening in both tables).
Directly injecting the rows into the [highlightRowOnClick] directive would require manual intervention by the programmer each time. It seems logical to only highlight the current row and not expose all rows at that level since they are already accessible via [dataSource]. Therefore, this might not be the optimal solution.

Example:

<app-table [dataSource]="rows">
  <button *customColumn="let row; let rows=rows" [highlightRowOnClick]="row" allRows="rows">
    click here!
  </button>
</app-table>

Is there a better approach to resolve this dilemma? Perhaps a completely different strategy?

angular typescript angular-directive

Answer 1

Answer №1

If you encapsulate everything in a wrapper component, you can easily inject it into the HighlightRowOnClickDirective.

constructor(@Optional() @Host() private wrap:WrapperComponent ){}
  @Input('highlightRowOnClick')
  row: Row;

  @HostListener('click')
  onClick(): void {
    this.wrap.dataSource.forEach(x=>{
      x.isSelected=(x==this.row)
    })
  }
}

Check out this stackblitz link

It might be more practical to use a variable like "indexSelected" instead of using *ngFor="...;let i=index" and passing it as an argument.

Update: Implementing Index Select

You can either have a boolean variable "isSelected" in each row or a unique variable "indexSelected" in the wrapper, and assign the index value to it.

<div *ngFor="let row of dataSource; let i=index">
  <div [class.selected]="i==indexSelected"> Hello world! </div>
  <ng-container *ngFor="let col of colHeaders">
     <ng-template *ngTemplateOutlet="col.template; context: { $implicit: i }"></ng-template>
  </ng-container>
  <br><br>
</div>

The updated directive will look like this:

@Input('highlightRowOnClick') index:number

@HostListener('click')
onClick(): void {
  this.wrap.indexSelected = this.index
}

View another example on this stackblitz link

Answer 2

If you encapsulate everything in a wrapper component, you can easily inject it into the HighlightRowOnClickDirective.

constructor(@Optional() @Host() private wrap:WrapperComponent ){}
  @Input('highlightRowOnClick')
  row: Row;

  @HostListener('click')
  onClick(): void {
    this.wrap.dataSource.forEach(x=>{
      x.isSelected=(x==this.row)
    })
  }
}

Check out this stackblitz link

It might be more practical to use a variable like "indexSelected" instead of using *ngFor="...;let i=index" and passing it as an argument.

Update: Implementing Index Select

You can either have a boolean variable "isSelected" in each row or a unique variable "indexSelected" in the wrapper, and assign the index value to it.

<div *ngFor="let row of dataSource; let i=index">
  <div [class.selected]="i==indexSelected"> Hello world! </div>
  <ng-container *ngFor="let col of colHeaders">
     <ng-template *ngTemplateOutlet="col.template; context: { $implicit: i }"></ng-template>
  </ng-container>
  <br><br>
</div>

The updated directive will look like this:

@Input('highlightRowOnClick') index:number

@HostListener('click')
onClick(): void {
  this.wrap.indexSelected = this.index
}

View another example on this stackblitz link

Get child directive using a structural directive

Answer №1

Similar questions

I have noticed that my unit test case does not include coverage for the if statement

Error: Property 'nativeElement' is undefined in Ionic/Chart.js

Enhancement of Nebular Theme from version 4.4.0 to 9.0.1 in relation to Angular (from 8.2.3 to 13.2.1)

Error event encountered during development of React.js/Next.js application

Implementing the breadcrumb component within dynamically loaded modules loaded through the router-outlet component

Initiating external libraries at the right time in Angular 4

Starting a checkbox group with values based on total number

develop a directive that allows for input fields to become focused

Using TypeScript to create a list of object keys defined as [key: string] key/value pairs

JavaScript 2 add or remove a class to the keyboard when opening or closing

If either the form is invalid or has been submitted, disable the button

Executing functions before the data is loaded in an Angular application

NativeScript is having trouble locating Angular components

Error occurs when a value is passed to a component after it has already been checked for changes

What is the best way to inject the Service into the Controller constructor using TypeScript?

Learn how to utilize interpolation within an *ngIf statement in Angular 2 in order to access local template

Angular2 - Access to fetch at 'https://example.com' from

Tips for utilizing the @Input() property of a component to set the initial value of an input field

Accessing information from RESTful Web Service with Angular 2's Http functionality

Creating a user-friendly interface for an array of objects, complete with an included array containing those same objects