feat(module: nav-bar): add icon string support (NG-ZORRO#38)

* feat(module: nav-bar): add icon string support * feat(module: nav-bar): add icon string support
fisherspy · Oct 12, 2018 · 4a89b0c · 4a89b0c
1 parent 0720fdc
commit 4a89b0c
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 6 deletions.
diff --git a/components/nav-bar/nav-bar.component.html b/components/nav-bar/nav-bar.component.html
@@ -1,7 +1,8 @@
 <div role="button" class="{{defaultProps.prefixCls}}-left" (click)="click($event)">
   <ng-template *ngIf="!isLeftContentString" [ngTemplateOutlet]="leftContent"></ng-template>
   <span *ngIf="icon" class="{{defaultProps.prefixCls}}-left-icon" aria-hidden="true">
-    <ng-template [ngTemplateOutlet]="icon"></ng-template>
+    <Icon *ngIf="isIconString" [type]="icon"></Icon>
+    <ng-template *ngIf="!isIconString" [ngTemplateOutlet]="icon"></ng-template>
   </span>
   {{isLeftContentString ? leftContent: null}}
 </div>

diff --git a/components/nav-bar/nav-bar.component.spec.ts b/components/nav-bar/nav-bar.component.spec.ts
@@ -64,7 +64,7 @@ describe('NavBarComponent', () => {
   >
     NavBar
   </Navbar>
-  <Navbar [leftContent]="'leftContent'" [rightContent]="'rightContent'">NavBar1</Navbar>
+  <Navbar [icon]="'left'" [leftContent]="'leftContent'" [rightContent]="'rightContent'">NavBar1</Navbar>
 
   <ng-template #icon>
     <Icon [type]="'left'"></Icon>

diff --git a/components/nav-bar/nav-bar.component.ts b/components/nav-bar/nav-bar.component.ts
@@ -11,10 +11,11 @@ export class NavBarComponent {
     onLeftClick: () => {}
   };
   navbarCls = {};
+  isIconString: boolean = true;
   isLeftContentString: boolean = true;
   isRightContentString: boolean = true;
 
-  private _icon: TemplateRef<any>;
+  private _icon: string | TemplateRef<any>;
   private _leftContent: string | TemplateRef<any>;
   private _rightContent: string | TemplateRef<any>;
 
@@ -25,10 +26,15 @@ export class NavBarComponent {
     this._amNavbardark = this.defaultProps.mode === 'dark';
   }
   @Input()
-  get icon(): TemplateRef<any> {
+  get icon(): string | TemplateRef<any> {
     return this._icon;
   }
-  set icon(value: TemplateRef<any>) {
+  set icon(value: string | TemplateRef<any>) {
+    if (value instanceof TemplateRef) {
+      this.isIconString = false;
+    } else {
+      this.isIconString = true;
+    }
     this._icon = value;
   }
   @Input()

diff --git a/components/nav-bar/nav-bar.module.ts b/components/nav-bar/nav-bar.module.ts
@@ -1,9 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { IconModule } from '../icon/icon.module';
 import { NavBarComponent } from './nav-bar.component';
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, IconModule],
   exports: [NavBarComponent],
   declarations: [NavBarComponent]
 })