CODEWITHSUNDEEP
angularif-statementconditional-statementsrouterangular-routing
Md. Abu Sayed
Md. Abu Sayed

Reputation: 2486

how to check active child router from parent router or parent router against?

How to possible check Children Router Active Or Not, Show The status true or false in angular 4,
Now currently I'm use : /* @angular/cli: 1.4.4 node: 8.6.0 typescript: 2.3.4 @angular/router: 4.4.4 */

my Parent route is:

const routes:Routes=[
    {
        path: '', component: SummaryOfFindingsComponent,
        children:[
            {
                path:'data-time-frame', component: DataTimeFrameComponent
            },
            {
                path:'email-address', component: EmailAddressesComponent
            },
            {
                path:'repair-orders', component: RepairOrdersComponent
            },
            {
                path:'total-records', component:TotalRecordsComponent
            },
            {
                path:'unique-households', component: UniqueHouseholdsComponent
            },
            {
                path:'unique-vins', component: UniqueVinsComponent
            }
        ]
    }
]

Parent component is :

export class SummaryOfFindingsComponent implements OnInit {
    isUserSelected;
    constructor() { this.isUserSelected=false; }
    ngOnInit() { }
    isUserItemSelect(){
        this.isUserSelected=true;
    }
}

Upvotes: 7

Views: 11982

Answers (3)

Martin
Martin

Reputation: 16292

I needed a simple Observable solution that would emit false when no child routes were active.

Went with:


  constructor(
    private router: Router,
    private route: ActivatedRoute
  ) {}

  readonly childActive$ = this.router.events.pipe(
    switchMap(() => of(this.route.children.length > 0))
  );

Upvotes: 4

Jeff Barnes
Jeff Barnes

Reputation: 399

Here is a way to watch for children in an Observable...

this.router.events.pipe(
  filter(event => event instanceof ActivationEnd),
  filter(event => (event as ActivationEnd).snapshot.component === SearchFeatureComponent),
  map(event => (event as ActivationEnd).snapshot.children.length),
  distinctUntilChanged()
).subscribe(children => console.warn('route children', children))

Upvotes: 7

santo islam
santo islam

Reputation: 146

Import your parent component.ts

import { ActivatedRoute } from '@angular/router';

and life cycle hooks ngOnInit() And create Refarence Of ActivatedRoute 

constructor(private activeRouter:ActivatedRoute) {}

And Write Some code in your ngOnInit functions here..

ngOnInit() {
    var _activeChild = this.activeRouter.children.length;
    if (_activeChild!=0) {
        //your active children 1 or more than children then active 1,otherwise it is 0
    }
}

Note: This code is working my app ( Thank You )

Upvotes: 12

Related Questions