Security News
NVD Quietly Sweeps 100K+ CVEs Into a “Deferred” Black Hole
NVD now marks all pre-2018 CVEs as "Deferred," signaling it will no longer enrich older vulnerabilities, further eroding trust in its data.
By Sarah Gooding - Apr 04, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
angular-html-parser
Advanced tools
What is angular-html-parser?
The angular-html-parser npm package is a tool for parsing Angular HTML templates. It allows developers to parse, traverse, and manipulate Angular HTML templates programmatically.
What are angular-html-parser's main functionalities?
Parsing HTML
This feature allows you to parse an Angular HTML template into an Abstract Syntax Tree (AST). The code sample demonstrates how to parse a simple HTML string containing Angular template syntax.
const { parse } = require('angular-html-parser');
const html = '<div>{{ title }}</div>';
const result = parse(html);
console.log(result);Traversing the AST
This feature allows you to traverse the AST generated from parsing an Angular HTML template. The code sample demonstrates how to visit different types of nodes in the AST and log their details.
const { parse } = require('angular-html-parser');
const { visitAll } = require('angular-html-parser/lib/compiler/src/ml_parser/ast');
const html = '<div>{{ title }}</div>';
const result = parse(html);
visitAll({
visitElement: (element) => console.log('Element:', element.name),
visitText: (text) => console.log('Text:', text.value),
visitBoundText: (boundText) => console.log('BoundText:', boundText.value),
}, result.rootNodes);Manipulating the AST
This feature allows you to manipulate the AST generated from parsing an Angular HTML template. The code sample demonstrates how to change the tag name of an element from 'div' to 'span'.
const { parse } = require('angular-html-parser');
const { visitAll } = require('angular-html-parser/lib/compiler/src/ml_parser/ast');
const html = '<div>{{ title }}</div>';
const result = parse(html);
visitAll({
visitElement: (element) => {
if (element.name === 'div') {
element.name = 'span';
}
}
}, result.rootNodes);
console.log(result);Other packages similar to angular-html-parser
htmlparser2
htmlparser2 is a fast and forgiving HTML/XML parser. It is not specific to Angular templates but can be used to parse any HTML or XML. Compared to angular-html-parser, it is more general-purpose and does not provide specific support for Angular template syntax.
parse5
parse5 is a versatile and widely-used HTML parser that fully conforms to the HTML5 specification. Like htmlparser2, it is not specific to Angular templates but can handle any HTML. It is more robust and standards-compliant compared to angular-html-parser.
angular-html-parser
An HTML parser extracted from Angular with some modifications
Diff from upstream
[!TIP] Try sync
mainanddevbranch with upstream first
Install
# using npm
npm install --save angular-html-parser
# using yarn
yarn add angular-html-parser
Usage
import { parse } from "angular-html-parser";
const { rootNodes, errors } = parse(`
<!DOCTYPE html>
<html>
<head>
<title>Hello world!</title>
</head>
<body>
<div>Hello world!</div>
</body>
</html>
`);
API
declare function parse(input: string, options?: Options): ng.ParseTreeResult;
interface Options {
/**
* any element can self close
*
* defaults to false
*/
canSelfClose?: boolean;
/**
* support [`htm`](https://github.com/developit/htm) component closing tags (`<//>`)
*
* defaults to false
*/
allowHtmComponentClosingTags?: boolean;
/**
* do not lowercase tag names before querying their tag definitions
*
* defaults to false
*/
isTagNameCaseSensitive?: boolean;
/**
* customize tag content type
*
* defaults to the content type defined in the HTML spec
*/
getTagContentType?: (
tagName: string,
prefix: string,
hasParent: boolean,
attrs: Array<{ prefix: string; name: string; value?: string | undefined }>,
) => void | ng.TagContentType;
/**
* tokenize angular control flow block syntax
*/
tokenizeAngularBlocks?: boolean;
/**
* tokenize angular let declaration syntax
*/
tokenizeAngularLetDeclaration?: boolean;
}
Modifications
- add
CDATAnode - add
DocTypenode - add
nameSpanfield toElementandAttribute - allow case-insensitive closing tags for non-foreign elements
- fix
Comment#sourceSpan - support bogus comments (
<!...>,<?...>) support full named entities(fixed upstream)- add
typeproperty to nodes - value span for attributes includes quotes
Development
# build
yarn run build
# test
yarn run test
License
MIT © Ika
18.1.0 (2024-07-10)
common
| Commit | Type | Description | | -- | -- | -- | | f25653e231 | fix | typo in NgOptimizedImage warning (#56756) | | 9b35726e42 | fix | typo in warning for NgOptimizedDirective (#56817) |
compiler
| Commit | Type | Description | | -- | -- | -- | | fd6cd0422d | feat | Add extended diagnostic to warn when there are uncalled functions in event bindings (#56295) | | 341a116d61 | fix | allow more characters in let declaration name (#56764) | | 2a1291e942 | fix | give precedence to local let declarations over parent ones (#56752) |
compiler-cli
| Commit | Type | Description | | -- | -- | -- | | 66e582551e | fix | avoid duplicate diagnostics for let declarations read before definition (#56843) | | 4d18c5bfd5 | fix | flag all conflicts between let declarations and local symbols (#56752) | | 9e21582456 | fix | Show template syntax errors in local compilation modified (#55855) | | 5996502921 | fix | type check let declarations nested inside nodes (#56752) | | cdebf751e4 | fix | used before declared diagnostic not firing for control flow blocks (#56843) |
core
| Commit | Type | Description |
| -- | -- | -- |
| ea3c802056 | feat | Add a schematic to migrate afterRender phase flag (#55648) |
| 5df3e78c99 | feat | add equality function to rxjs-interop toSignal (#56447) |
| 0a48d584f2 | feat | add support for let syntax (#56715) |
| 352e0782ec | feat | expose signal input metadata in ComponentMirror (#56402) |
| a655e46447 | feat | Redesign the afterRender & afterNextRender phases API (#55648) |
| e5a6f91722 | feat | support TypeScript 5.5 (#56096) |
| 38effcc63e | fix | Add back phase flag option as a deprecated API (#55648) |
| 86bcfd3e49 | fix | improve docs on afterRender hooks (#56522) |
| b2445a0953 | fix | link errors to ADEV (#55554) (#56038) |
| 03a2acd2a3 | fix | properly remove imports in the afterRender phase migration (#56524) |
| 4d87b9e899 | fix | rename the equality function option in toSignal (#56769) (#56922) |
| 8bd4c074af | fix | toSignal equal option should be passed to inner computed (#56903) |
forms
| Commit | Type | Description |
| -- | -- | -- |
| 00bde8b1c2 | fix | Make NgControlStatus host bindings OnPush compatible (#55720) |
http
| Commit | Type | Description |
| -- | -- | -- |
| cc21989132 | fix | Make Content-Type header case insensitive (#56541) |
language-service
| Commit | Type | Description | | -- | -- | -- | | b400e2e4d4 | feat | autocompletion for the component not imported (#55595) | | 67b2c336bc | fix | import the default exported component correctly (#56432) |
router
| Commit | Type | Description |
| -- | -- | -- |
| a13f5da773 | feat | Allow UrlTree as an input to routerLink (#56265) |
| 1d3a7529b4 | feat | Set a different browser URL from the one for route matching (#53318) |
<a name="18.0.7"></a>
FAQs
A HTML parser extracted from Angular with some modifications
We found that angular-html-parser demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Package last updated on 12 Mar 2025
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.
Related posts
Research
Security News
Lazarus Expands Malicious npm Campaign: 11 New Packages Add Malware Loaders and Bitbucket Payloads
Lazarus-linked threat actors expand their npm malware campaign with new RAT loaders, hex obfuscation, and over 5,600 downloads across 11 packages.
By Kirill Boychenko - Apr 04, 2025
Security News
Safari 18.4 Ships 3 New JavaScript Features from the TC39 Pipeline
Safari 18.4 adds support for Iterator Helpers and two other TC39 JavaScript features, bringing full cross-browser coverage to key parts of the ECMAScript spec.
By Sarah Gooding - Apr 03, 2025