Skip to content

Commit 714ba82

Browse files
desig9steindesig9stein
committed
refactor(navigation-drawer): remove nav tag since it is added from the component itself
1 parent e3f4262 commit 714ba82

File tree

5 files changed

+72
-84
lines changed

5 files changed

+72
-84
lines changed

‎projects/app-lob/src/app/index/index.component.html

+34-36
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,45 @@
22
<igx-nav-drawer #navdrawer [enableGestures]="drawerState.enableGestures" [isOpen]="drawerState.open" [(pin)]="drawerState.pin"
33
[position]="drawerState.position" [width]="drawerState.width" (opened)="refresh()" (closed)="refresh()">
44
<ng-template igxDrawer>
5-
<nav>
6-
<div class="nav-header">
7-
<img class="logo" src="assets/images/rsrcs/igniteui-angular_logo.svg" alt="Ignite UI for Angular Logo">
8-
</div>
5+
<div class="nav-header">
6+
<img class="logo" src="assets/images/rsrcs/igniteui-angular_logo.svg" alt="Ignite UI for Angular Logo">
7+
</div>
98

10-
<!-- Home -->
11-
<span igxDrawerItem igxRipple routerLink="{{homeRouteItem.path}}" routerLinkActive="igx-nav-drawer__item--active">
12-
<button igxIconButton="flat" igxRipple [igxRippleCentered]="true">
13-
<igx-icon family="material">home</igx-icon>
14-
</button>
15-
{{homeRouteItem.displayName}}
16-
</span>
9+
<!-- Home -->
10+
<span igxDrawerItem igxRipple routerLink="{{homeRouteItem.path}}" routerLinkActive="igx-nav-drawer__item--active">
11+
<button igxIconButton="flat" igxRipple [igxRippleCentered]="true">
12+
<igx-icon family="material">home</igx-icon>
13+
</button>
14+
{{homeRouteItem.displayName}}
15+
</span>
1716

18-
<!-- Search -->
19-
<igx-input-group type="search" class="searchGroup">
20-
<igx-prefix>
21-
<igx-icon>search</igx-icon>
22-
</igx-prefix>
23-
<input #search igxInput placeholder="Search samples" [(ngModel)]="searchValue" (ngModelChange)="searchValueChanged()">
24-
<igx-suffix *ngIf="search.value.length > 0" (click)="clearSearchValue()">
25-
<igx-icon>clear</igx-icon>
26-
</igx-suffix>
27-
</igx-input-group>
17+
<!-- Search -->
18+
<igx-input-group type="search" class="searchGroup">
19+
<igx-prefix>
20+
<igx-icon>search</igx-icon>
21+
</igx-prefix>
22+
<input #search igxInput placeholder="Search samples" [(ngModel)]="searchValue" (ngModelChange)="searchValueChanged()">
23+
<igx-suffix *ngIf="search.value.length > 0" (click)="clearSearchValue()">
24+
<igx-icon>clear</igx-icon>
25+
</igx-suffix>
26+
</igx-input-group>
2827

29-
<span *ngFor="let navItem of currentNavItems">
30-
<!-- Header -->
31-
<span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" (click)="toggleParent('header' + navItem.name)">
32-
<button igxIconButton="flat" igxRipple [igxRippleCentered]="true" style="vertical-align: middle">
33-
<igx-icon family="material">{{convertNodeStateToIcon('header' + navItem.name)}}</igx-icon>
34-
</button>
35-
<span style="vertical-align: middle">{{navItem.name}}</span>
36-
</span>
37-
<!-- Children -->
38-
<span [id]="'header' + navItem.name" style="display:none">
39-
<span [id]="'child' + routeItem.displayName" class="innerItem" *ngFor="let routeItem of navItem.children" igxDrawerItem igxRipple
40-
routerLink="{{routeItem.path}}" routerLinkActive="igx-nav-drawer__item--active">
41-
{{routeItem.displayName}}
42-
</span>
28+
<span *ngFor="let navItem of currentNavItems">
29+
<!-- Header -->
30+
<span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" (click)="toggleParent('header' + navItem.name)">
31+
<button igxIconButton="flat" igxRipple [igxRippleCentered]="true" style="vertical-align: middle">
32+
<igx-icon family="material">{{convertNodeStateToIcon('header' + navItem.name)}}</igx-icon>
33+
</button>
34+
<span style="vertical-align: middle">{{navItem.name}}</span>
35+
</span>
36+
<!-- Children -->
37+
<span [id]="'header' + navItem.name" style="display:none">
38+
<span [id]="'child' + routeItem.displayName" class="innerItem" *ngFor="let routeItem of navItem.children" igxDrawerItem igxRipple
39+
routerLink="{{routeItem.path}}" routerLinkActive="igx-nav-drawer__item--active">
40+
{{routeItem.displayName}}
4341
</span>
4442
</span>
45-
</nav>
43+
</span>
4644
</ng-template>
4745
</igx-nav-drawer>
4846

