I created application in angular using firebase, how to make possible for each user to have their own table with tasks

Question

What I need to improve, and what I need to add in my code so that each logged in user would have their own tasks table, and can update and delete their own tasks. My second question is how to hide menu-items tasks, add-tasks,logout if user is not logged in, and how to show them if the user is logged in. Here is my application on GitHub https://github.com/AleksandarRadinkovic/angular-app. First you need to sign-up and then sign-in if you want to see tasks table, and add delete or update tasks.

Answer 1

Separate tasks table for each user you can create a collection structure add a node with logged in user name or its key and add task collection inside each node.

For Example :

{
  "User1" : {
      tasks : [
            {
          taskName : "demotask"    
                },
        {
          taskName : "demotask"    
                }    
        ]
  },

  "User2" : {
      tasks : [
            {
          taskName : "demotask"    
                },
        {
          taskName : "demotask"    
                }    
        ]
  }
}

Firebase stores login user details in browser storage so You need to check if the user logged in or not. Using *ngIf you can show hide menu items.

For Example :

//create common helper Service
checkLoginUser() {
        let user = null;

        // Code to check if the user logged in or not.
        // If there is a user in local storage save in the "user" variable.

    return user? true : false;        
}

// Inject service inside component and store user status in component variable
isUserLoggedIn = this.checkLoginUser();

// Handle Show hide using *ngIf inside template
<ul>
    <li *ngIf="isUserLoggedIn">Tasks</li>
    <li *ngIf="isUserLoggedIn">Add Task</li>
    <li *ngIf="isUserLoggedIn">Logout</li>
</ul>

Answer 2

To create a table (collection) for each user, you need to create a subcollection for them. Here are some basics on that: https://firebase.google.com/docs/firestore/data-model#subcollections

To check if the user is signed in, check this question: How do I detect if a user is already logged in Firebase?. Change the HTML according to the state with *ngIf or something similar.