|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Getting Started with the Angular UI Kit Component | Syncfusion |
| 4 | +description: Checkout and learn about Getting started with Angular UI Kit component of Syncfusion Essential JS 2 and more details. |
| 5 | +platform: ej2-angular |
| 6 | +control: Getting started |
| 7 | +documentation: ug |
| 8 | +domainurl: ##DomainURL## |
| 9 | +--- |
| 10 | + |
| 11 | +# Getting Started with Essential UI Kit for Angular |
| 12 | + |
| 13 | +Follow the steps below to get started with Essential UI Kit for Angular. You can begin in one of two ways: |
| 14 | + |
| 15 | +- **Download the App from GitHub**: Get the full source code and run the app locally to explore the blocks. |
| 16 | +- **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. |
| 17 | + |
| 18 | +## Get Started by Downloading the App from GitHub |
| 19 | + |
| 20 | +### Step 1: Download and Open the App in Visual Studio Code |
| 21 | + |
| 22 | +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. |
| 23 | + |
| 24 | + |
| 25 | + |
| 26 | +### Step 2: Open a New Terminal |
| 27 | + |
| 28 | +In Visual Studio Code, go to the **Terminal** menu and select **New Terminal** to open the integrated terminal. |
| 29 | + |
| 30 | + |
| 31 | + |
| 32 | +### Step 3: Install Dependencies and Run the App |
| 33 | +Run the following commands one after the other in the terminal: |
| 34 | + |
| 35 | +1. **Install project dependencies** |
| 36 | + Run the command below to install all necessary packages related to the Angular project, the sample browser, and the Syncfusion Angular components. |
| 37 | + |
| 38 | +  |
| 39 | + |
| 40 | + This will download and install all the dependencies listed in the **package.json** file. |
| 41 | + |
| 42 | +2. **Serve the App Locally** |
| 43 | + After the dependencies are installed, you can run the app locally by starting the Angular local development server. |
| 44 | + |
| 45 | + Run the following command: |
| 46 | + |
| 47 | +  |
| 48 | + |
| 49 | + 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: |
| 50 | + |
| 51 | +  |
| 52 | + |
| 53 | + 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. |
| 54 | + |
| 55 | +### Step 4: License Key Requirement |
| 56 | + |
| 57 | +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: |
| 58 | + |
| 59 | +#### How to Obtain the License Key |
| 60 | +To obtain the license key, visit the following page: [Syncfusion License](https://ej2.syncfusion.com/angular/documentation/licensing/overview). |
| 61 | + |
| 62 | +#### How to Register the License Key in the App |
| 63 | +Once you have your license key, add it to the `src/main.ts` file for seamless browsing and usage of the blocks. |
| 64 | + |
| 65 | +```typescript |
| 66 | +import { registerLicense } from '@syncfusion/ej2-base'; |
| 67 | + |
| 68 | +registerLicense('Your-License-Key'); |
| 69 | +``` |
| 70 | +Replace `'Your-License-Key'` with the actual license key you received from Syncfusion. |
| 71 | + |
| 72 | +By adding the license key, you ensure that the blocks are fully functional and free from licensing issues. |
| 73 | + |
| 74 | +## Get Started by Viewing the Online Demo |
| 75 | + |
| 76 | +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. |
0 commit comments