#Route Navigation

10 messages · Page 1 of 1 (latest)

terse shadow
#

My problem is I have a component add-task in this add task component i have two components inside in it new task and new Activities if I route from dashboard component it is routing to add task component like my functionality is if I press ctrl+A from dashboard it navigates to add task component inside in it have add-new-task component likewise from dashboard if I click ctrl+L it navigates to add-task component inside in it add-new-activities but if I click ctrl+A from add-new-activities it doesn't not navigate to add-task like same if I click ctrl+L from app-add-task it does not navigate to app-new- activities this is my problem

app-add-task component html 

<app-new-task></app-new-task>
<app-new-activities></app-new-activities> 

app-add-task.ts 

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-add-task',
  templateUrl: './add-task.component.html',
  styleUrls: ['./add-task.component.css']
})
export class AddTaskComponent implements AfterViewInit {


  ngAfterViewInit() {
    setTimeout(() => {
      if (history.state.focusOnNewActivities) {
        this.focusOnNewActivities();
      }
      if (history.state.id) {
        console.log('Navigated with ID:', history.state.id);
      }
    }, 0);
  }

  focusOnNewTasks() {
    const element = document.getElementById('new-focus-task');
    if (element) {
      element.focus();
    } else {
      console.error('Unable to focus: title element not found');
    }
  }
  focusOnNewActivities() {
    const element = document.getElementById('title');
    if (element) {
      element.focus();
    } else {
      console.error('Unable to focus: title element not found');
    }
  }
}```
brittle crown
#

Well that's a mouthful

#

Is there a reason for the new activities and new task to be in the same component

#

If there is no use case when they are rendered at the same time I think there is no need to have them in the same component

#

If that is the case you could just use a <router-outlet> and have a different route for them

terse shadow
#

Yes they have to be they are two components display in a single page

terse shadow
brittle crown
#

ok in your parent component you put this

<router-outlet></router-outlet>
#

are you using standalone components?

terse shadow