‎src/app/index/index.component.html

+36-38
Original file line numberDiff line numberDiff line change
@@ -2,52 +2,50 @@
22
<igx-nav-drawer #navdrawer [enableGestures]="drawerState.enableGestures" [isOpen]="drawerState.open" [(pin)]="drawerState.pin"
33
[position]="drawerState.position" [width]="drawerState.width" (opened)="refresh()" (closed)="refresh()">
44
<ng-template igxDrawer>
5-
<nav>
6-
<div class="nav-header">
7-
<img class="logo" src="assets/images/rsrcs/igniteui-angular_logo.svg" alt="Ignite UI for Angular Logo">
8-
</div>
5+
<div class="nav-header">
6+
<img class="logo" src="assets/images/rsrcs/igniteui-angular_logo.svg" alt="Ignite UI for Angular Logo">
7+
</div>
98

10-
<!-- Home -->
11-
<span igxDrawerItem igxRipple [routerLink]="homeRouteItem.path" routerLinkActive="igx-nav-drawer__item--active">
12-
<igx-icon family="material">home</igx-icon>
13-
<span>{{homeRouteItem.displayName}}</span>
14-
</span>
9+
<!-- Home -->
10+
<span igxDrawerItem igxRipple [routerLink]="homeRouteItem.path" routerLinkActive="igx-nav-drawer__item--active">
11+
<igx-icon family="material">home</igx-icon>
12+
<span>{{homeRouteItem.displayName}}</span>
13+
</span>
1514

16-
<!-- Search -->
17-
<igx-input-group type="search" class="searchGroup">
18-
<igx-prefix>
19-
<igx-icon>search</igx-icon>
20-
</igx-prefix>
21-
<input #search igxInput placeholder="Search samples" (focus)="createSearchSub(search)" [(ngModel)]="searchValue">
22-
<igx-suffix *ngIf="search.value.length > 0" (click)="clearSearchValue()">
23-
<igx-icon>clear</igx-icon>
24-
</igx-suffix>
25-
</igx-input-group>
15+
<!-- Search -->
16+
<igx-input-group type="search" class="searchGroup">
17+
<igx-prefix>
18+
<igx-icon>search</igx-icon>
19+
</igx-prefix>
20+
<input #search igxInput placeholder="Search samples" (focus)="createSearchSub(search)" [(ngModel)]="searchValue">
21+
<igx-suffix *ngIf="search.value.length > 0" (click)="clearSearchValue()">
22+
<igx-icon>clear</igx-icon>
23+
</igx-suffix>
24+
</igx-input-group>
2625

27-
<igx-tree #tree>
28-
<igx-tree-node [data]="item.name" *ngFor="let item of currentNavItems">
29-
{{ item.name }}
30-
<igx-tree-node [data]="route.displayName" *ngFor="let route of item.children">
31-
<a igxTreeNodeLink [routerLink]="route.path">{{ route.displayName }}</a>
32-
</igx-tree-node>
26+
<igx-tree #tree>
27+
<igx-tree-node [data]="item.name" *ngFor="let item of currentNavItems">
28+
{{ item.name }}
29+
<igx-tree-node [data]="route.displayName" *ngFor="let route of item.children">
30+
<a igxTreeNodeLink [routerLink]="route.path">{{ route.displayName }}</a>
3331
</igx-tree-node>
34-
</igx-tree>
32+
</igx-tree-node>
33+
</igx-tree>
3534

