angular-html-parser
Advanced tools
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.
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);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 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.
An HTML parser extracted from Angular with some modifications
# using npm
npm install --save angular-html-parser
# using yarn
yarn add angular-html-parser
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>
`);
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,
}
CDATA nodeDocType nodenameSpan field to Element and AttributeComment#sourceSpan<!...>, <?...>)type property to nodes# build
yarn run build
# test
yarn run test
MIT © Ika
18.0.1 (2024-05-29)
| Commit | Type | Description | | -- | -- | -- | | 419ffa2026 | fix | optimize track function that only passes $index (#55872) |
| Commit | Type | Description | | -- | -- | -- | | 4c7efc005a | fix | interpolatedSignalNotInvoked diagnostic for class, style, attribute and animation bindings (#55969) |
| Commit | Type | Description | | -- | -- | -- | | 4e6ea0e19c | fix | handle elements with local refs in event replay serialization logic (#56076) | | d73a0175cb | fix | link errors to ADEV (#55554) | | 985a215b10 | fix | typo in zoneless warning (#55974) |
| Commit | Type | Description | | -- | -- | -- | | ba85d08158 | fix | handle empty ngSwitchCase (#56105) |
<!-- CHANGELOG SPLIT MARKER --><a name="17.3.10"></a>
FAQs
A HTML parser extracted from Angular with some modifications
The npm package angular-html-parser receives a total of 108,236 weekly downloads. As such, angular-html-parser popularity was classified as popular.
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 4 open source maintainers 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
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.