How to hide a parent component from a child component?

Question

When my Angular application gets bootstrapped it uses my AppComponent which I have defined as follows:

AppComponent.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'rfq-app',
  templateUrl: "./app.component.html",
  styles: []
})

export class AppComponent {
    title = 'Test';
}

AppComponent.html:

<section>
    <div class="container">
        <div class="board">
            <div class="progressbar">
                <progress-bar></progress-bar>
            </div>

            <div class="tab-content">
                <router-outlet></router-outlet>
            </div>
        </div>
    </div>
</section>

I use the following routing definition defined in its own file:

export const appRoutes: Routes = [
    { path: 'product/:code', component: ProductComponent  },
    { path: 'personal', component: PersonalComponent, canActivate: [WorkflowGuard] },
    { path: 'supplier', component: SupplierComponent, canActivate: [WorkflowGuard] },
    { path: 'summary', component: SummaryComponent, canActivate: [WorkflowGuard] },
    { path: 'products', component: ProductFilterComponent },
];

This has been working perfectly. I can navigate to the routes and the components will be loaded just as I want. However, when I added the last route:

{ path: 'products', component: ProductFilterComponent }

I do not want to show the <progress-bar> component used in AppComponent.html in this case. In fact, I only want to show the <progress-bar> when I navigate to one of the four first components (part of a multistep form), so that's ProductComponent, PersonalComponent, SupplierComponent, SummaryComponent .

For all other routes (there's only one other at the moment: ProductFilterComponent ), I want to just show the component without the <progress-bar> .

In my ProductFilterComponent I have tried to do the following:

@Component({
    selector: 'product-filter',
    templateUrl: './productfilter.component.html',
    styleUrls: ['./productfilter.component.css']
})

and in the css stylesheet I have added

.progressbar {
    display: none;
}

in order to hide the div containing the progress bar. If I do this directly from the browser dev tools, then it hides it, but it seems like I can't get this css applied from the ProductFilterComponent .

I'm launching the Angular application from my Asp net core backend by including it in a razor view:

Index.cshtml

@section Scripts {
    <script src="~/ClientApp/dist/inline.bundle.js"></script>
    <script src="~/ClientApp/dist/polyfills.bundle.js"></script>
    <script src="~/ClientApp/dist/styles.bundle.js"></script>
    <script src="~/ClientApp/dist/vendor.bundle.js"></script>
    <script src="~/ClientApp/dist/main.bundle.js"></script>
}

<rfq-app></rfq-app>

---

So I have two questions:

1. Is there a quick easy way to hide the progress bar?
2. I feel like the design of my Angular application is not right. The progress bar sits on a too high level. But I'm unsure how to take it a level down so only some components make use of it. Should I change my design, if yes what's the right way to do it?

Answer 1

I think you need a simple service for this:

@Injectable()
export class LoadingService {
    $loading: BehaviourSubject<boolean> = new BehaviourSubject(true);

    constructor(){}

    public startLoading(): void {
        this.$loading.next(true);
    }

    public stopLoading(): void {
        this.$loading.next(false);
    }
}

Provide and Inject this service and call startLoading and stopLoading whenever you want.

AppComponent

<div *ngIf="loadingService.$loading | async" class="progressbar">
    <progress-bar></progress-bar>
</div>