Merge pull request #7014 from IgniteUI/jcoitino/app-builder-fixes

fix(avatar): Make Avatar.size bindable #7013

Author: simeonoff

projects/igniteui-angular/src/lib/avatar/avatar.component.spec.ts

@@ -81,12 +81,12 @@ describe('Avatar', () => {
         instance.size = IgxAvatarSize.MEDIUM;
         fixture.detectChanges();
         expect(instance.size).toEqual(IgxAvatarSize.MEDIUM);
-        expect(hostEl.classList).not.toContain(classes.medium);
+        expect(hostEl.classList).toContain(classes.medium);
 
         instance.size = IgxAvatarSize.LARGE;
         fixture.detectChanges();
         expect(instance.size).toEqual(IgxAvatarSize.LARGE);
-        expect(hostEl.classList).not.toContain(classes.large);
+        expect(hostEl.classList).toContain(classes.large);
 
         instance.size = 'nonsense' as any;
         fixture.detectChanges();

projects/igniteui-angular/src/lib/avatar/avatar.component.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
 import {
-    AfterViewInit,
     Component,
     ElementRef,
     HostBinding,
@@ -53,7 +52,7 @@ export enum IgxAvatarType {
     selector: 'igx-avatar',
     templateUrl: 'avatar.component.html'
 })
-export class IgxAvatarComponent implements OnInit, AfterViewInit {
+export class IgxAvatarComponent implements OnInit {
 
     /**
      * This is a reference to the avatar image element in the DOM.
@@ -256,6 +255,22 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
         }
     }
 
+    /** @hidden @internal */
+    @HostBinding('class.igx-avatar--small')
+    get _isSmallSize(): boolean {
+        return this.size === 'small';
+    }
+    /** @hidden @internal */
+    @HostBinding('class.igx-avatar--medium')
+    get _isMediumSize(): boolean {
+        return this.size === 'medium';
+    }
+    /** @hidden @internal */
+    @HostBinding('class.igx-avatar--large')
+    get _isLargeSize(): boolean {
+        return this.size === 'large';
+    }
+
     /**
      * Returns the type of the avatar.
      *
@@ -280,6 +295,22 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
         return IgxAvatarType.CUSTOM;
     }
 
+    /** @hidden @internal */
+    @HostBinding('class.igx-avatar--image')
+    get _isImageType(): boolean {
+        return this.type === IgxAvatarType.IMAGE;
+    }
+    /** @hidden @internal */
+    @HostBinding('class.igx-avatar--icon')
+    get _isIconType(): boolean {
+        return this.type === IgxAvatarType.ICON;
+    }
+    /** @hidden @internal */
+    @HostBinding('class.igx-avatar--initials')
+    get _isInitialsType(): boolean {
+        return this.type === IgxAvatarType.INITIALS;
+    }
+
     /**
      * Returns the template of the avatar.
      *
@@ -306,15 +337,6 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
         this.roleDescription = this.getRole();
     }
 
-    /** @hidden @internal */
-    public ngAfterViewInit() {
-        if (this.type !== IgxAvatarType.CUSTOM) {
-            this.elementRef.nativeElement.classList.add(`igx-avatar--${this.type}`);
-        }
-
-        this.elementRef.nativeElement.classList.add(`igx-avatar--${this._size}`);
-    }
-
     /** @hidden @internal */
     private getRole(): string {
         switch (this.type) {