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

I want to create a feature where a video will automatically play when a user clicks on a specific item in a list using Angular

Guide to integrating a component within another component

Guide to creating unit tests for a button click function in an Angular project

The function this.listCatModel.push is not a valid operation

I want to showcase a Python array within an Angular framework

To handle the input field efficiently in Angular, consider utilizing two <input type="radio"> elements

The continuity of service value across parent and child components is not guaranteed

Developing a hidden entity that adopts an interface with multiple functions that have been overloaded

Could one potentially assign number literals to the keys of a tuple as a union?

Leveraging foreign key attributes within Angular templates

What is the best way to encapsulate a slider within a fragment to prevent the occurrence of the "Type 'Element[]' is not assignable to type 'ReactNode'" error?

Creating an RxJS observable stream from an event emitted by a child element in an Angular 2 component template

Unable to finish the execution of the ionic capacitor add android command

Tips on transferring key values when inputText changes in ReactJs using TypeScript

Design buttons that are generated dynamically to match the style

What are some ways to leverage a promise-returning callback function?

Using an additional router-outlet in an Angular 2 application: a step-by-step guide

Error message indicating that the preflight request failed access control check in Angular 5 with JWT OAuth integration

connect the validation of forms to different components

Roles in the Nebular system always have the granted status set to true by default