CODEWITHSUNDEEP
angularstaterouter
Vitmar Aliaga
Vitmar Aliaga

Reputation: 35

Current status is in root component respect module child in lazy loading router in Angular

I have this code in my router config

path: 'printing-documents',
    component: PrintingDocumentsContentComponent,
    children: [
      {
        path: '',
        component: PrintingDocumentsHomeComponent,
      },
      {
        path: 'new',
        component: PrintingDocumentsNewComponent,
      },
      {
        path: ':id',
        component: PrintingDocumentsEditComponent,
      },
    ],

and in my PrintingDocumentsContentComponent i have this code html 

<nb-card>
  <nb-card-header>
    <a class="btn btn-light lamb-button" (click)="onBack()">
      <span class="fa fa-undo lamb-icon" > </span>
    </a>
    {{ titleContainer }}
  </nb-card-header>
  <nb-card-body>
    <router-outlet></router-outlet>
  </nb-card-body>
</nb-card>

i need is that when route is http://localhost:4200/#/lamb/accounting/configuration/printing-documents the button **back()**this hidden. but when is http://localhost:4200/#/lamb/accounting/configuration/printing-documents/new or http://localhost:4200/#/lamb/accounting/configuration/printing-documents/15 the button is show.

I know I must do something in the method ngOnInit () of the PrintingDocumentsContentComponent with the dependenciesActivatedRoute or Router but I do not know what.

i will be grateful

Upvotes: 0

Views: 42

Answers (1)

S K
S K

Reputation: 452

You can do this by checking last segment of current route.You need to import ActivatedRoute, UrlSegment and use within your component.

In your PrintingDocumentsContentComponent.component.ts add below code

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

let flag:boolean=false;
constructor(private route: ActivatedRoute)

ngOnInit() {

    const url: UrlSegment[] = this.route.snapshot.url;

    if(url[0].path=='printing-documents'){
      this.flag = true
    }
     else {
      this.flag = false
     }

In PrintingDocumentsContentComponent.component.html

<a class="btn btn-light lamb-button" *ngIf="!flag" (click)="onBack()">
    <span class="fa fa-undo lamb-icon" ></span>
  </a>

Upvotes: 1

Related Questions