Skip to content

Commit

Permalink
Update Angular and Vue integration guides
Browse files Browse the repository at this point in the history
  • Loading branch information
@serhiipylypchuk1991
serhiipylypchuk1991 committed Aug 13, 2024
1 parent e784529 commit 7167a77
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 79 deletions.
181 changes: 103 additions & 78 deletions docs/guides/integration_with_angular.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,17 @@ Create a new **my-angular-todo-app** project using Angular CLI. For this purpose
ng new my-angular-todo-app
~~~

The command above installs all the necessary tools and dependencies, so you don't need to run any additional commands.
The command above installs all the necessary tools, so you don't need to run any additional commands.

### Installation of dependencies

Go to the app directory:
Go to the new created app directory:

~~~json
cd my-angular-todo-app
~~~

Run the app with the following commands:
Install dependencies and start the dev server. For this, use the [**yarn**](https://yarnpkg.com/) package manager:

~~~json
yarn
Expand All @@ -53,61 +53,74 @@ Download the [**trial To Do List package**](/how_to_start/#installing-to-do-list

### Step 2. Component creation

Now you need to create a component, to add a To Do List into the application. Create the **todo** folder in the **src/app/** directory, add a new file into it and name it **todo.component.ts**. Then complete the steps described below.
Now you need to create an Angular component, to add a To Do List with Toolbar into the application. Create the **todo** folder in the **src/app/** directory, add a new file into it and name it **todo.component.ts**.

#### Import source files

Open the **todo.component.ts** file and import To Do List source files. Note that:

- if you use PRO version and install the To Do List package from a local folder, the imported paths look like this:
- if you use PRO version and install the To Do List package from a local folder, the imported path look like this:

~~~jsx title="todo.components.ts"
import { ToDo } from 'dhx-todolist-package';
import { ToDo, Toolbar } from 'dhx-todolist-package';
~~~

- if you use the trial version of To Do List, specify the following paths:
- if you use the trial version of To Do List, specify the following path:

~~~jsx title="todo.components.ts"
import { ToDo } from '@dhx/trial-todolist';
import { ToDo, Toolbar } from '@dhx/trial-todolist';
~~~

In this tutorial you can see how to configure the **trial** version of To Do List.

#### Set the container and initialize the To Do List component
#### Set containers and initialize the To Do List with Toolbar

To display To Do List on the page, you need to set the container and initialize the component within the container:
To display To Do List with Toolbar on the page, you need to set containers for To Do List and Toolbar, and initialize these components using the corresponding constructors:

~~~jsx {7,11-12,16-19} title="todo.component.ts"
import { ToDo } from '@dhx/trial-todolist';
import { Component, ElementRef, OnInit, ViewChild, OnDestroy} from '@angular/core';
~~~jsx {1,8-11,15-18,24-31} title="todo.component.ts"
import { ToDo, Toolbar } from '@dhx/trial-todolist';
import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';

@Component({
encapsulation: ViewEncapsulation.None,
selector: "todo", // a template name used in the "app.component.ts" file as <todo />
styleUrls: ["./todo.component.css"], // include a css file
template: `<div #here class="widget"></div>`,
template: `<main class="component_container">
<div #toolbar_container></div>
<div #todo_container style="height: calc(100% - 56px);"></div>
</main>`
})

export class ToDoComponent implements OnInit, OnDestroy {
// set the container where the To Do List will be initialized
@ViewChild("here", { static: true }) container!: ElementRef;

private _todo!: any;
// initialize container for Toolbar
@ViewChild("toolbar_container", { static: true }) toolbar_container!: ElementRef;
// initialize container for To Do List
@ViewChild("todo_container", { static: true }) todo_container!: ElementRef;

private _todo!: ToDo;
private _toolbar!: Toolbar;

ngOnInit() {
// initialize the To Do List component
this._todo = new ToDo(this.container.nativeElement, { /* configuration properties */ });
this._todo = new ToDo(this.todo_container.nativeElement, {});

