Skip to content

Commit b20532b

Browse files
Merge pull request #680 from Syncfusion-Content/hotfix/hotfix-v27.2.2
DOCINFRA-2341_merged_using_automation
2 parents 90f85a3 + d467a2f commit b20532b

File tree

3 files changed

+18
-20
lines changed

3 files changed

+18
-20
lines changed

ej2-angular/ui-kit/build-your-first-angular-app-with-blocks.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ domainurl: ##DomainURL##
1111
# Build your first Angular app with our blocks
1212

1313
## Create an Angular app
14-
To create an Angular app, please refer to the official Angular setup guide [here](https://v17.angular.io/guide/setup-local) to get started. In this example, I have created an Angular app named **my-angular-app** and will walk you through the step-by-step process of adding a simple sign-in block.
14+
To create a new Angular app, please refer to the official Angular setup guide [here](https://v17.angular.io/guide/setup-local) to get started. In this example, I have created a new Angular app named **my-angular-app** and will walk you through the step-by-step process of adding a simple sign-in block.
1515

1616
![New Angular App](images/new-angular-app.png)
1717

1818
## Setting up Tailwind or Bootstrap 5.3 theme in the app
1919

20-
After creating your Angular app named **my-angular-app**, open it in Visual Studio Code (which we'll be using throughout this walkthrough). Once the app is open, before proceeding further, navigate to the `src -> app -> app.component.html` file and remove the template HTML code. Remember, only remove the template HTML code and not the `<router-outlet />` code.
20+
After creating the new Angular app named **my-angular-app**, open it in Visual Studio Code (which we'll be using throughout this walkthrough). Once the app is open, before proceeding further, navigate to the **src -> app -> app.component.html** file and remove the template HTML code. Remember, only remove the template HTML code and not the `<router-outlet />` code.
2121

2222
The next step is to choose a theme, either **Tailwind** or **Bootstrap 5.3**, in both light and dark modes, and configure the app accordingly.
2323

@@ -154,29 +154,29 @@ Now that **my-angular-app** is set up with the desired theme configuration, the
154154

155155
### Steps to explore and copy block code snippets from the online demo
156156

157-
1. In the online demo, navigate to the "Authentication" category and select the "Sign In" block. This will direct you to the appropriate demo page.
157+
1. In the [online demo](https://ej2.syncfusion.com/angular/essential-ui-kit/#/blocks), navigate to the "Authentication" category and select the "Sign In" block. This will direct you to the appropriate demo page.
158158

159159
![Navigate to the sign-in block demo](images/navigate-to-the-sign-in-block-demo.png)
160160

161161
2. On the demo page, select the first demo, which showcases a simple sign-in block. Choose the desired theme, then switch from the "Preview" tab to the "Code" tab.
162162

163163
![Choose Tailwind or Bootstrap theme](images/choose-tailwind-or-bootstrap-theme.png)
164164

165-
3. In the "Code" tab, copy the HTML code using the "Copy to clipboard" option and paste it into the `src -> app -> app.component.html` file.
165+
3. In the "Code" tab, copy the HTML code using the "Copy to clipboard" option and paste it into the **src -> app -> app.component.html** file.
166166

167167
![Copy HTML code snippet to clipboard](images/copy-HTML-code-snippet-to-clipboard.png)
168168

169-
4. If CSS is provided, copy the CSS code and paste it into the `src -> app -> app.component.css` file; otherwise, ignore it.
169+
4. If CSS is provided, copy the CSS code and paste it into the **src -> app -> app.component.css** file; otherwise, ignore it.
170170

171171
### Steps to explore and copy block code snippets from the GitHub app
172172

173-
1. After downloading and opening the GitHub app in Visual Studio Code, navigate to the following folder: `src -> blocks-section`.
173+
1. On [downloading](https://github.com/syncfusion/essential-ui-kit-for-angular) and opening the GitHub app in Visual Studio Code, navigate to the following folder: **src -> blocks-section**.
174174

175175
![Downloaded GitHub app in Visual Studio Code](images/downloaded-github-app-in-visual-studio-code.png)
176176

177177
2. Inside, you'll find a list of folders, each corresponding to a specific block. Open the "signin" block folder, where you'll see the demo arranged sequentially.
178178

179-
3. Go to the first folder, `src/blocks-section/signin/signin-1`, where you'll find the HTML, CSS, and TS files of the simple sign-in block. You can copy the code directly from these files.
179+
3. Go to the first folder, **src/blocks-section/signin/signin-1**, where you'll find the HTML, CSS, and TS files of the simple sign-in block. You can copy the code directly from these files.
180180

181181
![View the sign-in block demo files](images/view-the-sign-in-block-demo-files.png)
182182

@@ -186,25 +186,25 @@ Now that **my-angular-app** is set up with the desired theme configuration, the
186186

187187
## Steps to install and configure Syncfusion components
188188

189-
While copying and pasting the HTML code, you'll notice that Syncfusion Angular components are used. To incorporate them into **my-angular-app**, install the necessary packages and add the corresponding modules to the `src/app/app.component.ts` file for the app to run.
189+
While copying and pasting the HTML code, you'll notice that Syncfusion Angular components are used. To incorporate them into **my-angular-app**, install the necessary packages and add the corresponding modules to the **src/app/app.component.ts** file for the app to run.
190190

191191
In the simple sign-in block, components such as textbox, checkbox and button are used. After copying and pasting the code into the HTML file, open the **package.json** file and add the required packages: `@syncfusion/ej2-angular-buttons` and `@syncfusion/ej2-angular-inputs`. For more details about other Syncfusion Angular component packages, refer to this [link](https://www.npmjs.com/search?q=%40syncfusion%2Fej2-angular).
192192

193193
![Adding required packages for Syncfusion components](images/adding-required-packages-for-syncfusion-components.png)
194194

195-
Once the necessary packages are added, run the `npm install` command via the terminal to install those packages in the `node_modules` folder.
195+
Once the necessary packages are added, run the `npm install` command via the terminal to install those packages in the **node_modules** folder.
196196

197197
![Install Syncfusion component packages](images/install-syncfusion-component-packages.png)
198198

199-
Finally, go to the online demo or the GitHub repository and copy the required "TypeScript" code into your app. This typically includes the import module to run Syncfusion Angular components and any basic code required for the component to function.
199+
Finally, go to the [online demo](https://ej2.syncfusion.com/angular/essential-ui-kit/#/blocks) or the [GitHub repository](https://github.com/syncfusion/essential-ui-kit-for-angular) and copy the required **TypeScript** code into your app. This typically includes the import module to run Syncfusion Angular components and any basic code required for the component to function.
200200

201201
![Import Syncfusion component module in TypeScript](images/import-syncfusion-component-module-in-typescript.png)
202202

203203
> Ignore the code within the "SB Code - Start" and "SB Code - End" comments, as it is intended solely for sample browser purposes.
204204

205205
## Steps to import and add assets to the app
206206

207-
If you want to view and experience the images used in our simple sign-in design, you can download the **assets** folder from the following GitHub [link](https://github.com/syncfusion/essential-ui-kit-for-angular) and place it inside the **src** folder of **my-angular-app**.
207+
If you want to view and experience the images used in our simple sign-in design, you can download the **assets** folder from the following [GitHub link](https://github.com/syncfusion/essential-ui-kit-for-angular/tree/master/ui-blocks/src) and place it inside the **src** folder of **my-angular-app**, modifying the image URL if required.
208208

209209
## Steps to run the app
210210

@@ -214,4 +214,4 @@ Now that everything is set up in **my-angular-app** — the HTML, TS, CSS (if ap
214214

215215
To view the app in your browser, simply **Ctrl + Click** (or **Cmd + Click** on macOS) on the localhost URL displayed in the terminal. This will open the app in your default browser, allowing you to view and experience the simple sign-in block.
216216

217-
![View the app in the browser using the localhost URL](images/View-the-app-in-the-browser-using-the-localhost-URL.png)
217+
![View the app in the browser using the localhost URL](images/view-the-app-in-the-browser-using-the-localhost-URL.png)

ej2-angular/ui-kit/getting-started.md

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ domainurl: ##DomainURL##
1212

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

15-
- **Download the App from GitHub**: Get the full source code and run the app locally to explore the blocks.
15+
- **Download the App from GitHub**: Get the full free source code and run the app locally to explore the blocks.
1616
- **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.
1717

1818
## Get Started by Downloading the App from GitHub
@@ -40,13 +40,11 @@ Run the following commands one after the other in the terminal:
4040
This will download and install all the dependencies listed in the **package.json** file.
4141

4242
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:
43+
Once the dependencies are installed, you can run the app locally by starting the Angular local development server. To do so, run the following command.
4644

4745
![Running the Angular development server](images/running-the-angular-development-server.png)
4846

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:
47+
This command will start the local development server, and you'll see an output in the terminal indicating the app is running. Typically, it will display a local host URL like this:
5048

5149
![Local development server running](images/local-development-server-running.png)
5250

@@ -60,17 +58,17 @@ The blocks include several Syncfusion Angular components that require an active
6058
To obtain the license key, visit the following page: [Syncfusion License](https://ej2.syncfusion.com/angular/documentation/licensing/overview).
6159

6260
#### 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.
61+
Once you have your license key, add it to the **src/main.ts** file for seamless browsing and usage of the blocks.
6462

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

6866
registerLicense('Your-License-Key');
6967
```
70-
Replace `'Your-License-Key'` with the actual license key you received from Syncfusion.
68+
Replace **'Your-License-Key'** with the actual license key you received from Syncfusion.
7169

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

7472
## Get Started by Viewing the Online Demo
7573

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.
74+
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](https://ej2.syncfusion.com/angular/essential-ui-kit/#/blocks) website to interact with the blocks.

0 commit comments

Comments
 (0)