Angular4-Bootstrap4: Create subnav bar from navbar

Question

I'm trying to implement two layers of navbar, and second one becomes visible with its respective options on clicking a link in first nav bar.

I tried to implement it with id and data-target as explained in its documentation, but plugin doesn't seem to work and ngx-bootstrap has not yet developed module for navbar.

HTML

redbrocket · Accepted Answer

In your section where you have your subnav. Try to move the three nav lists into their own "collapse div". Like so:

When you click on a button that triggers the collapse function it only triggers the specified section. Therefore, if you show section A, and then click to show section B, A will still be there. To solve this, put in "*ngIf" on each section (like I've done above), the section A will then only be visible if a is set and same for C and B.

To make this work, make a simple function in your app.component.ts class:

setNav(s: string) {
    this.a = false;
    this.b = false;
    this.c = false;

    switch (s) {
      case 'a':
        this.a = true;
        break;
      case 'b':
        this.b = true;
        break;
      case 'c':
        this.c = true;
        break;
    }
  }

and then have click events on each of the buttons on the main nav:

The full HTML is then:

Hope it solved the problem.

Angular4-Bootstrap4: Create subnav bar from navbar

Answers (1)

Related Questions