Skip to content

Commit 75c2844

Browse files
desig9steindesig9stein
committed
Merge remote-tracking branch 'origin/mpopov/update-navdrawer-samples' into mpopov/update-navdrawer-samples
# Conflicts: # projects/app-lob/src/app/index/index.component.html # src/app/index/index.component.html # src/app/menus/navdrawer/nav-drawer-pin/nav-drawer-pin.component.html # src/app/menus/navdrawer/nav-drawer-routing/nav-drawer-routing.component.html # src/app/menus/navdrawer/nav-drawer-simple/nav-drawer-simple.component.html
2 parents 5711172 + 3462d5d commit 75c2844

File tree

5 files changed

+127
-146
lines changed

5 files changed

+127
-146
lines changed

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

Lines changed: 44 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,53 @@
11
<div class="wrapper" igxLayout>
2-
<igx-nav-drawer #navdrawer [enableGestures]="drawerState.enableGestures" [isOpen]="drawerState.open" [(pin)]="drawerState.pin"
3-
[position]="drawerState.position" [width]="drawerState.width" (opened)="refresh()" (closed)="refresh()">
4-
<ng-template igxDrawer>
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>
2+
<igx-nav-drawer #navdrawer [enableGestures]="drawerState.enableGestures" [isOpen]="drawerState.open" [(pin)]="drawerState.pin"
3+
[position]="drawerState.position" [width]="drawerState.width" (opened)="refresh()" (closed)="refresh()">
4+
<ng-template igxDrawer>
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>
88

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>
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>
1616

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-
@if (search.value.length > 0) {
24-
<igx-suffix (click)="clearSearchValue()">
25-
<igx-icon>clear</igx-icon>
26-
</igx-suffix>
27-
}
28-
</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>
2927

30-
@for (navItem of currentNavItems; track navItem) {
31-
<span>
32-
<!-- Header -->
33-
<span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" (click)="toggleParent('header' + navItem.name)">
34-
<button igxIconButton="flat" igxRipple [igxRippleCentered]="true" style="vertical-align: middle">
35-
<igx-icon family="material">{{convertNodeStateToIcon('header' + navItem.name)}}</igx-icon>
36-
</button>
37-
<span style="vertical-align: middle">{{navItem.name}}</span>
38-
</span>
39-
<!-- Children -->
40-
<span [id]="'header' + navItem.name" style="display:none">
41-
@for (routeItem of navItem.children; track routeItem) {
42-
<span [id]="'child' + routeItem.displayName" class="innerItem" igxDrawerItem igxRipple
43-
routerLink="{{routeItem.path}}" routerLinkActive="igx-nav-drawer__item--active">
44-
{{routeItem.displayName}}
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}}
41+
</span>
4542
</span>
46-
}
4743
</span>
48-
</span>
49-
}
50-
</ng-template>
51-
</igx-nav-drawer>
44+
</ng-template>
45+
</igx-nav-drawer>
5246

53-
<div igxFlex class="main">
54-
<igx-navbar [title]="selectedDisplayName" actionButtonIcon="menu" (action)="navdrawer.toggle()"></igx-navbar>
55-
<div class="content">
56-
<router-outlet></router-outlet>
47+
<div igxFlex class="main">
48+
<igx-navbar [title]="selectedDisplayName" actionButtonIcon="menu" (action)="navdrawer.toggle()"></igx-navbar>
49+
<div class="content">
50+
<router-outlet></router-outlet>
51+
</div>
5752
</div>
58-
</div>
5953
</div>

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

Lines changed: 48 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,58 @@
11
<div class="wrapper" igxLayout>
2-
<igx-nav-drawer #navdrawer [enableGestures]="drawerState.enableGestures" [isOpen]="drawerState.open" [(pin)]="drawerState.pin"
3-
[position]="drawerState.position" [width]="drawerState.width" (opened)="refresh()" (closed)="refresh()">
4-
<ng-template igxDrawer>
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>
2+
<igx-nav-drawer #navdrawer [enableGestures]="drawerState.enableGestures" [isOpen]="drawerState.open" [(pin)]="drawerState.pin"
3+
[position]="drawerState.position" [width]="drawerState.width" (opened)="refresh()" (closed)="refresh()">
4+
<ng-template igxDrawer>
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>
88

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>
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>
1414

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-
@if (search.value.length > 0) {
22-
<igx-suffix (click)="clearSearchValue()">
23-
<igx-icon>clear</igx-icon>
24-
</igx-suffix>
25-
}
26-
</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>
2725

28-
<igx-tree #tree>
29-
@for (item of currentNavItems; track item) {
30-
<igx-tree-node [data]="item.name">
31-
{{ item.name }}
32-
@for (route of item.children; track route) {
33-
<igx-tree-node [data]="route.displayName">
34-
<a igxTreeNodeLink [routerLink]="route.path">{{ route.displayName }}</a>
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>
31+
</igx-tree-node>
3532
</igx-tree-node>
36-
}
37-
</igx-tree-node>
38-
}
39-
</igx-tree>
33+
</igx-tree>
4034

