so I am using the standard template from AngularDart that comes from stagehand web-angular-simple.
Now, if I have something hardcoded in index.html and try to manipulate it from main.dart using querySelector, everything works fine.
But how can I use querySelector to manipulate the AppComponent that was loaded into the index.html file in the template?
So basically my question is: how to manipulate dynamically loaded elements in dart.
(p.s. I just started out in AngularDart...)
thanks in advance
You can inject ElementRef and through it access nativeElement - this will be the DOM node of you component.
The question is why do you need? Almost always there is a way to do what you need through interacting with angular templates.
Related
I want to render a HTML file into a component. This HTML has some libraries connected to it which show certain content. How can this be done? I tried DomSanitizer but it doesn't work.
Read the file using typescript/javascript.
Depending on your HTML, you can use [innerHtml] attribute. See
Code:
<div [innerHtml]="yourHTML"></div>
Note: Be aware of XSS vulnerability.
I have a .html which needs data inserted from svelte using ${} syntax. I haven't found any way to include that html without resorting to inserting as a string into the svelte component.
There is not much Svelte can do here, for Svelte to do it's thing it requires a compile step.
If it's possible to rename the .html file to a .svelve file and compile it like the other components, that would be preferable.
But when the html comes from an api that's not possible.
An option is to use Handlebars or another template engine to insert data from Svelte into the html. (but that resorts to inserting it as a string, see REPL)
A last option I can think of is to place a <div bind:this={el} /> and use DOM api's to create and manage the html (not recommended)
I am developing a web application using Microsoft .NET MVC. As the default CSHTML views are not always responsive enough, there are some pages implemented in Angular. The rendered CSHTML page pretty much only includes a directive to invoke an Angular component, and Angular takes care of the rest.
Now, one of the Angular pages looks like its HTML template is going to get quite long. We're talking about almost a thousand lines of HTML code here. That's just the HTML template, not the Angular component handling it.
So I thought it would be better for development and maintenance to split the template into several HTML files, where the main HTML file would include other HTML files. But this doesn't seem to be possible.
Googling for "include HTML file in another in Angular" returned results about using the <ng-include> directive, but unfortunately that seems to only have been supported in the original AngularJS, not in the new Angular. At least the examples I used didn't work.
Is this somehow possible in Angular, or do I have to actually make the included HTML files into separate components?
const template = `
<div> Your template here! </div>
`;
export default template;
import html from 'template.html'
Then
declare module '*.html' {
const value: string;
export default value
}
And
<div [innerHTML]="theHtmlString"></div>
From my understanding the browser rendering process is essentially happening in the following steps:
HTML is parsed into DOM tree
DOM tree is converted to a render tree
Layout
Paint
Where does Angular JS come in the picture here? For example if I have an expression like
<div>{{test}}</div>
or
<div ng-include="..."></div>
Is it right to think that Angular does the interpolation or HTML injection, and then the browser takes the resulting HTML code, and goes through steps 1-4?
Angular JS documentation says:
When Angular starts your application, it parses and processes this
new markup from the template using the compiler. The loaded,
transformed and rendered DOM is basically the view
Here a template means:
HTML code that contains Angular specific attributes.
For more information on how AngularJs works and what it can do, please read the documentation provided:
https://docs.angularjs.org/guide/concepts
There is an in-depth tutorial which provide more information on it.
I hope this could help you get started with it :)
For instance, a user logs in (dynamically, no page refresh) and only then do I want to load up my polymer elements.
You can load polymer elements dynamicaly using Polymer.import(['myElement.html']) function. More on: Polymer helper methods
also you could use the app router element that allows you to use the hash in the URL lo just import the number of elements you are going to use, or even it can load all of them and just charge if the hash is the correct one
look at https://github.com/erikringsmuth/app-router