html-lightweight-template-engine
Advanced tools
When you simply want to use template interpolation {{ someValue }} and
Angular like ng-container and ng-template elements (with the limited
functionality) in plain HTML without any frameworks, you can use this
library to do that.
For the usage in ESM run the following command:
npm i html-lightweight-template-engine
For the script tag usage include the following script:
<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/html-lightweight-template-engine@1.3.0/dist/html-lightweight-template-engine.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{ pageTitle }}</title>
</head>
<body>
<p>{{ greeting }}</p>
<app-container appTemplateOutlet="myIcon"></app-container>
<app-template myIcon>
<svg height="100" width="100">
<circle
cx="50"
cy="50"
r="40"
stroke="black"
stroke-width="3"
fill="yellow"
/>
</svg>
</app-template>
<script src="https://cdn.jsdelivr.net/npm/html-lightweight-template-engine@1.3.0/dist/html-lightweight-template-engine.min.js"></script>
<script>
window.onload = () => {
const templateEngine =
new htmlLightweightTemplateEngine.HtmlLightweightTemplateEngine({
pageTitle: "Mia's Blog",
greeting: 'Good evening'
})
templateEngine.renderTemplate()
}
</script>
</body>
</html>
HtmlLightweightTemplateEngine class constructor parameters:
texts {[key: string]: string}: interpolation key-valueselementAttributePrefix {string}: this value is used as a prefix to reference custom elements and attributes. Default - 'app'FAQs
Simple package for creating HTML templates.
We found that html-lightweight-template-engine demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.