From aa25597e8f31c5d1fef0b09501aa5d2cf38262e6 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Sun, 25 Aug 2024 18:21:23 +0400 Subject: [PATCH] [update] Angular integration guide --- docs/guides/integration_with_angular.md | 29 +++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/docs/guides/integration_with_angular.md b/docs/guides/integration_with_angular.md index 92a0ec0..0483422 100644 --- a/docs/guides/integration_with_angular.md +++ b/docs/guides/integration_with_angular.md @@ -24,6 +24,10 @@ Create a new **my-angular-todo-app** project using Angular CLI. For this purpose ng new my-angular-todo-app ~~~ +:::note +If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating new Angular app! +::: + The command above installs all the necessary tools, so you don't need to run any additional commands. ### Installation of dependencies @@ -118,6 +122,31 @@ export class ToDoComponent implements OnInit, OnDestroy { } ~~~ +#### Adding styles + +To display To Do List correctly, you need to provide the corresponding styles. For this purpose, you can create the **todo.component.css** file in the **src/app/todo/** directory and specify important styles for To Do List and its container: + +~~~css title="todo.component.css" +/* import To Do List styles */ +@import "@dhx/trial-todolist/dist/todo.css"; + +/* specify styles for initial page */ +html, +body { + margin: 0; + padding: 0; + height: 100%; + background-color: #f7f7f7; +} + +/* specify styles for the To Do List container */ +.component_container { + height: 100%; + max-width: 800px; + margin: 0 auto; +} +~~~ + #### Loading data To add data into To Do List, you need to provide a data set. You can create the **data.ts** file in the **src/app/todo/** directory and add some data into it: