i'm having an issue with kendotooltip component inside my angular application, it's working for desktop version but not for mobile version(although i added onshow="click" event and still not working).
there is many examples in stackblitz for kendotooltip that are not working when changing to mobile version .
i'm using the tooltip inside a child component that is called from other parent components .in fact if i test with a simple exemple it works, but if i add it inside my child component it does'nt work anymore(even if i add an empty div inside the parent component the tooltip dont work anymore).
Related
There're two component developed in two different application.
One is App. Another one is MFE1.
In real world we have MFE2, MFE3, MFE4...etc. And App is just a container.
We will load different MFE into App using ReactDOM.render(Match by id).
The whole thing is actually working fine but there's only one existing issue.
We cannot find a way to unrender MFE1 when its container is unrendered.
I tried to call unmountComponentAtNode inside the useEffect callback of the App container.
However since the DOM is already gone at this point so we cannot use this method.
At its simplest level, my question is how can I unrender the MFE1 when/after I unrender its container?
I have created a sandbox to simulate the issue.
https://codesandbox.io/s/zealous-black-7swzbt
Inside the sandbox, I already implemented the way we load these MFE1 into App.
There's two buttons inside the sandbox.
Button switch mfe simulate the way we switch between different MFEs.
When you click it, you will see the MFE1 is invisible in the page, however it is not unrendered yet since the console.log("MFE1 is unrendered") is not called.
Button unmountComponentAtNode simulate the expected behavior, you can see MFE1 is invisible in the page, also the console.log("MFE1 is unrendered") is called. However I cannot use it inside the useEffect callback...
I'm working with a Chrome extension and embedding UI component on a user's site.
I wrote React component with Typescript (.tsx files)
The thing is, when I'm trying to embed the react component inside the site, the component just wont function - drop-downs wont open, buttons click wont do anything, components wont re-render on state change, etc... sometimes the components even lose all of it styles, like the css doesn't exist.
The only thing I could notice is that I'm embedding the components inside an iframe, idk if it has something to do with that or not - but if i put them outside the iframe - all works perfectly.
Im using render function to render the component on the site:
const element = ReactDOM.createRoot(#selector to create root#);
element.render(<MyComponent prop1="prop1" prop2="prop2"></MyComponent>);
Anyone had any experience with the type of issue?
Thanks!
As I mentioned - I already tried to embed the component outside an iframe and it worked
I'm using a hybrid AngularJS/Angular application and my use case is I want to click a button, which is in my AngularJS code, that will trigger a mat-dialog component that I've written (which also works with other Angular components). My question is how can i get this mat-dialog component to trigger from AngularJS.
I've tried playing around using $mdDialog.show({}) with various properties such as trying to point it to the template of the mat-dialog component and trying to pass in my scope variables that the Angular component needs access to but with no such luck
I figured out that I can solve this problem by adding another #Input() to another Angular component that is already using my mat-dialog component. Then make sure that this angular component is implementing onChanges to watch for changes to the input variable. When changes are detected then I can trigger a method to kick off the mat-dialog.
I am using angular 1.5 component router. I need to be able to change the title shown on the browser tab whenever there is a route change.
I have gone through the component router docs and googled it to many a websites but without any luck. The only way I can see to do it, is using vanilla JS inside each component's $onInit method.
I am looking out for an angular way of doing it and setting all the titles in one place. Please help.
I'm facing some issues when rendering a React component into the shadow DOM of a webcomponent.
I wrote a small piece of code to turn a React component into a webcomponent, but I want to render the
React component inside the shadow DOM of the webcomponent. But in that case, it seems that React is not able to catch UI events (click, keyPress, etc ...) anymore.
Let's take an example, let say that I have a first webcomponent <awesome-timer /> that render the React component inside the webcomponent node, and another webcomponent <less-awesome-timer /> that render the React component inside the shadow DOM of the webcomponent.
Both webcomponents use the same React component. However the one rendered inside the shadow DOM does not work, because click events on the button of the timer component does not trigger the bound function.
I guess React is not designed to handle such case, but I'd love to get more details about it.
The code of the example is available here : https://gist.github.com/mathieuancelin/cca14d31184bf4468bc1
Does anyone have an idea about it ?
I know this is kinda late but, I believe your issue when you pass any attributes to a web component they instantly become strings Because that's all you can pass to a web component. Now of course you can convert or cast them back to there original data type, except functions because once stringified they loose there scoping, lexical and all.
Now to your main question, you are were trying to pass you child element through the Main web components slot. Now you have to remember that once you pass anything to a web component you now have to use the webs components methods and return types to manage whatever you pass. So yes passing react into a web component will not work they you expect.
You will need to go back to whatever tool you use to build your web component and deal with the slot logic there. Since this is a very old post as are web components. You might not have had access to the modern web component build tool's we have today. I found Stenicl allows you to build and manage your web components in Typescript.
A good option is to change your pattern a little bit and just return web components from your react app.
Or you can use another really cool to call Lit-HTML or Lit-element. I believe they may have combined there core libraries. Anyway these tool will allow you to combine Reactjs and web components where lit-html gives you access to methods simial to Reactjs's life cycle methods. Anyway some good stuff to check out if your stuck at this point.