Skip to main content

Web components configuration

Overview​

These elements are Angular components packaged as custom elements, which can be used in any web application.

Why use Elements?​

  • Reusability: Angular elements can be reused across different projects and frameworks.
  • Interoperability: They can be used in non-Angular projects, making them versatile.
  • Encapsulation: Custom elements encapsulate their styles and behavior, reducing the risk of conflicts.
info

See the Creating Elements Components guide to learn how to create Angular elements.

How to use Elements​

info

To exemplify the configuration, we are using the CashFlowComponent component as an example.

Step 1: Include the Element Package in Your Project​

To use the element, you need to include the element package in your project. You can do this by adding the script tag in your HTML.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cash Flow Application</title>
  <script src="https://cdn.yourdomain.com/ui-cash-flow/3.0.1/main.js"></script>
</head>
<body>
 <h1>Title</h1>
</body>
</html>

Step 2: Use the Element in Your Project​

To use the element, you need to add the element tag in your HTML.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cash Flow Application</title>
  <script src="dist/cash-flow-package-patch/main.js"></script>
</head>
<body>
  <h1>Cash Flow Application</h1>
  <cash-flow></cash-flow>
</body>
</html>

Conclusion​

By following these steps, you can configure and use @Celero elements in your project. This allows you to create reusable components that can be used in any web application.