Retrieve all elements within an Angular6 Directive that share the same name as the Directive

Question

Retrieve all elements within an Angular6 Directive that share the same name as the Directive

I have created a custom Directive called isSelected and applied it to several elements in different components as shown below:

<i isSelected class="icon"></i>
<i isSelected class="icon"></i>
<i isSelected class="icon"></i>
<i isSelected class="icon"></i>

Now, I am trying to figure out how to access the elements that have the 'isSelected' Directive within the Directive itself.

@Directive({
 selector: '[isSelected]'
})
export class IsSelectedDirective {
   //I need to retrieve all elements with my directive
}

Check out the StackBlitz code

In the provided StackBlitz code, when hovering over an h1 tag, the hovered tag should have opacity of 1 while the rest of the h1 tags should have opacity of 0.5.

Feel free to leave a comment if you require any further information.

angular typescript angular6 angular-directive

Answer 1

Answer №1

One way to implement this functionality is by utilizing the constructor of your directive. Here is an example:

constructor(private el: ElementRef, private myService: MyService) {
    myService.push(el); 
}

Each time a constructor of an element applying this directive is called, the element is pushed into an array maintained by a service.

For instance, you can create a service like this:

@Inject()

export class MyService{
 private elementArray: Array<ElementRef> = [];

 public push(el: ElementRef) {
    this.elementArray.push(el):
 }
 public getElements() {
 return this.elementArray;
 }
}

By using this service within the directive, you can access the list of all elements that have applied the directive.

Answer 2

One way to implement this functionality is by utilizing the constructor of your directive. Here is an example:

constructor(private el: ElementRef, private myService: MyService) {
    myService.push(el); 
}

Each time a constructor of an element applying this directive is called, the element is pushed into an array maintained by a service.

For instance, you can create a service like this:

@Inject()

export class MyService{
 private elementArray: Array<ElementRef> = [];

 public push(el: ElementRef) {
    this.elementArray.push(el):
 }
 public getElements() {
 return this.elementArray;
 }
}

By using this service within the directive, you can access the list of all elements that have applied the directive.

Answer 3

Answer №2

After careful consideration, I stumbled upon this method.

@Directive({
 selector: '[isSelected]'
})
export class IsSelectedDirective {
  allItems;

  ngOnInit() {
    this.renderer.addClass(this.elem.nativeElement, 'isSelected')
  }

  ngAfterViewInit() {
    this.allItems = this.document.querySelectorAll('.isSelected');
  }
}

This technique involves adding a class during directive initialization and then querying the elements with the added class when the view is initialized. It proved successful for me.

Answer 4

After careful consideration, I stumbled upon this method.

@Directive({
 selector: '[isSelected]'
})
export class IsSelectedDirective {
  allItems;

  ngOnInit() {
    this.renderer.addClass(this.elem.nativeElement, 'isSelected')
  }

  ngAfterViewInit() {
    this.allItems = this.document.querySelectorAll('.isSelected');
  }
}

This technique involves adding a class during directive initialization and then querying the elements with the added class when the view is initialized. It proved successful for me.

Retrieve all elements within an Angular6 Directive that share the same name as the Directive

Answer №1

Answer №2

Similar questions

How to Programmatically Assign Bootstrap Class to an Element Using Angular 2

Resolve the Angular proxy issue with the backend

I am encountering an issue with Wedriver.IO where screenshots of executions on a Remote Selenium Grid Hub are not being included in my Allure Reports

Icon Searchbar Feature in Ionic 2

Obtain information from a JSON file based on a specific field in Angular

Exploring generic types using recursive inference

Updating Angular from version 9 to 11 causes issues with router.navigate not being able to properly load a new component

Setting up Electron with React and TypeScript: A Comprehensive Guide

Error: The variable "prisma" is not defined in this context - Next.js version 14

Angular 2 - Implementing click event functionality to add an item

The webpack-dev-server is missing the required module

What could be causing the React text input to constantly lose focus with every keystroke?

What steps can I take to ensure that the upper and left sections of a modal dialog remain accessible even when the size is reduced to the point of overflow?

When utilizing the catch function callback in Angular 2 with RxJs, the binding to 'this' can trigger the HTTP request to loop repeatedly

The program abruptly shut down with error code 127. Any idea why this occurred?

Guide on incorporating finos/perspective into an Angular 8 project using https://perspective.finos.org/

What is the best way to mock a Typescript interface or type definition?

Currying disrupts the inference of argument types as the argument list is divided in half, leading to confusion

Issue with Angular 4: NgModel not functioning properly for setting value to "date" input field

I'm sorry, we couldn't locate the module: Unable to find the path '../types/index'