Import HTML Snippet

The <ch5-import-htmlsnippet> component is used to load HTML snippets during run time. Users can modularize HTML files into pages or selections using this component, and the snippet is inserted into the DOM at the respective location.

NOTE: The snippets should not contain <html>, <head>, or <body> tags.

An afterload event occurs when an HTML snippet has been loaded and inserted into the DOM. Afterload is most often used within the <ch5-import-htmlsnippet> component to execute a script once an HTML snippet has loaded all content completely, including images, script files, CSS files, and so forth.

For interactive examples using the <ch5-import-htmlsnippet> component and CSS classes, refer to the Showcase Application.

Features

The <ch5-import-htmlsnippet> attributes provide the following features:

  • Sets the HTML file path
  • Directs a component to be visible or not visible via control system state

Design Considerations

To import the snippet in an Angular template, the source directory must be added in the angular.json file as follows:

Copy 
\assets\": [
    ",\"src\/assets\/htmlsnippets\" ",
]"