018.3 Navigation aware typescript components for the First View ng bootstrap - chempkovsky/CS82ANGULAR GitHub Wiki

Note

Note

  • Repeat all the steps of the article

Instead of

  • 02020-Rdl.json
  • You should use
    • 02020-Rdl.bootstrap.json

Instead of code of the paragraph 08 Modify AppComponentHtml file

  • You should modify app.component.html file as follows
...

<div class="mt-5 pt-1" style="display:flex;flex-direction:row;background-color: lavender" >
  <div  style="min-height: 0px; max-height: calc(94.9vh); overflow-y: auto;" [ngbCollapse]="isSideBarCollapsed">  
    <nav class="navbar bg-light">
      <ul ngbNav  orientation="vertical">
        <li [ngbNavItem] >
          <a ngbNavLink routerLink="/home" routerLinkActive="active">  <i class="material-icons" type="button">home</i> Home </a> 
        </li>      
        <li [ngbNavItem] >
        <a ngbNavLink routerLink="['RDLPhbkPhoneTypeView']" routerLinkActive="active">List of Phone Types (Dlg)</a>
        </li>      
        <li [ngbNavItem] >
        <a ngbNavLink routerLink="['PhbkPhoneTypeView']" routerLinkActive="active">List of Phone Types</a>
        </li>      
      </ul>
    </nav>
  </div>

...

Instead of

  • 01960-Rv.json
  • 01962-Ra.json
  • 01964-Ru.json
  • 01966-Rd.json
  • 01968-Rl.json
  • You should use
    • 01960-Rv.bootstrap.json
    • 01962-Ra.bootstrap.json
    • 01964-Ru.bootstrap.json
    • 01966-Rd.bootstrap.json
    • 01968-Rl.bootstrap.json

Instead of code of the paragraph 11 Modify AppComponentHtml file

  • You should modify app.component.html file as follows
...
<div class="mt-5 pt-1" style="display:flex;flex-direction:row;background-color: lavender" >
  <div  style="min-height: 0px; max-height: calc(94.9vh); overflow-y: auto;" [ngbCollapse]="isSideBarCollapsed">  
    <nav class="navbar bg-light">
      <ul ngbNav  orientation="vertical">
        <li [ngbNavItem] >
          <a ngbNavLink routerLink="/home" routerLinkActive="active">  <i class="material-icons" type="button">home</i> Home </a> 
        </li>      
        <li [ngbNavItem] >
        <a ngbNavLink routerLink="['RDLPhbkPhoneTypeView']" routerLinkActive="active">List of Phone Types (Dlg)</a>
        </li>      
        <li [ngbNavItem] >
        <a ngbNavLink routerLink="['PhbkPhoneTypeView']" routerLinkActive="active">List of Phone Types</a>
        </li>      
      </ul>
    </nav>
  </div>
...
⚠️ **GitHub.com Fallback** ⚠️