// initialize the Toolbar component
this._toolbar = new Toolbar(this.toolbar_container.nativeElement, {
api: this._todo.api,
// other configuration properties
});
}

ngOnDestroy(): void {
// destruct the To Do List component
this._todo.destructor();
this._todo.destructor(); // destruct To Do List
this._toolbar.destructor(); // destruct Toolbar
}
}
~~~

#### Loading data

To load 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:
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:

~~~jsx {2,19,28,38} title="data.ts"
export function getData() {
Expand Down Expand Up @@ -153,59 +166,84 @@ export function getData() {

Then open the ***todo.component.ts*** file. Import the file with data and specify the corresponding data properties to the configuration object of To Do List within the `ngOnInit()` method, as shown below:

~~~jsx {1,17,19-21} title="todo.component.ts"
import { getData } from './data'; // import the data file
import { ToDo } from '@dhx/trial-todolist';
import { Component, ElementRef, OnInit, ViewChild, OnDestroy} from '@angular/core';
~~~jsx {2,23,25-27} title="todo.component.ts"
import { ToDo, Toolbar } from '@dhx/trial-todolist';
import { getData } from "./data"; // import data
import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';

@Component({
selector: "todo",
styleUrls: ["./todo.component.css"],
template: `<div #here class="widget"></div>`,
encapsulation: ViewEncapsulation.None,
selector: "todo", // a template name used in the "app.component.ts" file as <todo />
styleUrls: ["./todo.component.css"], // include a css file
template: `<main class="component_container">
<div #toolbar_container></div>
<div #todo_container style="height: calc(100% - 56px);"></div>
</main>`
})

export class ToDoComponent implements OnInit, OnDestroy {
@ViewChild("here", { static: true }) container!: ElementRef;

private _todo!: any;
@ViewChild("toolbar_container", { static: true }) toolbar_container!: ElementRef;
@ViewChild("todo_container", { static: true }) todo_container!: ElementRef;

private _todo!: ToDo;
private _toolbar!: Toolbar;

ngOnInit() {
const { users, tasks, projects } = getData(); // initialize the data items
this._todo = new ToDo(this.container.nativeElement, {
const { users, tasks, projects } = getData();
this._todo = new ToDo(this.todo_container.nativeElement, {
users, // apply user data
tasks, // apply task data
projects // apply project data
projects,// apply project data
// other configuration properties
});

this._toolbar = new Toolbar(this.toolbar_container.nativeElement, {
api: this._todo.api,
// other configuration properties
});
}

ngOnDestroy(): void {
this._todo.destructor();
this._toolbar.destructor();
}
}
~~~

You can also use the [`parse()`](/api/methods/parse_method/) method inside the `ngOnInit()` method of Angular to load data into To Do List. It will reload data on each applied change.
You can also use the [`parse()`](/api/methods/parse_method/) method inside the `ngOnInit()` method of Angular to load data into To Do List.

~~~jsx {1,17,19-24} title="todo.component.ts"
import { getData } from './data'; // import the data file
import { ToDo } from '@dhx/trial-todolist';
import { Component, ElementRef, OnInit, ViewChild, OnDestroy} from '@angular/core';
~~~jsx {2,23,31-36} title="todo.component.ts"
import { ToDo, Toolbar } from '@dhx/trial-todolist';
import { getData } from "./data"; // import data
import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';

@Component({
selector: "todo",
styleUrls: ["./todo.component.css"],
template: `<div #here class="widget"></div>`,
encapsulation: ViewEncapsulation.None,
selector: "todo", // a template name used in the "app.component.ts" file as <todo />
styleUrls: ["./todo.component.css"], // include a css file
template: `<main class="component_container">
<div #toolbar_container></div>
<div #todo_container style="height: calc(100% - 56px);"></div>
</main>`
})

export class ToDoComponent implements OnInit, OnDestroy {
@ViewChild("here", { static: true }) container!: ElementRef;

private _todo!: any;
@ViewChild("toolbar_container", { static: true }) toolbar_container!: ElementRef;
@ViewChild("todo_container", { static: true }) todo_container!: ElementRef;

private _todo!: ToDo;
private _toolbar!: Toolbar;

ngOnInit() {
const { users, tasks, projects } = getData(); // initialize the data items
this._todo = new ToDo(this.container.nativeElement, {});
// apply the data items via the parse() method
const { users, tasks, projects } = getData();
this._todo = new ToDo(this.todo_container.nativeElement, {});

this._toolbar = new Toolbar(this.toolbar_container.nativeElement, {
api: this._todo.api,
// other configuration properties
});

// apply the data via the parse() method
this._todo.parse({
users,
tasks,
Expand All @@ -215,52 +253,39 @@ export class ToDoComponent implements OnInit, OnDestroy {

ngOnDestroy(): void {
this._todo.destructor();
this._toolbar.destructor();
}
}
~~~

The `this._todo.parse(data)` method provides data reloading on each applied change.

Now the To Do List component is ready. When the element will be added to the page, it will initialize the To Do List object with data. You can provide necessary configuration settings as well. Visit our [To Do List API docs](/api/overview/configs_overview/) to check the full list of available properties.

#### Handling events

When a user makes some action in the To Do List, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](/api/overview/events_overview/).

Open the **todo.component.ts** file and complete the `ngOnInit()` method as in:

~~~jsx {19-22} title="todo.component.ts"
import { getData } from './data';
import { ToDo } from '@dhx/trial-todolist';
import { Component, ElementRef, OnInit, ViewChild, OnDestroy} from '@angular/core';

@Component({
selector: "todo",
styleUrls: ["./todo.component.css"],
template: `<div #here class="widget"></div>`,
})

export class ToDoComponent implements OnInit, OnDestroy {
@ViewChild("here", { static: true }) container!: ElementRef;
Open the **todo.component.ts** file and complete the `ngOnInit()` method in the following way:

private _todo!: any;
~~~jsx {5-7} title="todo.component.ts"
// ...
ngOnInit() {
this._todo = new ToDo(this.todo_container.nativeElement, {});

ngOnInit() {
const { users, tasks, projects } = getData();
this._todo = new ToDo(this.container.nativeElement, { users, tasks, projects });
// subscribe on the "add-task" event
this._todo.events.on("add-task", (obj) => {
console.log("Angular", obj);
});
}
this._todo.events.on("add-task", (obj) => {
console.log("A new task is added", obj);
});
}

ngOnDestroy(): void {
this._todo.destructor();
}
ngOnDestroy(): void {
this._todo.destructor();
}
~~~

### Step 3. Adding To Do List into the app

Now it's time to add the component into your app. Open ***src/app/app.component.ts*** and use *ToDoComponent* instead of the default content by inserting the code below:
To add the ***ToDoComponent*** component into the app, open the ***src/app/app.component.ts*** file and replace the default code with the following one:

~~~jsx {5} title="app.component.ts"
import { Component } from "@angular/core";
Expand All @@ -274,7 +299,7 @@ export class AppComponent {
}
~~~

Then create the ***app.module.ts*** file in the ***src/app/*** directory and insert the *ToDoComponent* as shown below:
Then create the ***app.module.ts*** file in the ***src/app/*** directory and specify the *ToDoComponent* as shown below:

~~~jsx {4-5,8} title="app.module.ts"
import { NgModule } from "@angular/core";
Expand Down
2 changes: 1 addition & 1 deletion docs/guides/integration_with_vue.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,7 +307,7 @@ export default {
}
</script>

<!--...-->
// ...
~~~

### Step 3. Adding To Do List into the app
Expand Down

0 comments on commit 7167a77

Please sign in to comment.