I have a dashboard setup where the main component stays consistent across all pages, while another component, the load component, changes based on the router-outlet. My goal is to hide the "manage load" button in the dashboard component if I delete all loads in the manage load component. Despite my efforts and online research, I am unable to resolve this issue. Any assistance would be greatly appreciated. here is the HTML code for my dashboard component:
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 side-nav">
<div class="panel">
<div class="welcome">
<img src="assets/img/welcome.png" class="img-responsive" alt="">
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#side-navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="side-navbar">
<ul class="nav nav-pills nav-stacked btn-collpase panel_show collapse in">
<li routerLinkActive="active">
<a href="" routerLink="/dashboard">Dashboard</a>
</li>
<li routerLinkActive="active">
<a href="" routerLink="/dashboard/postLoad">Post Load</a>
</li>
<li *ngIf="this.loads.length > 0">
<a href="" routerLink="/dashboard/manageLoad">Manage Loads</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="col-lg-9">
<router-outlet></router-outlet>
</div>
</div>
<hr>
<div class="clearfix"></div>
</div>
And here is the TypeScript file for the dashboard component:
import { Component, OnInit } from '@angular/core';
import {TruckService} from "../services/truck.service";
import {LoadService} from "../services/load.service";
import {Observable} from "rxjs/Observable";
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
loads = [];
constructor(private loadService:LoadService) { }
ngOnInit() {
this.loadService.getLoads().subscribe(data=>{
this.loads = data;
console.log("load data is "+data);
});
}
}
Here is the HTML content for the manage load component:
<div *ngIf="loads.length > 0">
<h3>Your Loads</h3>
<table class="table-responsive table-stripped table-bordered tab" width="90%;">
<thead style="text-align: center;">
<tr style="padding: 5px;">
<td>From</td>
<td>To</td>
<td>Weight</td>
<td>Date</td>
<td>Action</td>
</tr>
</thead>
<tr style="height: 40px;text-align: center;vertical-align: middle;" *ngFor="let load of loads">
<td style="">{{load.from_name}}</td>
<td>{{load.to_name}}</td>
<td>{{getLoadWeight(load.truck_capacity_id)}}</td>
<td>{{ toDate(load.posted_at)}}</td>
<td><button class="btn btn-primary" routerLink="/dashboard/viewTrucks/{{load.id}}">View Trucks</button>
<button class="btn btn-danger" (click)="deleteLoad(load.id)">Delete Load</button>
</td>
</tr>
</table>
Any help with this issue would be greatly appreciated.