Skip to content

Commit

Permalink
[update] Angular integration guide
Browse files Browse the repository at this point in the history
  • Loading branch information
serhiipylypchuk1991 committed Aug 25, 2024
1 parent c8ceabb commit aa25597
Showing 1 changed file with 29 additions and 0 deletions.
29 changes: 29 additions & 0 deletions docs/guides/integration_with_angular.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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:
Expand Down

0 comments on commit aa25597

Please sign in to comment.