Rework the avatar template to use templates. Remove unnecessary root …

…div element. #136
IgniteUI · Feb 9, 2018 · 794fa17 · 794fa17
1 parent 75fb610
commit 794fa17
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 10 deletions.
diff --git a/src/avatar/avatar.component.html b/src/avatar/avatar.component.html
@@ -1,13 +1,21 @@
-<div class="igx-avatar igx-avatar--{{size}}" aria-label="avatar" role="img">
-    <img #image *ngIf="src" src="{{src}}" class="igx-avatar--image igx-avatar--{{size}}" [class.igx-avatar--rounded]="isRounded"
-         [style.backgroundColor]="bgColor" [attr.aria-roledescription]="roleDescription" />
-        <svg #initialsImage *ngIf="initials && !src" xmlns="http://www.w3.org/2000/svg" [class.igx-avatar--rounded]="isRounded" [style.backgroundColor]="bgColor"
-            [attr.aria-roledescription]="roleDescription">
-            <text text-anchor="middle" />
-        </svg>
-    <span *ngIf="!src && !initials" class="igx-avatar--{{size}} igx-avatar--icon" [class.igx-avatar--rounded]="isRounded" [style.backgroundColor]="bgColor"
+<ng-template #imageTemplate>
+    <img #image src="{{src}}" class="igx-avatar--image igx-avatar--{{size}}" [class.igx-avatar--rounded]="isRounded" [style.backgroundColor]="bgColor"
+        [attr.aria-roledescription]="roleDescription" />
+</ng-template>
+
+<ng-template #initialsTemplate>
+    <svg #initialsImage xmlns="http://www.w3.org/2000/svg" [class.igx-avatar--rounded]="isRounded" [style.backgroundColor]="bgColor"
+        [attr.aria-roledescription]="roleDescription">
+        <text text-anchor="middle" />
+    </svg>
+</ng-template>
+
+<ng-template #iconTemplate>
+    <span class="igx-avatar--{{size}} igx-avatar--icon" [class.igx-avatar--rounded]="isRounded" [style.backgroundColor]="bgColor"
         [style.color]="color" [attr.aria-roledescription]="roleDescription">
         <igx-icon fontSet="material" [name]="icon"></igx-icon>
     </span>
-    <ng-content></ng-content>
-</div>
+</ng-template>
+
+<ng-container *ngTemplateOutlet="template"></ng-container>
+<ng-content></ng-content>
diff --git a/src/avatar/avatar.component.ts b/src/avatar/avatar.component.ts
@@ -4,9 +4,11 @@ import {
     AfterViewInit,
     Component,
     ElementRef,
+    HostBinding,
     Input,
     NgModule,
     Renderer2,
+    TemplateRef,
     ViewChild,
     ViewEncapsulation
 } from "@angular/core";
@@ -35,8 +37,19 @@ export class IgxAvatarComponent implements AfterViewInit, AfterContentChecked {
     public sizeEnum = Size;
     public roleDescription: string;
 
+    @ViewChild("imageTemplate", { read: TemplateRef }) protected imageTemplate: TemplateRef<any>;
+    @ViewChild("initialsTemplate", { read: TemplateRef }) protected initialsTemplate: TemplateRef<any>;
+    @ViewChild("iconTemplate", { read: TemplateRef }) protected iconTemplate: TemplateRef<any>;
+
     protected fontName = "Titillium Web";
 
+    @HostBinding("attr.aria-label") private ariaLabel = "avatar";
+    @HostBinding("attr.role") private role = "img";
+    @HostBinding("attr.class")
+    get classes() {
+        return "igx-avatar igx-avatar--" + this.size;
+    }
+
     private _size: string;
     private _bgColor: string;
     private _icon = "android";
@@ -73,6 +86,18 @@ export class IgxAvatarComponent implements AfterViewInit, AfterContentChecked {
         return this.roundShape.toUpperCase() === "TRUE" ? true : false;
     }
 
+    get template() {
+        if (this.src) {
+            return this.imageTemplate;
+        }
+
+        if (this.initials) {
+            return this.initialsTemplate;
+        }
+
+        return this.iconTemplate;
+    }
+
     @Input()
     public get icon(): string {
         return this._icon;