Is it possible by using angular 8 with typescript to get value from input by know only id of this element?
You can simple add this code in your .ts file inside the block where you want value of input from id
(<HTMLInputElement>document.getElementById("unitPrice")).value;
your best bet would be
#ViewChild("dataBlock") block: ElementRef;
clearContent() {
this.block.nativeElement.innerHTML = "";
}
as the angular way because in ng app it is never meant to be work in browser
you can run Angular in a web worker which doesn't have direct access
to the DOM
but if you are firm on id method then you can definitely use classic javascript methods document.getElementById
Related
Is is it possible to return JSON (www.myapp.com/json) without any Angular additions on Angular page, like backend endpoint would return?
E.g this <pre>{{jsonToDisplay | json}}</pre> doesn't work, because when you look browser source you can see also Angular generated code.
You can add a json pipeline to transform data directly in the html as yo are doing, rememeber to import CommonModule 1.
If it does't work, you could implement a custom pipeline.
I'm developing a web application using Angular 6.
I have a little problem: with this simple code inside in one of my services:
method() {
document.body.insertAdjacentHTML('beforeend', '<h1>Hello</h1>');
}
I can dynamically display html code every time I run.
This happens, however, only because <h1> is a native HTML tag.
How can I do the same thing with an Angular component associated with an HTMML template? For example, <myComponent></myComponent>,
it does not work this way ...
method() {
document.body.insertAdjacentHTML('beforeend','<myComponent>/myComponent>');
}
Can you help me with a solution that uses a few lines of code?
I have to use this method in a service. Thanks.
In xhtml Primefaces page, I search to get a widget's reference that represents a specific DialogFrameWork widget.
The problem is that this widget is generated dynamically using some Java code on J2EE JSF server and is not defined directly in xhtml file.
The only solution I see is to inspect the DOM after DialogFrameWork has been loaded.
Primefaces seems to generate a element in DOM.
Using JQuery, I can find this element.
In this element there exist 2 custom attributes that are
data-widgetvar
data-pfdlgcid
What are these attributes ?
Can I use them to get PrimeFaces widget ?
How ?
data-widgetvar attribute of DialogFrameWork widget represent a reference and can be used to get widget variable.
example:
jQuery(".ui-dialog.ui-overlay-visible",window.parent.document)
.each
(function(nIndex)
{
var sWidgetName = $(this).attr('data-widgetvar');
var wgDialog = window.parent.PF(sWidgetName);
wgDialog.hide();
});
So I have a website set up and I wish to dynamically load other .html files into a div. Each .html file contains some content but 1 .html file contains its own angularjs directives.
I was using ng-bind-html along with $scope.content = $sce.trustAsHtml(data); but I have discovered that this prints out the html raw (does not process any angular directives).
I've tried to use the various solutions on stack overflow but none have worked for me.
Website: http://algorithmictrading.azurewebsites.net/
App.js: http://algorithmictrading.azurewebsites.net/js/app.js
Example of .html pages being loaded:
http://algorithmictrading.azurewebsites.net/includes/home.html
http://algorithmictrading.azurewebsites.net/includes/about_us.html
.html page that contains angular directives:
http://algorithmictrading.azurewebsites.net/includes/download.html
As you can see, if you navigate to the website and click on the 'download' tab, the content is loaded but the angular in the drop down menu is not handled. The test button I added should also produce an alert box.
Right now, the code is based off this thread:
call function inside $sce.trustAsHtml() string in Angular js
Thanks!
I found that angular was stripping out the directives from html strings if I didn't pass them through the $sce.trustAsHtml method before passing them into the template:
$sce.trustAsHtml('<a href="/some-link" directive-example>link to add</a>');
This combined with a watch/compile on the element's content you're inserting html into seems to do the trick:
scope.$watch(getStringValue, function() {
$compile(element, null, -9999)(scope);
});
Take a look at this example: http://plnkr.co/edit/VyZmQVnRqfIkdrYgBA1R?p=preview.
Had the same problem this week and the best way I found to make it works was creating a custom directive called "BindComponent".
Change the ng-bind-html directive to a custom directive, and inside the link method you put this:
element.html(markupModel);
$compile(element.contents())(scope);
The markupModel can be a string with html code or you can use $templateCache($templateCache docs) to get the code from a .html file.
I see examples that show directives rendering an HTML file in lieu of the directive. Or controllers rendering an HTML snippet as a scope variable, written directly between single quotation marks - like
$scope.items = '<ol><li>an item></li> <li>another item</li></ol>'
(this does not work well for me because I have other single quotation marks in the middle of my HTML snippet that seem to stop the HTML snippet from rendering properly.)
Here is something I tried that did not work:
Controller code:
innerapp.controller('ResourcesController', function($scope, $sce, $http) {
$scope.template = 'employeelists.html';
});
HTML code:
<div ng-controller="ResourcesController">
<div ng-bind-html-unsafe="template"></div>
</div>
I have 'employeelists.html' in my app/assets/templates folder. I am using AngularJS with Rails, and this setup already lets me call the file like this:
div ng-include="'employeelists.html'"></div>
But I want the controller, instead of ng-include, to render the HTML file.
Basically, I am working on functionality such that if I select an item on the HTML page (under this AngularJS controller), a function in the controller gets called that updates the scope variable (that's linked to a template file) with another template file.
First, please keep in mind DOM manipulation should allways be left to directives, not controllers. Second, I would highly recommend you looked into views using ui-router. This could easily accomplish what you want to do. Here is an example of simple view changing:
https://angular-ui.github.io/ui-router/sample/#/
Also, someone already found a way to input code to the ng-include directive so you could update it:
angular - update directive template on click
However, do read the answer above how he also recommends you use $stateProvider (ui-routers state configurator) since it would be a much easier approach to what you are trying to do.
I hope this helps