|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Build your first Angular app with our blocks | Syncfusion |
| 4 | +description: Learn all about building your first Syncfusion Angular app with our blocks in the Syncfusion Angular UI Kit component of Syncfusion Essential JS 2 and more. |
| 5 | +platform: ej2-angular |
| 6 | +control: Build your first Angular app with our blocks |
| 7 | +documentation: ug |
| 8 | +domainurl: ##DomainURL## |
| 9 | +--- |
| 10 | + |
| 11 | +# Build your first Angular app with our blocks |
| 12 | + |
| 13 | +## 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. |
| 15 | + |
| 16 | + |
| 17 | + |
| 18 | +## Setting up Tailwind or Bootstrap 5.3 theme in the app |
| 19 | + |
| 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. |
| 21 | + |
| 22 | +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. |
| 23 | + |
| 24 | +### Tailwind configuration |
| 25 | + |
| 26 | +If you choose **Tailwind** theme, follow these steps to configure it. |
| 27 | + |
| 28 | +1. In **src -> index.html** file, add the following code for light mode (`class="light"`) and dark mode (`class="dark"`) in the `<html>` tag. |
| 29 | + |
| 30 | + - For **light mode**: |
| 31 | + |
| 32 | + ```html |
| 33 | + <html lang="en" class="light"> |
| 34 | + ``` |
| 35 | + |
| 36 | + - For **dark mode**: |
| 37 | + |
| 38 | + ```html |
| 39 | + <html lang="en" class="dark"> |
| 40 | + ``` |
| 41 | + |
| 42 | +2. In **src -> index.html** file, add the following scripts in the `<head>` tag. |
| 43 | + |
| 44 | + ```html |
| 45 | + <script src="https://cdn.tailwindcss.com"></script> |
| 46 | + <script> |
| 47 | + tailwind.config = { |
| 48 | + darkMode: "class", |
| 49 | + theme: { |
| 50 | + extend: { |
| 51 | + colors: { |
| 52 | + // NOTE: In this demo, we have used different shades of "Indigo" as primary colors. |
| 53 | + primary: { |
| 54 | + "50": "#eef2ff", |
| 55 | + "100": "#e0e7ff", |
| 56 | + "200": "#c7d2fe", |
| 57 | + "300": "#a5b4fc", |
| 58 | + "400": "#818cf8", |
| 59 | + "500": "#6366f1", |
| 60 | + "600": "#4f46e5", |
| 61 | + "700": "#4338ca", |
| 62 | + "800": "#3730a3", |
| 63 | + "900": "#312e81", |
| 64 | + "950": "#1e1b4b" |
| 65 | + } |
| 66 | + } |
| 67 | + } |
| 68 | + } |
| 69 | + } |
| 70 | + </script> |
| 71 | + ``` |
| 72 | + > The Syncfusion Angular components uses **Indigo** for light mode and **Cyan** for dark mode. So, please change the primary color accordingly to maintain a uniform appearance. |
| 73 | + |
| 74 | + |
| 75 | +3. In **src -> index.html** file, add the style oriented CDN link for Syncfusion Angular components in the `<head>` tag. |
| 76 | + |
| 77 | + - For **light mode**: |
| 78 | + |
| 79 | + ```html |
| 80 | + <link href="https://cdn.syncfusion.com/ej2/27.1.48/tailwind.css" rel="stylesheet" /> |
| 81 | + ``` |
| 82 | + |
| 83 | + - For **dark mode**: |
| 84 | + |
| 85 | + ```html |
| 86 | + <link href="https://cdn.syncfusion.com/ej2/27.1.48/tailwind-dark.css" rel="stylesheet" /> |
| 87 | + ``` |
| 88 | + |
| 89 | +4. **OPTIONAL**: If you wish to use our font icons prepared for **Tailwind**, you can include the following CDN link: |
| 90 | + |
| 91 | + ```html |
| 92 | + <link href="https://cdn.syncfusion.com/ej2/angular/ui-kit/font-icons/tailwind-icons.css" rel="stylesheet" /> |
| 93 | + ``` |
| 94 | + |
| 95 | +You can refer to the consolidated screenshot below for more details. |
| 96 | + |
| 97 | + |
| 98 | + |
| 99 | +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. |
| 100 | + |
| 101 | +### Bootstrap 5.3 configuration |
| 102 | + |
| 103 | +If you choose **Bootstrap 5.3** theme, follow these steps to configure it. |
| 104 | + |
| 105 | +1. In **src -> index.html** file, add the following code for light mode (`data-bs-theme="light"`) and dark mode (`data-bs-theme="dark"`) in the `<html>` tag. |
| 106 | + |
| 107 | + - For **light mode**: |
| 108 | + |
| 109 | + ```html |
| 110 | + <html lang="en" data-bs-theme="light"> |
| 111 | + ``` |
| 112 | + |
| 113 | + - For **dark mode**: |
| 114 | + |
| 115 | + ```html |
| 116 | + <html lang="en" data-bs-theme="dark"> |
| 117 | + ``` |
| 118 | + |
| 119 | +2. In **src -> index.html** file, add the style oriented CDN link for **Bootstrap 5.3** theme in the `<head>` tag. |
| 120 | + |
| 121 | + ```html |
| 122 | + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" /> |
| 123 | + ``` |
| 124 | + |
| 125 | +3. In **src -> index.html** file, add the style oriented CDN link for Syncfusion Angular components in the `<head>` tag. |
| 126 | + |
| 127 | + - For **light mode**: |
| 128 | + |
| 129 | + ```html |
| 130 | + <link href="https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3.css" rel="stylesheet"> |
| 131 | + ``` |
| 132 | + |
| 133 | + - For **dark mode**: |
| 134 | + |
| 135 | + ```html |
| 136 | + <link href="https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3-dark.css" rel="stylesheet" /> |
| 137 | + ``` |
| 138 | + |
| 139 | +4. **OPTIONAL**: If you wish to use our font icons prepared for **Bootstrap 5.3**, you can include the following CDN link: |
| 140 | + |
| 141 | + ```html |
| 142 | + <link href="https://cdn.syncfusion.com/ej2/angular/ui-kit/font-icons/bootstrap5.3-icons.css" rel="stylesheet" /> |
| 143 | + ``` |
| 144 | + |
| 145 | +You can refer to the consolidated screenshot below for more details. |
| 146 | + |
| 147 | + |
| 148 | + |
| 149 | +Now that the **Bootstrap 5.3** theme is configured for either light or dark mode of your choice, the app is ready for the next set of processes. |
| 150 | + |
| 151 | +## Steps to explore and copy block code snippets |
| 152 | + |
| 153 | +Now that **my-angular-app** is set up with the desired theme configuration, the next step is to copy and paste the pre-built simple sign-in block code into the Angular app for quick development. Here are a couple of ways to achieve this. |
| 154 | + |
| 155 | +### Steps to explore and copy block code snippets from the online demo |
| 156 | + |
| 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. |
| 158 | + |
| 159 | +  |
| 160 | + |
| 161 | +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. |
| 162 | + |
| 163 | +  |
| 164 | + |
| 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. |
| 166 | + |
| 167 | +  |
| 168 | + |
| 169 | +4. If CSS is provided, copy the CSS code and paste it into the `src -> app -> app.component.css` file; otherwise, ignore it. |
| 170 | + |
| 171 | +### Steps to explore and copy block code snippets from the GitHub app |
| 172 | + |
| 173 | +1. After downloading and opening the GitHub app in Visual Studio Code, navigate to the following folder: `src -> blocks-section`. |
| 174 | + |
| 175 | +  |
| 176 | + |
| 177 | +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. |
| 178 | + |
| 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. |
| 180 | + |
| 181 | +  |
| 182 | + |
| 183 | +> 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. |
| 184 | + |
| 185 | +> Ignore the code within the "SB Code - Start" and "SB Code - End" comments, as it is intended solely for sample browser purposes. |
| 186 | + |
| 187 | +## Steps to install and configure Syncfusion components |
| 188 | + |
| 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. |
| 190 | + |
| 191 | +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). |
| 192 | + |
| 193 | + |
| 194 | + |
| 195 | +Once the necessary packages are added, run the `npm install` command via the terminal to install those packages in the `node_modules` folder. |
| 196 | + |
| 197 | + |
| 198 | + |
| 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. |
| 200 | + |
| 201 | + |
| 202 | + |
| 203 | +> Ignore the code within the "SB Code - Start" and "SB Code - End" comments, as it is intended solely for sample browser purposes. |
| 204 | + |
| 205 | +## Steps to import and add assets to the app |
| 206 | + |
| 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**. |
| 208 | + |
| 209 | +## Steps to run the app |
| 210 | + |
| 211 | +Now that everything is set up in **my-angular-app** — the HTML, TS, CSS (if applicable), and assets — we are ready to build and launch the app. Type the `ng serve` command in the terminal, and you will see a localhost URL provided by the Angular development server. |
| 212 | + |
| 213 | + |
| 214 | + |
| 215 | +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. |
| 216 | + |
| 217 | + |
0 commit comments