CODEWITHSUNDEEP
angulartwitter-bootstrapbootstrap-5primengnav
coder
coder

Reputation: 13250

Change class of Parent Component from Child Component

Dashboard.html

 <nav #nav>
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
      <button class="nav-link active" id="nav-categories-tab" data-bs-toggle="tab" data-bs-target="#nav-categories" type="button" role="tab" aria-controls="nav-categories" aria-selected="true" (click)="showCategories()" [ngClass]="currentClass">Categories</button>     
      <button class="nav-link" id="nav-product-lists-tab" data-bs-toggle="tab" data-bs-target="#nav-product-lists" type="button" role="tab" aria-controls="nav-product-lists" aria-selected="false"(click)="showProducts()" [ngClass]="currentClass">Products</button>
      <button class="nav-link" id="nav-product-details-tab" data-bs-toggle="tab" data-bs-target="#nav-product-details" type="button" role="tab" aria-controls="nav-product-details" aria-selected="false" (click)="showProductDetails()" [ngClass]="currentClass">Product Details</button>
     </div>
  </nav>

enter image description here This is my products tab.html

<div class="container">
<div class="list row ms-3">
    <div class="col-md-12">
            <p-table [value]="products" styleClass="p-datatable-striped">
                <ng-template pTemplate="header">
                    <tr>
                        <th>Name</th>
                        <th>Image</th>
                        <th>Category</th>
                        <th>Price</th>
                        <th>Actions</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-product>
                    <tr>
                        <td>{{product.title}}</td>
                        <td><img [src]="product.image" [alt]="product.title" width="100" class="shadow-4" /></td>
                        <td>{{product.category}}</td>
                        <td>{{product.price | currency:'USD'}}</td>
                        <td><a class="btn btn-outline-primary" (click)="getProductDetailsById(product,'product-details')">View</a></td>
                        <td><a class="btn btn-info" (click)="getProductById(product)">Edit</a></td>
                        <td><button class="btn btn-danger" (click)="deleteProduct(product)"> Delete</button></td>
                        </tr>
                </ng-template>
                <ng-template pTemplate="summary">
                    <div class="flex align-items-center justify-content-between">
                        In total there are {{products ? products.length : 0 }} products.
                    </div>
                </ng-template>
            </p-table>
    </div>
</div>

enter image description here

Now If I click view button it's navigating to product-details/1 but the tab is not active. So how do I access the nav button and add active class to it and make other buttons class inactive.

Upvotes: 1

Views: 75

Answers (1)

Daniil M.
Daniil M.

Reputation: 1

If you are using angular routing you can use [routerLinkActive] directive to pass class item to button where you have [routerLink] directive.

For example:

    <button
      [routerLinkActive]="'class-active'"
      [routerLink]="['product-details', id]">
      Product Details
    </button>

In this case you need to move out logic from showProductDetails() to use [routerLink] directive instead.

For more details see https://angular.io/api/router/RouterLinkActive#description

Upvotes: 0

Related Questions