Show components base on url Angular 7

Question

I need to do this: On desktop:

1) Open an route, there is tasks list

2) Ckick on task, then ull see task and a map

On mobile

1) Open an route, there is tasks list

2) Click on task, then ull see only selected task.

3) Clik on "showOnMap" inside task, ull see only map.

4) Click back in browser ull see task

5) Click back in browser again ull see tasks list

How to do that in Angular 7 ?

i try to make an project with child route, but i cant set css style. stackblitz example add /1/map inside service url like https://owainwpmw.github.stackblitz.io/1/map

github

Maybe ull give better solituion?

here is visualization

Answer 1

To achieve this, make the Task list a component, and each task a component. Then with CSS, hide the task list component on mobile.

In your routing do this:

{
    path: 'task', component: TaskListComponent,
    children: [
      {
        path: ':taskId',
        component: TaskComponent
      },
    ]
}

The code above will load the tasks component as a child to task list component.

HTML I used a bootstrap 4 class.

<div class="container">
 <div class="lists"> Code for your task list </div>
 <div class="tasks">
   <router-outlet></router-outlet>
 </div>
</div>

CSS

This CSS is just an example, you should write according to the view you want.

 .lists {
   width: 50%;
   float: left;
  }
  .tasks{
   width: 50%;
   float: right;
  }

@media screen and (max-width: 600px) {
  .lists {
    display: none;
  }
  .tasks {
    width: 100%;
    float: none;
  }
}

You do not need to go back on mobile to view the task list. Create and Icon that will display the task list onClick();

Summary, treat the task list component as a sidebar, which is hidden on mobile and can be toggled.

I hope this helps.