VScode error screenshotI generated a new component(bmi calc) in my angular app, then downloaded a html/css template of bmi calculator functionality and pasted the html and css content of the template into the bmicalc.component.html & bmicalc.component.css file in my app, but the app is not running?
This is my error(the image of my error)
As code given in your github files , below is working piece of code. I just updated your code.
You can check the updated code here on StackBlitz(Working) -
You can check demo here
Note : =I have just updated your code to make it work only as you got
those Uncaught error of compute function. Not sure about correct
calculation so you need to look on that part.
Just few suggestions
Add code snippet when you ask this type of question
Use appropriate names to variable, Avoid use i, ii, fv, kv type of variables.
.ts file is there to write presentation logic whatever you want to apply on the form.
Your code should be well-formatted. Clean html.
Avoid using inline css, Use .css file for it.
Related
as you see, the HTML content is not colorful, and it cannot autocomplete HTML tag
There are 2 ways to do that.
1) You could manually set the syntax to "Javascript React".
For that click on "Javascript" on the bottom right of your screen:
Then simply enter "react" and select it. After that you should have autocomplete for the html parts inside your render functions.
2) You can instruct VSCode to always open .js files as "javascriptreact". For that go to your settings and copy files.associations over to your local settings. Make sure it looks something like this and save:
"files.associations": {
"*.js": "javascriptreact"
}
Note on that one: This will always set the syntax to "javascriptreact" when you open .js files and might not always be what you want. A better solution would be to generally name react files as myfile.jsx. This way vscode will automatically set the syntax to "javascriptreact".
Hope this helps.
Save the file as .jsx ie (App.jsx) instead of .js
This is because you are saving the file as .js ie App.js.JavaScript files cannot understand HTML tags.
Another alternative is you can save in (.js) but your web pack should be configured in such a way that it should transpile it into .jsx.
For doing refer this - https://github.com/facebook/create-react-app
React understand javascript xml only.
So I have a curious situation and I don't think it's going to work, but I figured I'd ask in case it is and someone knows how to. I am using a 3rd party website to create marketing funnels. You can add your own custom html and javascript, but it parses out the html in a rather unfavorable manor. Basically you specify an element on the page and it appends it as a data attribute and dynamically loads it into the DOM. Since this is happening this way, my app isn't being initialized because it's not in the DOM on page load. Is there a way to make this work? I'll explain a little deeper my configuration.
I add custom html such as:
<div data-ng-app="AppName"><div data-ng-controller="ControllerName"><div>perform controller logic here</div></div>
As you can see, this needs to be in the DOM for the app to initialize and, well work. Is there a way to initialize the app after the page has loaded dynamically? I can add my own JS files in the custom html field, but thats about as far as I can go for customization. Any help is appreciated!
Maybe you should execute angular's bootstrap function manually in your script after the required dom loaded.
var app = angular.module('appName', []);
app.controller([...]);
angular.bootstrap(document.getElementById('divId'), ['appName']);
For more information, you can see this doc https://docs.angularjs.org/api/ng/function/angular.bootstrap
I'm trying to use FSharp.Literate to produce html pages. I'm working in Xamarin using Mono 4.5. I want to turn basic *.fsx scripts into html. I am using the simple script example from the documentation for tests. The script I wish to turn into html looks like this.
(**
# First-level heading
Some more documentation using `Markdown`.
*)
(*** include: final-sample ***)
(**
## Second-level heading
With some more documentation
*)
(*** define: final-sample ***)
let helloWorld() = printfn "Hello world!"
I used the built in NuGet manager to download FSharp.Formatting. It also installed Microsoft.AspNet.Razor 2 and RazorEngine
Based on the example in the documentation, I wrote the following script to turn the above example into html. I'm using the html template from the original FSharp.Formatting on github.
#I "bin/Debug/"
#r "FSharp.Literate.dll"
#r "FSharp.Markdown.dll"
#r "FSharp.CodeFormat.dll"
open System.IO
open FSharp.Literate
let source = __SOURCE_DIRECTORY__
let baseDir = Path.Combine(source, "html/")
let file = Path.Combine(baseDir, "demo.fsx")
let output = Path.Combine(baseDir, "demo-script.html")
let template = Path.Combine(baseDir, "template.html")
Literate.ProcessScriptFile(file, template, output)
The process runs and it does produce an html file. However, the F# code does not tokenize. Instead of nicely formatted code, I get the example below. Am I missing something obvious?
Edit:
Based on Tomas' comment below, I found the problem with the .css and .js files.
The template I used had href="{root}/content/style.css" /> <script src="{root}/content/tips.js"
The {root} tag was the reason it could not find the css and js files.
Changing that to href="content/style.css" /> <script src="content/tips.js" solved the problem
I think the library actually produced the correct HTML. As you can see at the end of the file, the content that should appear in the tool tips (information about the type of helloWorld and printfn) is there.
The problem is likely that the generated HTML file does not correctly reference tips.js and style.css that defines the formatting for the HTML and script to pop-up the tool tips.
These two files should be included in the NuGet package (together with the default templates), or you can find them on the project GitHub.
I'm trying to render a .html webpage using #Renderpage() method in Webmatrix but the .html extension is not supported by the method. I guess the method only supports cshtml extensions. Is there a way I can render html pages dynamically on my site (Webmatrix). I dont want to use an iframe because I'll definitely have issues with my jquery files.
I attempted something i feel is safe yet feels unsafe. I resolved to read the html file and inject it to the DOM manually using:
Array html = null;
var mypage = Server.MapPath(page);
if(File.Exists(mypage)){
html = File.ReadAllLines(mypage);
}
After reading the file.....i injected it to the DOM
<div class="s_content s fontfix left s_content2 downdown">
#foreach (var data in html) {
<text>#Html.Raw(data)</text>
}
</div>
All this runs on compilation time before the page is created for rendering.....I attempted some security measures by attempting to inject server-side C# code in the HTML file but was useless. Makes me feel safe atleast. Is this risky? What is the possible threat to this alternative. i wish i can still have an alternative proper solution from the house. Thanks though.
Assuming #Renderpage() doesn't support HTML files, why don't you try Jquery.load or Ajax. There are lots of tutorials based on dynamic loading of html content.
I do something similar but I don't use #Renderpage or an html file. Instead I am using the "onclick" event and a javascript function which opens a cshtml file. You just put this and the java script function in your main cshtml file in the hmtl section. It will open a file in the current directory called my_window.cshtml when clicked
<a onclick=openWin("my_window",700,850);>Open when clicked</a>
<script type="text/javascript">
function openWin(url, width, height)
{
myWindow=window.open(url,'_blank','width='+width+',height='+height);
myWindow.focus();
}
Hope this helps!
I am trying to open HTML file from the local URI which I use as XML Editor, to edit xml data that come from Silverlight application, then close browser window and return back edited xml data to the Silverlight application.
I tried to use HtmlPage.Window.Navigate but I don't quit like it.
I have tried using a method from: http://weblogs.asp.net/dwahlin/archive/2010/05/10/integrating-html-into-silverlight-applications.aspx
but instanly got an exception "failed to invoke ShowJobPlanIFrame"
Is there any way to handle this task?
"Out of browser" mode doesn't fit.
Thanks.
===========================================================================
Update:
It worked out using IFrame overlay.
Button click invokes the following code in C#:
var scriptObject = (ScriptObject)HtmlPage.Window.GetProperty("ShowJobPlanIFrame");
scriptObject.InvokeSelf(url);
Where "ShowJobPlanIFrame" is as defined at:
http://weblogs.asp.net/dwahlin/archive/2010/05/10/integrating-html-into-silverlight-applications.aspx
This allowed me to pass data into XML editor and then get it back.
An error with JavaScript function invocation I told above, was my fault in JavaScript code itself.
A very similar scenario: https://stackoverflow.com/a/7919065/384316
Try using an iframe overlay, then you can load any HTML-like content.
There is an excellent explanation of how to do this here:
http://www.wintellect.com/cs/blogs/jlikness/archive/2010/09/19/hosting-html-in-silverlight-not-out-of-browser.aspx
It worked out using IFrame overlay.
Button click invokes the following code in C#:
var scriptObject = (ScriptObject)HtmlPage.Window.GetProperty("ShowJobPlanIFrame");
scriptObject.InvokeSelf(url);
Where "ShowJobPlanIFrame" is as defined at:
http://weblogs.asp.net/dwahlin/archive/2010/05/10/integrating-html-into-silverlight-applications.aspx
This allowed me to pass data into XML editor and then get it back.
An error with JavaScript function invocation I told above, was my fault in JavaScript code itself.
Did you try NavigationFramework of Silverlight? It's capability may support your needs in a more simple way than using multiple browser pages.