I am using [innerHtml] to load an external HTML page in my ionic app but the URL I am getting is just get printed on the page and not loading the HTML page I want. I don't want to use iframe as it reloads my app at some point.
here is my code :
<div [innerHtml]="myTemplate"></div>
export public class MyComponent {
private webLink: any = "";
constructor(http: Http) {
http.get("https://www.google.com").map((html:any) => this.webLink= html);
}}
someone, please help if I am doing something wrong in this.
try this:
$('#divWrapper').load('http://localhost:8101/home');
pay attention that if you run on dev mode in ionic things won't work as you expect due to base path
Related
I am using Angular elements to use my components inside of custom ThingsBoard widgets. The elements are created inside ngDoBootstrap() like this:
const newCustomElement = createCustomElement(CustomElementComponent, {
injector: this.injector,
});
customElements.define("new-custom-element", newCustomElement);
In a ThingsBoard widget I can then import the compiled JavaScript code of my elements via the "Ressources" tab and instantiate them in the onInit() function of the widget like this:
self.onInit = function() {
element = document.createElement(
"new-custom-element");
self.ctx.$container.append(element);
}
While this works just fine and enables me to use Angular components in my widgets, I noticed a strange problem which sometimes occurs when navigating from a ThingsBoard dashboard state back to another dashboard state. Sometimes after navigating back, my widget would seem to load just fine but then the entire change detection seems to be broken. As long as I do not manually call detectChanges() in my component, the component will sometimes appear to freeze entirely in the UI and no longer react to any user interaction (such as a click event). Only refreshing the page will fix this problem.
What could cause this problem and is there anything I can do in order to fix this?
Have you ever tried like this:
ngAfterViewChecked() {
this.cd.detectChanges();
}
or
constructor(private appRef: ApplicationRef) { }
ngAfterViewInit() {
this.appRef.bootstrap(CustomElementComponent);
}
Good luck.
im having a simple web component running on my page. By a button click i simply remove the element expecting that the element and the class behind it is getting killed. But actually it keeps running, for example event listeners are still running even after removing it from the DOM.
This is how i add it to the DOM and make it load:
import { LightningElement, createElement } from 'lwc';
import App from 'my/app';
export default class App extends LightningElement {
...
const appinner = createElement('my-app', { is: App });
document.body.appendChild(app);
...
}
Then i simply remove it by this:
const app = document.querySelector('my-app');
app.remove(); // or app.parentNode.removeChild(app);
Everything in my "App" class is still running even when its gone. How can i really make it unload (or deconstruct) or even kill so no logic keeps running.
Update: Missed to mention i am using LWC library from lwc.dev. And the proper way of injecting an element is described here: Link
Update2: Added more code to show how its really done using the LWC.dev library
I am beginner at angular JS and ionic framework!
I need to integrate a static web page inside my app using InAppBrowser; I tried to insert the code in home.ts file but I don't know what to write in home.html file!!
All I need the functionality of opening predefined webpage inside home.ts that appears as soon as I press home button in tab theme.
I would be grateful If some one helped me.
You don't need to include anything in your html-file. Only if you want to open the static webpage using a button in your app.
Just include plugin and the function in your home.ts-file with:
import { InAppBrowser } from '#ionic-native/in-app-browser'
and add the InAppBrowser to your constructor like this:
constructor(private iab: InAppBrowser) { }
and finally declare your function with:
openBrowser(){
const browser = this.iab.create('https://ionicframework.com/');
}
If you would like to open the static webpage at the startup of the app just add the openBrowser-Function to the ionViewDidLoad-Function which is being executed every loading the Home-Page.
ionViewDidLoad(){
this.openBrowser();
}
so your final home.ts should look like this:
import { InAppBrowser } from '#ionic-native/in-app-browser'
export class HomePage {
constructor(private iab: InAppBrowser) {}
ionViewDidLoad(){
this.openBrowser();
}
openBrowser(){
const browser = this.iab.create('https://ionicframework.com/');
}
}
For more information check the plugin documentation: click
How can I alert in javascript but only on any one specific page suppose, I want to alert "Hey!" but the problem is same hey is coming on other pages too after site loading, I want that Hey alert should be alert on homepage of my site now other pages.
Is it possible or sounds like crazy?
Edit: from comments: I have theme of wordpress on which homepage i'm working so wordpress generate html on run time i never saw html of it
This is just for fun: (use in your case !)
if( window.location.href.indexOf('stackoverflow.com/questions/47197404/javascript-alert-on-specific-page') !== -1 ) {
alert('Hello world');
}
Ref: window.location, .indexOf()
What do you want to do?
Like to you want to have a specific JS file called on the home page?
So do a enqueue_script for the home, put this code in your functions or in the plugin file:
if(is_home()) {
function load_your_script() {
wp_register_script('your_script_name_here', PATH/TO/YOUR/JS/FILE/HERE);
wp_enqueue_script('your_script_name_here');
}
add_action('wp_enqueue_scripts', 'load_your_script');
}
So that way, the JS file will be only loaded in your home.
I want to build something like this inside of my app:
Whenever a user request for a page load important contents normally,
then grab some HTML code from server and display them at the bottom of
the loaded page without any refresh at all.
Another thing I want:
Whenever a user request for a page I want to just load navigation and footer and then grab the main HTML code from my server and display them on the screen without any page refresh and while that runs I want tot display a loading icon.
One more thing I want:
There is a huge functionality within one of my pages that use javascript code which is 80KB and it take 2 seconds just to load that code. User will probably use that functionality after 3min from the page loaded. (they have to read some contents and do stuff before that), is there a way to load that code without any page refresh while they are reading contents?
I've already know how to grab JSON from server and display them to user using react, what I don't know is how to grab actual code such as HTML or javascript from server using react.
I cannot find any tutorials about that in react topic, should I learn something else to do that? Should I learn server-side rendering to accomplish that?
You can return a HTML string from the server and use dangerouslySetInnerHTML to insert it into your react component. here is an example for the header and footer example you gave:
import React from 'react';
export default class App extends React.Component {
constructor() {
super();
this.state = {
header: 'loading the header',
footer: 'loading the footer'
}
}
componentWillMount() {
fetch('/api/header-and-footer')
.then(res => {
this.setState({header: res.data.header, footer: res.data.footer})
});
}
render() {
return (
<div>
<div className='my-header' dangerouslySetInnerHTML={{__html: this.state.header}} />
<div className='my-content'>Hello world</div>
<div className='my-footer' dangerouslySetInnerHTML={{__html: this.state.footer}} />
</div>
)
}
}
Then all you would have to return from your server would be an object like this:
{
header: '<div>This is my header content</div>',
footer: '<div>This is my footer content</div>'
}
Here is some more information on dangerouslySetInnerHTML:
https://facebook.github.io/react/docs/dom-elements.html
You could also do this with server side rendering but I think that is too complicated for what you want to do with this. However here are some links if you need/want them:
https://facebook.github.io/react/docs/react-dom-server.html
http://redux.js.org/docs/recipes/ServerRendering.html