Skip to content

Commit efc7c21

Browse files
[update] Angular integration guide (#29)
* [update] redirects * [dev] update docusaurus from 3.3.2 to 3.5.2 * [update] test commit * [update] Angular integration guide
1 parent 70e88eb commit efc7c21

File tree

1 file changed

+28
-0
lines changed

1 file changed

+28
-0
lines changed

docs/guides/integration_with_angular.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@ Create a new **my-angular-kanban-app** project using Angular CLI. Run the follow
2424
ng new my-angular-kanban-app
2525
~~~
2626

27+
:::note
28+
If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating new Angular app!
29+
:::
30+
2731
The command above installs all the necessary tools, so you don't need to run any additional commands.
2832

2933
### Installation of dependencies
@@ -118,6 +122,30 @@ export class KanbanComponent implements OnInit, OnDestroy {
118122
}
119123
~~~
120124

125+
#### Adding styles
126+
127+
To display Kanban correctly, you need to provide the corresponding styles. For this purpose, you can create the **kanban.component.css** file in the **src/app/kanban/** directory and specify important styles for Kanban and its container:
128+
129+
~~~css title="kanban.component.css"
130+
/* import Kanban styles */
131+
@import "@dhx/trial-kanban/dist/kanban.css";
132+
133+
/* specify styles for initial page */
134+
html,
135+
body {
136+
margin: 0;
137+
padding: 0;
138+
height: 100%;
139+
}
140+
141+
/* specify styles for the Kanban container */
142+
.component_container {
143+
height: 100%;
144+
width: 100%;
145+
margin: 0 auto;
146+
}
147+
~~~
148+
121149
#### Loading data
122150

123151
To add data into Kanban, you need to provide a data set. You can create the **data.ts** file in the **src/app/kanban/** directory and add some data into it:

0 commit comments

Comments
 (0)