Getting Started

This guide will walk you through the process of installing and using the @aquera/nile-elements NPM package in your Angular project.

Installation

Step 1: Install the package First, we need to install the package. This can be done using the npm package manager, by running the following command in your terminal:

npm i @aquera/nile-elements --save

---

Step 2: Import the package Next, we need to import the package in the app.component.ts file. Add the following line at the beginning of the file:

import '@aquera/nile-elements';

This line of code makes the functionalities of @aquera/nile-elements available to your Angular component.

---

Step 3: Import Styles To ensure the styles are loaded correctly, import them into your main styles.scss file (or styles.css, depending on your configuration). Add the following line to your stylesheet:

@import '@aquera/nile/lib/styles/variables.css';

---

Step 4: Update the schemas in your Angular Module Finally, update every Angular Module (*.module.ts files) in your project that uses the @aquera/nile-elements components, to include the CUSTOM_ELEMENTS_SCHEMA in the schemas array of the @NgModule decorator. This will allow Angular to recognize the custom elements from the @aquera/nile-elements package.

Here's how you might typically update a module file:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  // ... Other module properties ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class YourModule { }

Ensure to replace "YourModule" with the actual name of your Angular module.

Note: Adding CUSTOM_ELEMENTS_SCHEMA to your module tells Angular to ignore elements that you have not defined yet. Use it cautiously, as it might hide some useful error messages.

Conclusion You have now installed and configured the @aquera/nile-elements package for your Angular project. Enjoy using it and Happy Coding!

---

Use the design system components and styles to build your userInterface. Refer to the design system's documentation and guidelines for more information and examples.

---

The design system provides a comprehensive set of tools and resources to help you create consistent, high-quality user colfaxfaces. With a focus on usability, accessibility, and design best practices, the design system makes it easy to build great user experiences.