search

Angular-Dynamic-Hooks / ngx-dynamic-hooks

Automatically insert live Angular components into dynamic strings (based on their selector or any pattern of your choice) and render the result in the DOM.
MIT License
115 stars 6 forks source link

Angular V:11.0.5 is sanitizing the HTML and setting Material component #3

Closed axmad22 closed 3 years ago

axmad22 commented 3 years ago

I was using hacks with innerHTML for my app to simulate a similar effects, but yours is what I have been waiting for and Now that I created and App to test it and enjoy....Angular goes and updates and the first thing they do is sanitize their components even more...Your plugin is getting blocked because it was to sweet for them to handle

 WARNING: sanitizing HTML stripped some
 [Violation] Forced reflow while executing JavaScript

Wanted to ask a question Angular material components like Mat-buttons, etc how would you load them and does the plugin support ngx-translate and custom hooks do they work and if yes how to configure them by Lazy-loading also entrycomponents is deprecated.

thanks for making angular a better world to live in

MTobisch commented 3 years ago

Hey there, thanks for the kind words. This is a lot, so I'll go over if one after the other.

  1. Sanitization: The warning you're seeing is fairly normal and is automatically shown by Angular when literally anything in the whole content string was sanitized. Most of the time, that's super harmless stuff, like attributes in HTML elements for example. Hooks by design should not be sanitized at all, so I don't think that's where the warning comes from. You can also see in the Quickstart-example, which runs with the most up-to-date version of Angular, that everythings works fine and without warnings. The other error "[Violation] Forced reflow while executing JavaScript" is unfamiliar to me, so it might be some other code that's causing it?

  2. Angular Material: Sorry, I haven't really used Angular Material in any of my projects. But if you can get a hold of the component class of the buttons, etc. and pass them to my library, you can dynamically load them like any other component.

  3. ngx-translate: Since this is used mostly with pipes and directives, and since you can't use those in the content string (only hooks), it won't work like that. However, it would work perfectly fine again in the dynamically loaded components (like in any other component), if that is of any help.

  4. Custom hooks: You can create your own hook parsers for that.

  5. Lazy-loading: Also see here.

  6. entryComponents: The reason its being deprecated is because you don't need it anymore with Ivy. If you are using Angular 9+ (with Ivy), you don't have to use entryComponents for my library, either. Its just there for older Angular versions, in which case you still need to fill it out to load dynamic components of any sort, as they aren't compiled otherwise.

axmad22 commented 3 years ago

Ah now I see....Only components I was testing to see with code like this and it was removing the button with warning

 this.dynamicText = `
    <p>Let's load a dynamic component here</p>
    <p>How about a component for an image:</p>
    <button mat-raised-button class="w-full mt-3"  type="button">hit</button>
  `;

It works with pipes/directives also Angular Material. Very nice work man...Angular updates.... they need to give you the keys this is what we call an upgrade...thank you