-
Notifications
You must be signed in to change notification settings - Fork 0
018.3 Navigation aware typescript components for the First View ng bootstrap
chempkovsky edited this page Nov 20, 2022
·
1 revision
- Repeat all the steps of the article
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>
...
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>
...