41-
<!-- <span *ngFor="let navItem of currentNavItems">
35+
<!-- <span *ngFor="let navItem of currentNavItems">
4236
43-
<span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active navdrawer-ellipsis" (click)="toggleParent('header' + navItem.name)">
44-
<igx-icon family="material">{{convertNodeStateToIcon('header' + navItem.name)}}</igx-icon>
45-
<span class="navdrawer-ellipsis" style="vertical-align: middle">{{navItem.name}}</span>
46-
</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>
4741
48-
<span [id]="'header' + navItem.name" style="display:none">
49-
<span [id]="'child' + routeItem.displayName" class="innerItem navdrawer-ellipsis" *ngFor="let routeItem of navItem.children" igxDrawerItem igxRipple
50-
[routerLink]="routeItem.path" routerLinkActive="igx-nav-drawer__item--active">
51-
{{routeItem.displayName}}
52-
</span>
53-
</span>
54-
</span> -->
55-
</ng-template>
56-
</igx-nav-drawer>
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}}
46+
</span>
47+
</span>
48+
</span> -->
49+
</ng-template>
50+
</igx-nav-drawer>
5751

58-
<div igxFlex class="main">
59-
<igx-navbar [title]="selectedDisplayName" actionButtonIcon="menu" (action)="navdrawer.toggle()"></igx-navbar>
60-
<div class="content">
61-
<router-outlet></router-outlet>
62-
</div>
63-
</div>
52+
<div igxFlex class="main">
53+
<igx-navbar [title]="selectedDisplayName" actionButtonIcon="menu" (action)="navdrawer.toggle()"></igx-navbar>
54+
<div class="content">
55+
<router-outlet></router-outlet>
56+
</div>
57+
</div>
6458
</div>

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

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,20 @@
11
<div class="content-wrap" igxLayout>
2-
<igx-nav-drawer id="navigation" #drawer [isOpen]="true" [pin]="true" [pinThreshold]="0">
3-
<ng-template igxDrawer>
4-
<span igxDrawerItem [isHeader]="true">Components</span>
5-
6-
@for (item of navItems; track item) {
7-
<span igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
2+
<igx-nav-drawer id="navigation" #drawer [isOpen]="true" [pin]="true" [pinThreshold]="0">
3+
<ng-template igxDrawer>
4+
<span igxDrawerItem [isHeader]="true">Components</span>
5+
<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-
}
12-
</ng-template>
13-
</igx-nav-drawer>
9+
</ng-template>
10+
</igx-nav-drawer>
1411

15-
<main igxFlex>
16-
<!-- <button (click)="drawer.toggle()"> Menu </button> -->
17-
<span igxIconButton="flat" igxToggleAction="navigation">
18-
<igx-icon family="material">menu</igx-icon>
19-
</span>
12+
<main igxFlex>
13+
<!-- <button (click)="drawer.toggle()"> Menu </button> -->
14+
<span igxIconButton="flat" igxToggleAction="navigation">
15+
<igx-icon family="material">menu</igx-icon>
16+
</span>
2017

21-
<h5>{{selected}} content.</h5>
22-
</main>
18+
<h5>{{selected}} content.</h5>
19+
</main>
2320
</div>

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

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,23 @@
11
<div class="content-wrap">
2-
<igx-nav-drawer id="navigation" #drawer [isOpen]="true">
3-
<ng-template igxDrawer>
4-
<span igxDrawerItem [isHeader]="true">Components</span>
5-
6-
@for (item of componentLinks; track item) {
2+
<igx-nav-drawer id="navigation" #drawer [isOpen]="true">
3+
<ng-template igxDrawer>
4+
<span igxDrawerItem [isHeader]="true">Components</span>
75
<span
8-
igxDrawerItem
9-
igxRipple
10-
routerLink="{{item.link}}"
11-
routerLinkActive #rla="routerLinkActive"
12-
[active]="rla.isActive"
13-
>
14-
{{item.name}}
6+
igxDrawerItem
7+
igxRipple
8+
*ngFor="let item of componentLinks"
9+
routerLink="{{item.link}}"
10+
routerLinkActive #rla="routerLinkActive"
11+
[active]="rla.isActive"
12+
>
13+
{{item.name}}
1514
</span>
16-
}
17-
</ng-template>
18-
</igx-nav-drawer>
15+
</ng-template>
16+
</igx-nav-drawer>
1917

20-
<main>
21-
<span igxIconButton="flat" igxToggleAction="navigation">
22-
<igx-icon family="material">menu</igx-icon>
23-
</span>
24-
</main>
18+
<main>
19+
<span igxIconButton="flat" igxToggleAction="navigation">
20+
<igx-icon family="material">menu</igx-icon>
21+
</span>
22+
</main>
2523
</div>

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,10 @@
33
<ng-template igxDrawer>
44
<span igxDrawerItem [isHeader]="true">Components</span>
55

6-
@for (item of navItems; track item) {
7-
<span igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
8-
<igx-icon family="material">{{ item.name }}</igx-icon>
9-
<span>{{ item.text }}</span>
10-
</span>
11-
}
6+
<span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
7+
<igx-icon family="material">{{ item.name }}</igx-icon>
8+
<span>{{ item.text }}</span>
9+
</span>
1210
</ng-template>
1311
</igx-nav-drawer>
1412

0 commit comments

Comments
 (0)