[Tutorial] How to build a To-Do app using Bi-Directional linking in Angular?
Many of us have come across a range of note-taking apps that help us record our day-to-day activities or work-related items. Have you ever wondered what makes these apps popular?
Numerous users are currently embracing note-taking applications because of features in the apps, such as linking different notes together to avoid data duplication. Another great feature is that the note-taking apps will automatically check all of our previous notes to find out if we have made any related notes already. All of these features help the user retain several notes or documents in a sorted way.
Now, Bidirectional Linking is one of the features of these note-taking applications that allows us to connect separate notes together under one category. This makes it easy for the user to check the category, and all the notes linked under it will be shown.
In this tutorial, let’s learn how to build Simple Bidirectional Linking for Angular Todo Project.
Note: In this tutorial, We are going to use the Fuzzy Search / Fuzzy Sort npm package for searching and displaying the results. Users can use any searching method, but it should return results faster. We are using Angular in this tutorial to implement the same.
Steps for creating a Simple Bidirectional Linking for Angular Todo Project
The complete code and repository for the above project have been given below. Small code snippets have been given in the steps below to illustrate this.
- To start with, create an Angular project and install the npm module for Fuzzy Search or Fuzzy Sort (anyone of the two).
npm i fuzzy-searchornpm i fuzzysort
- Next, we have to create a field for adding the Todo task. For this follow the HTML code given below.
<!-- Input Field for adding Todo --><div class="col-lg-12"><input type="text" class="form-control calculator_textbox (input)="searchAndAddTag()" (keydown)="upDown($event, 'oldTask')"[(ngModel)]="oldTask"/></div><button (click)="addToOldList()" class="btn button">ADD</button>
- Then we have to write the function for adding the todo to the list.
// Adding to Task to Todo ListaddToOldList() {let items = { sentence: this.removeHash, word: this.hashtag };this.previousItems.push(items);this.list = this.previousItems;}
- To delete the todo we can write a function to delete it from the list. On the click of the delete icon, it will send the index to the function and delete it from the list.
deleteTask(index) {this.items.splice(index, 1);this.list = this.items;}
- Now after adding a todo to list we can add tags manually to link the todo or notes to a particular category.
- For that, we will be using “[[]]”. The user has to enter the text between double square brackets to link manually along with the todo. For eg. Play cricket in the evening [[sports]].
- Next to fetch the content inside “[[]]”, we need to write a function. Below the code for fetching the data is given.
searchAndAddTag() {
this.hashtag = this.oldTask.substring(this.oldTask.lastIndexOf("[["),this.oldTask.lastIndexOf("]]"));if (this.hashtag) {
let length = this.hashtag.length;
this.hashtag = this.hashtag.substr(2, length);
}this.removeHash = this.oldTask.replace("[[" + this.hashtag + "]]", "");
}
- Now we can see a tag added to the todo list along with #sports. When we search for sports, it will show all the todos under the sports category.
- Next to dynamically link and unlink todos using bidirectional linking we have to search the todos using a fuzzy search, which will provide us faster results. It will search by char by char, so wherever the char is present it will search from left to right and display the results.
worker() {
let searcher = new FuzzySearch(this.previousItems, ["sentence"], {caseSensitive: false,
sort: true,
});let results = searcher.search(this.newTask);
this.search(results);
}search(data) {
this.list = [];
let results = data;for (let i = 0; i < results.length; i++) {
if (this.list.includes(results[i]["sentence"])) {
} else {
this.list.push(results[i]);
}}
- This will show us the results in a dropdown. We will use the ngbdropdown for showing the dropdown. Make sure to install it before proceeding.
- Next, we can click the enter or search button to take us to the bidirectional linking section to link and unlink the todo.
- For that, we have to write a function for sending us to a new page for linking and unlinking the todos according to the tag or category which we want to link the todos with. As of now, we will tag according to the search field value.
addToNewList() {
for (let i = 0; i < this.searchList.length; i++) {
if (this.searchList[i].word == "") {
unlinkedTask.push(this.searchList[i]);
} else if (this.searchList[i].word == this.newTask) {
linkedTask.push(this.searchList[i]);
}}let task = {
task: this.newTask,
linkedList: linkedTask,
unlinkedList: unlinkedTask,
};this.newTaskObject.push(task);
this.data.changeMessage(this.newTaskObject);
this.router.navigate(["task/" + this.newTaskName]);
}
- Next to link and unlink the todos to a category we have to follow the below steps.
linkNotes(value, task) {
for (let i = 0; i < this.searchList.length; i++) {
if (this.searchList[i].sentence == value.sentence) {
this.searchList[i].word = task;
}}
this.addToNewList(this.searchList, this.newTaskName);
}
unlinkNotes(value) {
for (let i = 0; i < this.searchList.length; i++) {
if (this.searchList[i].sentence == value.sentence) {
this.searchList[i].word = "";
}}
this.addToNewList(this.searchList, this.newTaskName);
}
- Now after linking and unlinking todos it will ask for saving the object. Then click save to save the todo list with the applied category.
- Next, we can now see the tags would have been applied to the particular todos.
- We can now search according to the tags or categories to aggregate the required todos. For searching, we need a function which can be found below.
searchHashtag(value) {
this.tagList = [];for (let j = 0; j < this.previousItems.length; j++) {
if (
this.previousItems[j].word.toLowerCase().includes(value.toLowerCase())){
if (this.tagList.includes(this.previousItems[j].sentence)) {
} else {
this.tagList.push(this.previousItems[j].sentence);
}}}}
We have successfully linked the todos to the play category. This will helps us to easily find out the todos under the “play” category. Refer to the Github repository link to view the full source code.
Summary
Using the Bidirectional Linking different notes can be connected together under one group. This makes it easy for a user to check the category, and all the notes linked under it will be shown. This, in turn, helps the user to build notes easily and also prevents data redundancy issues.
Thanks for reading the tutorial. Requesting you to share your thoughts in the comments below!
References
About Blocksurvey
BlockSurvey is a privacy-focused platform to create surveys, polls, & forms with complete confidentiality. Through BlockSurvey, all your data is encrypted end to end and only you can see it. You own your data. It’s your digital right. There are zero trackers and we keep you as anonymous to the data collectors. Our platform utilizes Blockstack and helps in maintaining privacy and anonymity, resulting in effective surveys and polls. Try out by creating your surveys and polls with us.
