Basically, I have two components page1 and page2 and I would like to draw a google Gantt chart on the second page.
However, when switching to page2 nothing is rendered.
From what I understand you must load google chart inside the <head> element of index.html file, but because the container that should render the chart inside my component page2 is hidden at the start, google chart cannot find render it.
I have tried moving the google chart script to the html file of page2 but still no result.
Making page1 the container works but as soon as I switch pages it disappears when switching back to page1.
Here is my stackblitz with the code: https://stackblitz.com/edit/angular-button-routerlink-xglnar?file=src/index.html
Is there a way to work around that? Thank you!
You can always look for some npm library that acts as a wrapper if you're unsure about how to do it properly - i.e. angular-google-charts. Note - I didn't test the library and whether / how it works.
You can also make changes yourself.
Note that you don't have place all the scripts in the head - important part is referencing the google loader:
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
Then you can use the global functions / variables imported from the file anywhere in your app. But, since Angular uses TypeScript, it will warn you that the 'google' object is not defined. To work around it, you can simply declare an empty const - which will be replaced on the runtime by the script imported from the google hosting:
declare const google;
Then you can simply put the required script in the OnInit hook of your component and it should work properly. Of course replacing the document.getElementById("chart_div") by Angular way of getting the container reference is preferred (i.e. ViewChild).
Updated stackblitz with working barebone minimum example: https://stackblitz.com/edit/angular-button-routerlink-6vzuyd
Related
I followed both the documentation, and the solution found here, on SO. But the input field just wouldn't load on localhost. It does however if I just add it into an index.html file.
<script async src="https://cse.google.com/cse.js?cx=123456">
</script>
<div class="gcse-search"></div>
Does anybody know what might cause it?
Things I tried:
Added it to my page as displayed above.
Added the script tag separately into the head tag.
Added the script as a function into the ComponentDidMount
I am trying to install TruConversion's heatmap script on my Next.js 11 website.
On the homepage of TruConversion, they state that I should add their script before the </head> tag.
And the documentation of Next.js says that I shouldn't use the "next/script" in either a next/head component or in pages/_document.js.
So, I am confused. Where should I add that heatmap script?
To use TruConversion's Heatmap you need to first load the Tracking Code and then start Heatmap Tracking.
You can place the tracking code <script /> either in pages/_document.js using the Head component from this example or in pages/index.js with <Script /> (note uppercase) strategy="beforeInteractive" using the new technique with next/scripts as demonstrated here.
Either approach will load the tracking script early on page load.
With that preloaded, you can now trigger TruConversion to start Heatmap Tracking anywhere in your app.
I am trying to make grab data from a MongoDb database and then viewing, editing and deleting it.
The first one is working pretty fine but what I am having issues with is editing. What I have done is made a route on a button click that basically works like this:
'/viewList/edit/'+item._id
This is supposed to take me to a form that will let me edit those values. The problem is that the CSS, Bootstrap and things like that break and the page looses all of the features they provide and it looks like a generic html that doesn't have any of these included in it.
If I remove the "/edit/" bit of the routing out and just do '/viewList/'+item._id it works.
I tested this by making a dummy page that tells details for that specific item like it's name and stuff and the page doesn't break, in terms of CSS/Bootstrap.
I really can't find a solution for this, can someone point in the right direction?
Difficult to know without seeing what's in your <head> but the paths in your <link> tags are probably relative. This means they'll point to non-existent files when your URL path changes. Check that they start with / so your static file paths are always relative to the root URL rather than relative to the current page. i.e. if you have this:
<link rel="stylesheet" href="bootstrap/styles.css">
Change it to:
<link rel="stylesheet" href="/bootstrap/styles.css">
I'm having a problem with scripts in Angular 4. Let me explain: I'm building an Angular app that will be included in a greater web application. So my app is only one among other apps inside this greater web application. In my app I need to include some HTML code representing common areas of this web application. They would be the head, header, menu and footer of the app. My app would be placed in the remaining space. Thus, I retrieve these HTML codes, turn them into SafeValue by bypassing sanitizing and include them by using the innerHTML property of some divs. After that I can see these HTMLs rendered with styling and all.
So this is the context. The problem is that the scripts in these HTMLs don't run. Even though they are not removed (you can examine the page's HTML and see the scripts there), they do not run. I need them to run as they are needed to perform some important tasks such as to fill the menu with links, animate menu expansion and god knows what else.
I have already tried to include these HTMLs in the index.html using the document DOM object to replace a div I've put in index.html as a placeholder, but I've had the same problem: it renders, but the scripts don't run. Something interesting is that if I put the script tag that is not running in the index.html directly (hardcoded, not dynamically) it works.
So, the scripts would have the following form:
<script type="text/javascript" src="//some_external_source"></script>
Only a remark: I have no control over these common HTMLs that I receive. I just receive them and have to use them for the sake of visual identity of the web application.
Sorry if it has already been answered. I have been looking for an answer for days now and I still didn't found one (I did found something similar for AngularJS though), so I posted.
This is not the way angular 2 intended such problems to be solved, if you want to divide your app into separate parts like: content, header, footer you should probably take a look at named router-outlets, or transcludion.
But if you want to do this your way, then do this:
#Component({.your metadata..})
export class SomeComponent{
constructor (private domSanitizer:DomSanitizer){
this.domSanitizer.bypassSecurityTrustScript(yourScript);
}
}
Little things like this drive me crazy!
Working with a typical Joomla website and all it's complexity.
Start with a functioning website. Edit a particular javascript file of a template to add a simple function:
function socialShare(title, url) {
alert("goop!");
}
I reference it in a link:
<a class="icon-facebook"
onclick="socialShare('blog-entries', '11-blog-article/15-oppressive-tyranny&title=Triumph Over Tyranny')"> </a>
The function is included along with 37 other external scripts in a file at the end of the page, included within the body element like this:
<script src="/bts/templates/vg_progressive/js/articleRev.js"></script>
I inserted the sociaShare function definition as the first thing in the include articleRev.js file. The list of external scripts include core functionality like bootstrap, jquery etc etc.
I can see the function in the included script file with firebug's debugger & the include line in the page source near the bottom. BUT IT DOESN'T GET EXECUTED!! If I include the exact same function within a element anywhere on the page it works just fine. For some reason the instance in the external script file is not within the scope of that page / article, tho I can see it clearly in the page source.
I can also put the function within script tags as the last thing inside the body and it is within scope and works fine. I discovered I can define the function in a different included javascript file that is found in the very same folder and it also works fine.
Like I said, things like this make me pull my hair out! What can cause this behavior? How can I narrow it down?
As per Ed Cotrel, here are 2 files which [may] be helpful, tho I don't think so. Rename articleRev.txt to .js and pageSrc.txt to pageSrc.html. As for your comments Ed, I believe I've stated the issue as clearly as I can.
The desired behavior is to see an alert box when the anchor tag is clicked. Simple. The anchor tag displays a social media icon based on one of the class definitions. The onclick attribute should call the javascript function socialShare and display an alert box containing a text message with the 2 parameters. The alert never shows up. If the socialSharing function is moved to the main.js script file located in the same folder and included the same way in the same place in the page flow it works. Is that clearer?
1) http://thecomingbitsharesrevolution.website/media/articleRev.txt
2) http://thecomingbitsharesrevolution.website/media/pageSrc.txt