Displaying Bootstrap Class In Angular NgFor NgStyle

Question

I have a header nav menu that I'm trying to display using a typescript object array using bootstrap. The issue I am having is that instead of displaying it horizontal as it does when hardcoded, the array causes it to display vertical. I'm sure it have something to do with the bootstrap classes, but I'm not sure how to fix it.

I guess I may have to use a attribute directive using ngStyle but again not sure how to get started! I tried this:

[ngClass]="button.class"

but got the same. I have view the "Similar questions" but not quite what I'm looking for. I have seen something like Angular Flex Layout but unfamiliar with it. Is it necessary to use the Angular Flex Layout to make this work?

---

<nav id="header-nav-container" class="btn btn-group navbar navbar-dark bg-primary container-fluid">
  <button id="header-nav-button-main" type="button" class="btn btn-primary font-weight-bolder bg-success" routerLink="/main">Main</button>
  <button id="header-nav-button-news" type="button" class="btn btn-primary font-weight-bold" routerLink="/news">News</button>
  <button id="header-nav-button-entertainment" type="button" class="btn btn-primary font-weight-bold" routerLink="/entertainment">Entertainment</button>
  <button id="header-nav-button-sports" type="button" class="btn btn-primary font-weight-bold" routerLink="/sports">Sports</button>
  <button id="header-nav-button-business" type="button" class="btn btn-primary font-weight-bold" routerLink="/business">Business</button>
  <button id="header-nav-button-society" type="button" class="btn btn-primary font-weight-bold" routerLink="/society">Society</button>
  <button id="header-nav-button-wellness" type="button" class="btn btn-primary font-weight-bold" routerLink="/wellness">Wellness</button>
  <button id="header-nav-button-food" type="button" class="btn btn-primary font-weight-bold" routerLink="/food">Food</button>
  <button id="header-nav-button-travel" type="button" class="btn btn-primary font-weight-bold" routerLink="/travel">Travel</button>
  <button id="header-nav-button-autos" type="button" class="btn btn-primary font-weight-bold" routerLink="/autos">Autos</button>
  <button id="header-nav-button-media" type="button" class="btn btn-primary font-weight-bold" routerLink="/media">Media</button>
</nav>

---

<nav *ngFor="let button of HeaderNavButton" id="header-nav-container" class="btn btn-group navbar navbar-dark bg-primary container-fluid">
    <button id="{{ button.id }}" type="button" class="{{ button.class }}" routerLink="{{ button.link }}">{{ button.text }}</button>
</nav>

---

public HeaderNavButton = [
{
    text: "main",
    link: "/main",
    id: "header-nav-button-main",
    class: "btn btn-primary font-weight-bold",
},
{
    text: "news",
    link: "/news",
    id: "header-nav-button-news",
    class: "btn btn-primary font-weight-bold",
},
{
    text: "entertainment",
    link: "/entertainment",
    id: "header-nav-button-entertainment",
    class: "btn btn-primary font-weight-bold",
},
{
    text: "sports",
    link: "/sports",
    id: "header-nav-button-sports",
    class: "btn btn-primary font-weight-bold",
},
{
    text: "business",
    link: "/business",
    id: "header-nav-button-business",
    class: "btn btn-primary font-weight-bold",
},
{
    text: "society",
    link: "/society",
    id: "header-nav-button-society",
    class: "btn btn-primary font-weight-bold",
},
{
    text: "wellness",
    link: "/wellness",
    id: "header-nav-button-wellness",
    class: "btn btn-primary font-weight-bold",
},
{
    text: "food",
    link: "/food",
    id: "header-nav-button-food",
    class: "btn btn-primary font-weight-bold",
},
{
    text: "travel",
    link: "/travel",
    id: "header-nav-button-travel",
    class: "btn btn-primary font-weight-bold",
},
{
    text: "autos",
    link: "/autos",
    id: "header-nav-button-autos",
    class: "btn btn-primary font-weight-bold",
},
{
    text: "media",
    link: "/media",
    id: "header-nav-button-media",
    class: "btn btn-primary font-weight-bold",
},

],

Answer 1

You are repeating the <nav> tag. You want to repeat the the <button> tags.

<nav id="header-nav-container" class="btn btn-group navbar navbar-dark bg-primary container-fluid">
     <button *ngFor="let button of HeaderNavButton" 
             id="{{ button.id }}" 
             type="button" 
             class="{{ button.class }}" 
             routerLink="{{ button.link }}">{{ button.text }}</button>
</nav>