Skip to content

921466: Need to add UG topic for UI kit #672

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: hotfix/hotfix-v27.1.48
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions ej2-angular-toc.html
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,13 @@
<li><a href="/ej2-angular/visual-studio-integration/upgrade-project">Upgrade Project</a></li>
</ul>
</li>
<li>
UI Kit
<ul>
<li><a href="/ej2-angular/ui-kit/overview">Overview</a></li>
<li><a href="/ej2-angular/ui-kit/getting-started">Getting Started</a></li>
</ul>
</li>
<li>
3D Chart
<ul>
Expand Down
66 changes: 66 additions & 0 deletions ej2-angular/ui-kit/getting-started.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
# Getting Started with Essential UI Kit for Angular

Follow the steps below to get started with Essential UI Kit for Angular. You can begin in one of two ways:

- **Download the App from GitHub**: Get the full source code and run the app locally to explore the blocks.
- **View the Online Demo**: Alternatively, you can try out the blocks directly through the online demo to see them in action without needing to download anything.

## Get Started by Downloading the App from GitHub

### Step 1: Download and Open the App in Visual Studio Code

Download the app from the GitHub [link](https://github.com/syncfusion/essential-ui-kit-for-angular), and then open the project folder in Visual Studio Code to start working with it.

![Launching the downloaded app](images/1.png)

### Step 2: Open a New Terminal

In Visual Studio Code, go to the **Terminal** menu and select **New Terminal** to open the integrated terminal.

![Opening a new terminal](images/2.png)

### Step 3: Install Dependencies and Run the App
Run the following commands one after the other in the terminal:

1. **Install project dependencies**
Run the command below to install all necessary packages related to the Angular project, the sample browser, and the Syncfusion Angular components.

![Installing the required dependencies](images/3.png)

This will download and install all the dependencies listed in the **package.json** file.

2. **Serve the App Locally**
After the dependencies are installed, you can run the app locally by starting the Angular local development server.

Run the following command:

![Running the Angular development server](images/4.png)

This command will start the local development server, and you'll see an output in the terminal indicating the application is running. Typically, it will display a local host URL like this:

![Local development server running](images/5.png)

To view the app in your browser, simply **Ctrl + Click** (or **Cmd + Click** on macOS) on the local host URL displayed in the terminal. This will open the app in your default browser, allowing you to interact with the blocks.

### Step 4: License Key Requirement

The blocks include several Syncfusion Angular components that require an active license key for proper display and usage. To activate the license, refer to the topics below:

#### How to Obtain the License Key
To obtain the license key, visit the following page: [Syncfusion License](https://ej2.syncfusion.com/angular/documentation/licensing/overview).

#### How to Register the License Key in the App
Once you have your license key, add it to the `src/main.ts` file for seamless browsing and usage of the blocks.

```typescript
import { registerLicense } from '@syncfusion/ej2-base';

registerLicense('Your-License-Key');
```
Replace `'Your-License-Key'` with the actual license key you received from Syncfusion.

By adding the license key, you ensure that the blocks are fully functional and free from licensing issues.

## Get Started by Viewing the Online Demo

If you prefer a quick demo instead of downloading the app, you can explore the blocks directly through the online demo. Simply visit the official [Essential UI Kit for Angular](#) website to interact with the blocks.
Binary file added ej2-angular/ui-kit/images/1.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ej2-angular/ui-kit/images/2.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ej2-angular/ui-kit/images/3.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ej2-angular/ui-kit/images/4.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ej2-angular/ui-kit/images/5.PNG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 49 additions & 0 deletions ej2-angular/ui-kit/overview.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
# Overview: Essential UI Kit for Angular

The Essential UI Kit for Angular comprises over 120 responsive, ready-to-use, easy-to-implement, and customizable blocks designed to help you quickly build web applications. These blocks are developed using HTML, CSS, TypeScript, and Syncfusion Angular components, delivering robust functionality and ease of use. They are compatible with both Tailwind and Bootstrap 5.3 CSS frameworks, supporting light and dark modes to offer flexibility and seamless integration across different user preferences. The UI kit includes blocks for the following categories:

| **Category** | **Blocks** |
|-------------------|----------------------------------------------------------|
| **Authentication**| Sign In |
| | Sign Up |
| | Mobile - Sign In |
| | OTP - Sign In |
| | Forgot Password |
| | Sign Out |
| | Unlock Session |
| **Layouts** | Navigation Bar |
| | Sidebar |
| | Floating Menu |
| | Search |
| | Grid |
| | List View |
| | Tile View |
| | Calendar |
| | Cards |
| | Pagination |
| | Footer |
| **E-commerce** | Pricing Card |
| | Plan and Price Comparison |
| | Checkout Page |
| | Product Return Page |
| **Communication** | Email |
| | Chat |

> These provide pre-designed blocks for the quick implementation of web applications. However, customization and the integration of business logic must be handled on your end to meet your specific requirements.

## Supported Angular Versions
The blocks designed and showcased are built using Angular 18, but you can use other versions of Angular as well, since they are primarily developed with HTML, CSS, and TypeScript to facilitate building your web applications. Additionally, for using Syncfusion Angular components, the compatible Angular and Syncfusion versions are outlined in this [link](https://ej2.syncfusion.com/angular/documentation/system-requirement#angular-supported-versions) for your reference.

## Supported Browsers

- Google Chrome
- Microsoft Edge
- Safari
- Mozilla Firefox

## Supported CSS Frameworks

- Tailwind CSS
- Bootstrap 5.3

Both **Tailwind CSS** and **Bootstrap 5.3** support **Light** and **Dark** modes, allowing you to seamlessly adapt the blocks to your web applications based on user preferences or system settings. This flexibility ensures a consistent and optimal user experience across different environments and devices.