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
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 using the "Toolbar" and "Copy To Clipboard" plugins with PrismJS to display a code snippet and a toolbar button to copy the code to clipboard and am loading my Prism js and css files in my <head>.
PrismJS works as expected if I start directly to the page (ex: http://localhost:3000/demo/example).
But if I navigate away from the page and return to it or start from the home page (http://localhost:3000/) and navigate to the page with the code snippet the button does not show up.
When I inspect the code I can see that the <div class="toolbar"> that normally holds the Copy button is missing.
I tried loading the PrismJS file with plugins via a plugin and adding the file in nuxt.config.js and that prevents the Copy button showing up at all.
Why might this be happening?
After checking out this blog I realized I needed to "highlight" all the prism codeblocks in the Mounted lifecycle like so:
...
import Prism from "~/plugins/prism";
export default {
mounted() {
Prism.highlightAll();
},
...
I didn't use the prism npm package like in the article, I just downloaded it from the PrismJS homepage and included it and the styles in my nuxt.config.js.
For React users, you can do that using react useEffect hook, something like this:
useEffect(() => {
const highlight = () => {
Prism.highlightAll();
};
highlight();
}, []);
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
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.