Is there a way to make part of markup ignored during Angular2 compilation? The issue is i have additional library that uses jQuery and <template> tags and because of Angular the <template> html tags are not present in DOM when the library tries to reach it with $('template') selector.
A workaround is to inject needed HTML markup after containing container init. So i've made simple $('container')[0].innerHtml = 'markup with <template></template>' in one of my angular2 components in ngOnInit method.
Related
What exactly is HTML Modules? I understand that it might allow a developer to create HTML as a module like how ES6 Modules are to JavaScript.
But, are these modules basically templates like Mustache, Handlebars and Pug? Or is it like a wrapper around a similar templating system that will allow us to import an HTML file easily into another HTML file?
Will it pave a way to avoid using templating libraries utilizing the Web Components?
[Update]
Here is the link to where I found this - https://github.com/w3c/webcomponents/blob/gh-pages/proposals/html-modules-explainer.md
HTML Modules are the new proposal for importing HTML files into a document.
HTML import supported a similar feature and permitted to import an HTML file (eventually containing itself JS and CSS) but it has been deprecated and JS module import has partially substituted that feature.
The point of HTML imports are to complete that part and make possible to import HTML files again instead of JavaScript files only.
Today you just can't import files that contain HTML (again, you could do that when meta rel=import href=myfile.html> which is not supported anymore).
If you want to do that, you have to write HTML in JavaScript string prior to process it.
The proposal also introduces notions such as import.meta.document that refer to the internal document to be imported.
Note that is it a proposal, even though it could be inserted into the spec, it should then be implemented by browsers, and finally adopted by the community in order to remain and become a stable feature.
Currently the closest you can use is the Lego Web-Component library that allows to include HTML as a module and extends native HTML functionality:
<template>
<p>Hello World!</p>
</template>
Used as:
<script src="./dist/index.js" type="module"></script>
<hello-world />
Example taken from https://github.com/polight/lego#hello-world
Let's see how the spec is going to evolve for HTML Modules in the future…
How to stop attribute to change case in html
let test1 = document.createElement('div');
test1.innerHTML = '<div [ngClass]>Test</div>';
console.log('--------dynamic', test1.innerHTML);
Here, [ngClass] change to ngclass.
This code
test1.innerHTML = '<div [ngClass]>Test</div>';
is entirely pointless. Angular won't do anything with [ngClass].
Angular processes Angular specific markup only when it compiles a components template, but not when it is added to the DOM.
If you want to add Angular specific markup at runtime, you need to dynamically create and compile a component.
For more details see How can I use/create dynamic template to compile dynamic Component with Angular 2.0?
HTML attribute names are case-insensitive.
There is no way to stop browsers from normalising them when you give them some HTML to parse into a DOM and then serialise that DOM back to HTML.
If you want to process Angular's template language and maintain case sensitivity, then don't do so using tools that are designed to deal with HTML.
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.
Is there a way to combine Razor (CSHTML) with Polymer elements? Or is it mandatory that a Polymer element should be HTML to be imported?
Thanks in advance!
You should be able to combine any template engine by either:
Compiling custom templates to produce HTML output
Using Polymer's built-in event callbacks/creating custom elements to dynamically compile custom template code to HTML at runtime with a client-side compiler
So, generally speaking, using Polymer shouldn't prevent you in finding a way to use your template engine as you have previously with your other client-side applications.
Can you create reusable components in html? Let's say I want to encapsulate some css / html and js into a tidy reusable component. How do web developers do this? I'm coming from the Flex, C# side of the planet.
2017 update
This question is 7 years old and a lot has changed since. Web components and are now implemented or can be used with polyfills in every major browser. Which means you can use Polymer by Google or X-Tag supported by Microsoft made exactly for this.
Sample approach using Polymer:
custom tag declaration in custom-tag.html:
<dom-module id="custom-tag">
<template>
<style>
h1 {
color: red;
}
</style>
<div class="text-holder">
<h1>[[name]]</h1>
<p>[[description]]</p>
</div>
</template>
</dom-module>
<script>
Polymer({
is: "custom-tag",
properties: {
name: String,
description: String
}
});
</script>
how to use custom tag in your page:
include tag in head:
<link rel="import" href="path/to/custom-tag.html"/>
and then:
<custom-tag
name="Lorem"
description="Lorem ipsum dolor sit amet.">
</custom-tag>
You'll need a simple http server because of the html import. Encapsulation you talked about is backed by Shadow DOM - javascript and css packed inside of custom tag won't "bleed out" and change anything outside of the element and vice versa (unless you force it). Polymer comes out with quite large asset of elements, you can find it here.
Everything about using elements and creating your own is covered here.
You can use Server-Side Includes to directly import pieces of HTML (e.g. a header), but most frameworks these days tend to approach things at a higher level, e.g. Apache Taglibs or Django templates.
It depends on your environment. HTML is (in a simple environ) often included with a server-side include (the syntax of which will depend on your server).
That way you could have:
<!-- #include header.html -->
<h1>Blog Page</h1>
<p>content...</p>
<!-- #include footer.html -->
Javascript is included externally so can be called from anywhere. If you're in a "simple" environment (no server-side code, CMS, etc) you might call module.js which in turn loads specific CSS styles and injects into the DOM the HTML you require.
If you're using a CMS of any sort, they will often have a module idea or plug-ins that wrap this up for you. What are you working with here?
Generally you can put snippets into a separate file that you can add in with a server side include:
<!--#include FILE="you_snippet.html" -->
If you have the option, you might want to have a look at some template languages like Apache Velocity. In Velocity, not only can you include different files, you can define macros that will generate the html for you.
You can try out the templating engines, like google closure template tools.
What you do here is basically create html layouts in a special file called soy files for which you are going to feed the data passed in as parameters and these data are going to be interpreted dynamically with javascript/java. Check out their tutorials, its pretty good. Closures are widely used in Gmail, Youtube and mostly all of Google's products.