Adding directive to an element using Renderer2

Question

I have a directive that implements a slider when you hover the element, If you visit this site when you hover the image the directive makes other images absolute to the main one and enables arrows for sliding to next image, The only problem is that i have a appLazyLoadWithLoading directive that loads images when they are visible in the page and are not in offscreen and adds loading before load and I'm looking for a way to add my directive to created img elements.

let img = this.renderer2.createElement('img');
this.renderer2.setAttribute(img, "src", this.thumbnailMaker(element.url));
this.renderer2.setAttribute(img, "alt", element.name);
this.renderer2.setAttribute(img, "title", element.name);
this.renderer2.appendChild(this.el.nativeElement.parentElement, img);

this way the img element is being added but i cant add my directive to it tryed this way and $compile and they didnt work.

this.renderer.setAttribute(img, "appLazyLoadWithLoading", "work please!");

You can not add directives on top of DOM dynamically, as of now that's not possible. One possible solution can be, create a component with selector [appLazyLoadWithLoading] and convert it to Angular Elements. So as soon as you add this to DOM, the specific web component created using Angular Element will kick in. I've not given a try to this, but this should work I believe — Pankaj Parkar
– Pankaj Parkar, Commented Jul 31, 2021 at 11:53
@PankajParkar so there's no way to do that ? Maybe writing the Img tag in HTML and then adding that to the parent element using Renderer2 ? — Behnam Aminazad
– Behnam Aminazad, Commented Jul 31, 2021 at 11:58
Can you please look at my last edited comment? I suggested one solution, that should work. — Pankaj Parkar
– Pankaj Parkar, Commented Jul 31, 2021 at 11:59
@PankajParkar Thanks I'm going to give a try and report the result here — Behnam Aminazad
– Behnam Aminazad, Commented Jul 31, 2021 at 12:00

Aviad P. · Accepted Answer · 2021-07-31 18:52:14Z

3

It is possible not using Renderer2 but by using dynamic component loading.

Basically, instead of creating an img html element, create a component which includes an img element inside it, with whatever directives you want, and then load that component dynamically.

Here's an example StackBlitz

answered Jul 31, 2021 at 18:52

Aviad P.

32.8k15 gold badges111 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pankaj Parkar · Accepted Answer · 2021-08-01 09:39:08Z

2

At moment till Angular v12, you can not add components dynamically in DOM.

A solution Can be,

Create a component with selector [appLazyLoadWithLoading]
Convert this component to Angular Elements.
Now you can use converted components dynamically.

Basically what happens is Angular Element help to covert your components to Web Component. So when you add a particular selector to DOM, the specific web component will kick in, and you will see desired behavior on HTML.

edited Aug 1, 2021 at 9:39

answered Aug 1, 2021 at 9:01

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

10 Comments

Aviad P. Over a year ago

You can add components, but not directives.

Pankaj Parkar Over a year ago

Indirectly you can, component with template: '' (Directive is component without template), but to avoid confusion let me keep it as a component only. Thanks for the heads up @AviadP.

Aviad P. Over a year ago

I mean you can add components dynamically, look at my answer and stackblitz - unless I misunderstand your meaning

Pankaj Parkar Over a year ago

@AviadP. yes, I saw your answer. We can add components dynamically in multiple ways. I think you misunderstood, In this case, OP wants to add something on top of DOM which itself created on the fly programmatically, in that case, it won't possible. I can see Angular Elements is the way to go for this.

Aviad P. Over a year ago

I don't see why adding a component using a component factory wouldn't work for the OP

|

Collectives™ on Stack Overflow

Adding directive to an element using Renderer2

2 Answers 2

Comments

10 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

10 Comments

Linked

Related