You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: ej2-angular/ui-kit/build-your-first-angular-app-with-blocks.md
+16-14Lines changed: 16 additions & 14 deletions
Original file line number
Diff line number
Diff line change
@@ -10,28 +10,30 @@ domainurl: ##DomainURL##
10
10
11
11
# Build your first Angular app with our blocks
12
12
13
+
This tutorial guides you through building an Angular application using Syncfusion's UI Kit blocks. It demonstrates how to set up a new Angular project, choose between Tailwind CSS or Bootstrap 5.3 themes, and add a sign-in block in your application. The goal is to help developers quickly build responsive, modern web apps using a variety of prebuilt blocks with minimal effort.
14
+
13
15
## Before You Start: Real-Life Use Case
14
16
15
17
Before diving into the setup, let's explore a **real-life use case** — building a **Customer Support Portal** using our Angular UI Kit. This video tutorial walks you through the process step by step.
Once you’ve seen this use case in action, we’ll move on to setting up an Angular app and integrating Syncfusion<supstyle="font-size:70%">®</sup> UI Kit blocks.
21
+
Once you’ve seen this use case in action, the next step is to set up an Angular app and integrate Syncfusion<supstyle="font-size:70%">®</sup> UI Kit blocks.
20
22
21
23
## Create a new Angular app
22
-
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.
24
+
To create a new Angular app, 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.
23
25
24
26
25
27
26
-
## Setting up Tailwind or Bootstrap 5.3 theme in the app
28
+
## Setting up Tailwind CSS or Bootstrap 5.3 theme in the app
27
29
28
-
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.
30
+
After creating the new Angular app named **my-angular-app**, open it in Visual Studio Code (which will be used 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.
29
31
30
-
The next step is to choose a theme, either **Tailwind** or **Bootstrap 5.3**, in either light or dark mode, and configure the app accordingly.
32
+
The next step is to choose a theme, either **Tailwind CSS** or **Bootstrap 5.3**, in either light or dark mode, and configure the app accordingly.
31
33
32
-
### Tailwind configuration
34
+
### Tailwind CSS configuration
33
35
34
-
If you choose **Tailwind** theme, follow these steps to configure it.
36
+
If you choose **Tailwind CSS** theme, follow these steps to configure it.
35
37
36
38
1. In **src -> index.html** file, add the following code for light mode (`class="light"`) and dark mode (`class="dark"`) in the `<html>` tag.
37
39
@@ -47,7 +49,7 @@ If you choose **Tailwind** theme, follow these steps to configure it.
47
49
<htmllang="en"class="dark">
48
50
```
49
51
50
-
2. In **src -> index.html** file, add the following scripts in the `<head>` tag.
52
+
2. In **src -> index.html** file, add the following scripts in the `<head>` tag. The main purpose of these scripts is to dynamically generate the appropriate Tailwind CSS classes at runtime based on the styles used in the application, and to replace the primary (highlight) color in the CSS with a custom indigo color palette.
@@ -77,7 +79,7 @@ If you choose **Tailwind** theme, follow these steps to configure it.
77
79
}
78
80
</script>
79
81
```
80
-
> The Syncfusion<supstyle="font-size:70%">®</sup> Angular components uses **Indigo** for light mode and **Cyan** for dark mode. So, please change the primary color accordingly to maintain a uniform appearance.
82
+
> The Syncfusion<supstyle="font-size:70%">®</sup> Angular components uses **Indigo** for light mode and **Cyan** for dark mode. To maintain a uniform appearance, change the primary color accordingly.
81
83
82
84
83
85
3. In **src -> index.html** file, add the style oriented CDN link for Syncfusion<supstyle="font-size:70%">®</sup> Angular components in the `<head>` tag.
@@ -94,17 +96,17 @@ If you choose **Tailwind** theme, follow these steps to configure it.
Now that the **Tailwind** theme is configured for either light or dark mode of your choice, the app is ready for the next set of processes.
109
+
Now that the **Tailwind CSS** theme is configured for either light or dark mode of your choice, the app is ready for the next set of processes.
108
110
109
111
### Bootstrap 5.3 configuration
110
112
@@ -168,7 +170,7 @@ Now that **my-angular-app** is set up with the desired theme configuration, the
168
170
169
171
2. On the demo page, go to the first demo, which showcases a simple sign-in block. Choose the desired theme, then switch from the "Preview" tab to the "Code" tab.
170
172
171
-
173
+
172
174
173
175
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.
174
176
@@ -190,7 +192,7 @@ Now that **my-angular-app** is set up with the desired theme configuration, the
190
192
191
193
> **Note:**
192
194
>
193
-
> 1. In the HTML, the **Tailwind** design code is placed within the "if" block, while the **Bootstrap 5.3** design code is placed in the "else" block.
195
+
> 1. In the HTML, the **Tailwind CSS** design code is placed within the "if" block, while the **Bootstrap 5.3** design code is placed in the "else" block.
194
196
> 2. Ignore the code within the "SB Code - Start" and "SB Code - End" comments, as it is intended solely for sample browser purposes.
195
197
196
198
## Steps to install and configure Syncfusion<supstyle="font-size:70%">®</sup> Angular components
Copy file name to clipboardExpand all lines: ej2-angular/ui-kit/overview.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
10
10
11
11
# Overview: Essential<supstyle="font-size:70%">®</sup> UI Kit for Angular
12
12
13
-
The Essential<supstyle="font-size:70%">®</sup> UI Kit for Angular comprises over 160 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<supstyle="font-size:70%">®</sup> 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:
13
+
The Essential<supstyle="font-size:70%">®</sup> UI Kit for Angular comprises over 160 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<supstyle="font-size:70%">®</sup> Angular components, delivering robust functionality and ease of use. They are compatible with both Tailwind CSS 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:
0 commit comments