Hiding an element on page load

Question

This question is a second part of Hide/show a table row when clicking on a link in Angular2

I am displaying all products on the page, but I also have a select dropdown to just show the individual product’s details. Lets say in the first page( All Products page), I expanded the first product. And then I go to the dropdown and select a product, so it displays that product’s details along with the inner table expanded - but with the details of the product expanded in the first page. I need to click on the link to get the correct product details -bcoz we do the hide and show on (click) event. So my question is -Is there a way to always collapse the link when going to a new page?

Adding the relevant code - html file

div class="table-responsive" *ngFor="let total of totals; let i=index">
<table class="table">
    <ng-container *ngIf="total">   
            <h4 class="productName">Product: {{total.projectGroup}}</h4>                
            <tr>
                <th>Total LOC</th>
                <th>Total Test Coverage</th>
                <th>Total Coverage on New Code</th>
                <th>Total Technical Debt</th>
                <th>Total Issues</th>
            </tr>        
            <tr>
                <td>{{total.totalLOC}}</td>
                <td>{{total.totalCoverage}}<</td>
                <td>{{total.totalNewCoverage}}</td>
                <td>{{total.totalTechDebtDays}}</td>
                <td><span *ngIf="total.totalCriticalIssues >= 0">Critical: </span>{{total.totalCriticalIssues}} <br/> <span *ngIf="total.totalNonCriticalIssues >= 0">Non-critical: </span>{{total.totalNonCriticalIssues}}</td>
            </tr>
            <tr>
                <td><a id="{{i}}" class ="a_link"  (click)="toggle[i]=!toggle[i]; expand(total.projectGroup, i)"> Expand/Collapse</a></td>
            </tr>
            <tr *ngIf="toggle[i]">                       
                <div class="table-responsive">
                    <table class="table" width="100%">
                        <tr class="table-header">
                            <th>Project Key</th>
                            <th>Quality Gate</th>
                            <th>LOC</th>
                            <th>Test Coverage</th>
                            <th>Coverage on New Code</th>
                            <th>Technical Debt</th>
                            <th>Issues</th>
                        </tr>  
                        <tr *ngFor="let pjt of indProjects[i]" class="table-condensed">
                            <td>{{pjt.projectKey}}</td>
                            <td>{{pjt.qualityGate}}</td>
                            <td>{{pjt.loc}}</td>
                            <td>{{pjt.coverage}}</td>
                            <td>{{pjt.newCoverage}}</td>
                            <td>{{pjt.techDebtDays}}</td>
                            <td><span *ngIf="pjt.criticalIssues >= 0">Critical: </span>{{pjt.criticalIssues}} <br/> <span *ngIf="pjt.nonCriticalIssues >= 0">Non-critical: </span>{{pjt.nonCriticalIssues}}</td>
                        </tr>
                    </table>
                </div>
            </tr>                
    </ng-container>
</table>

And the component.ts file

  expand(value, index) {
console.log("Product to be expanded="+value);    
return this.service.expandProduct(value)
.subscribe(response =>
  this.indProjects[index] = response.json().data
)

}

Just to try to understand your goal: what you basically want to do is when navigating away from the page, to reset the ‘expanded’ state of the link? — Hugo Noro, Feb 04 '18 at 20:22

score 1 · Answer 1 · answered Feb 04 '18 at 21:27

1

Considering you have the reference to toggle[] in your component, why don’t you reset all the expanded states upon destruction of the component?

I believe you could have something like

ngOnDestroy(): void {
    this.toggle = [];
}

Or if you want you could also run the toggle array and set false to each of the indexes.

answered Feb 04 '18 at 21:27

Hugo Noro

3,145
2
13
19

Instead of ngOnDestroy(), I had to reset the toggle array on the function that is called when an item in the dropdown is selected. – ljs Feb 04 '18 at 21:58
The suggestion for the destroy was regarding your question about doing it upon navigating to a new page. But it seems that it gave you an idea on how to solve it :). Good. – Hugo Noro Feb 04 '18 at 22:00

Hiding an element on page load

1 Answers1

Linked