36-
<!-- <span *ngFor="let navItem of currentNavItems">
35+
<!-- <span *ngFor="let navItem of currentNavItems">
3736
38-
<span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active navdrawer-ellipsis" (click)="toggleParent('header' + navItem.name)">
39-
<igx-icon family="material">{{convertNodeStateToIcon('header' + navItem.name)}}</igx-icon>
40-
<span class="navdrawer-ellipsis" style="vertical-align: middle">{{navItem.name}}</span>
41-
</span>
37+
<span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active navdrawer-ellipsis" (click)="toggleParent('header' + navItem.name)">
38+
<igx-icon family="material">{{convertNodeStateToIcon('header' + navItem.name)}}</igx-icon>
39+
<span class="navdrawer-ellipsis" style="vertical-align: middle">{{navItem.name}}</span>
40+
</span>
4241
43-
<span [id]="'header' + navItem.name" style="display:none">
44-
<span [id]="'child' + routeItem.displayName" class="innerItem navdrawer-ellipsis" *ngFor="let routeItem of navItem.children" igxDrawerItem igxRipple
45-
[routerLink]="routeItem.path" routerLinkActive="igx-nav-drawer__item--active">
46-
{{routeItem.displayName}}
47-
</span>
42+
<span [id]="'header' + navItem.name" style="display:none">
43+
<span [id]="'child' + routeItem.displayName" class="innerItem navdrawer-ellipsis" *ngFor="let routeItem of navItem.children" igxDrawerItem igxRipple
44+
[routerLink]="routeItem.path" routerLinkActive="igx-nav-drawer__item--active">
45+
{{routeItem.displayName}}
4846
</span>
49-
</span> -->
50-
</nav>
47+
</span>
48+
</span> -->
5149
</ng-template>
5250
</igx-nav-drawer>
5351

‎src/app/menus/navdrawer/nav-drawer-pin/nav-drawer-pin.component.html

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
<div class="content-wrap" igxLayout>
22
<igx-nav-drawer id="navigation" #drawer [isOpen]="true" [pin]="true" [pinThreshold]="0">
33
<ng-template igxDrawer>
4-
<nav>
54
<span igxDrawerItem [isHeader]="true">Components</span>
6-
75
<span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
86
<igx-icon family="material">{{ item.name }}</igx-icon>
97
<span>{{ item.text }}</span>
108
</span>
11-
</nav>
129
</ng-template>
1310
</igx-nav-drawer>
1411

@@ -20,4 +17,4 @@
2017

2118
<h5>{{selected}} content.</h5>
2219
</main>
23-
</div>
20+
</div>

‎src/app/menus/navdrawer/nav-drawer-routing/nav-drawer-routing.component.html

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
<div class="content-wrap">
22
<igx-nav-drawer id="navigation" #drawer [isOpen]="true">
33
<ng-template igxDrawer>
4-
<nav>
54
<span igxDrawerItem [isHeader]="true">Components</span>
6-
75
<span
86
igxDrawerItem
97
igxRipple
@@ -14,7 +12,6 @@
1412
>
1513
{{item.name}}
1614
</span>
17-
</nav>
1815
</ng-template>
1916
</igx-nav-drawer>
2017

@@ -23,4 +20,4 @@
2320
<igx-icon family="material">menu</igx-icon>
2421
</span>
2522
</main>
26-
</div>
23+
</div>

‎src/app/menus/navdrawer/nav-drawer-simple/nav-drawer-simple.component.html

-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
<div class="content-wrap">
22
<igx-nav-drawer id="navigation" #drawer [isOpen]="true" [pinThreshold]="5000">
33
<ng-template igxDrawer>
4-
<nav>
54
<span igxDrawerItem [isHeader]="true">Components</span>
65

76
<span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
87
<igx-icon family="material">{{ item.name }}</igx-icon>
98
<span>{{ item.text }}</span>
109
</span>
11-
</nav>
1210
</ng-template>
1311
</igx-nav-drawer>
1412

0 commit comments

Comments
 (0)