fix(avatar): src with null value throws error (#15131)

Author: SisIvanova

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

@@ -170,6 +170,28 @@ describe('Avatar', () => {
 
         expect(instance.src).toEqual("/assets/Test%20-%2017.jpg");
     });
+
+    it('should not throw error if src is null', () => {
+        const fixture = TestBed.createComponent(InitImageAvatarComponent);
+        fixture.detectChanges();
+        expect(() => {
+            const instance = fixture.componentInstance.avatar;
+            instance.src = null;
+            fixture.detectChanges();
+        }).not.toThrow();
+    });
+
+    it('avatar with [src] and fallback [initials] should not throw error if src is null', () => {
+        const fixture = TestBed.createComponent(AvatarWithAttribsComponent);
+        fixture.detectChanges();
+        const instance = fixture.componentInstance.avatar;
+        expect(instance.type).toEqual(IgxAvatarType.INITIALS);
+        expect(instance.initials).toEqual('ZK');
+        expect(() => {
+            instance.src = null;
+            fixture.detectChanges();
+        }).not.toThrow();
+    });
 });
 
 @Component({

projects/igniteui-angular/src/lib/core/utils.ts

@@ -655,6 +655,6 @@ export function getComponentCssSizeVar(size: string) {
  * @param path - The URI path to be normalized.
  * @returns string encoded using the encodeURI function.
  */
- export function normalizeURI(path: string) {
-     return path.split('/').map(encodeURI).join('/');
- }
+export function normalizeURI(path: string) {
+    return path?.split('/').map(encodeURI).join('/');
+}

src/app/avatar/avatar.sample.html

@@ -62,7 +62,7 @@ <h4 class="sample-title">Square Avatars</h4>
 
             <igx-avatar initials="AZ" size="medium"></igx-avatar>
 
-            <igx-avatar initials="AZ" size="large"></igx-avatar>
+            <igx-avatar [src]="null" initials="AZ" size="large"></igx-avatar>
 
             <igx-avatar src="assets/images/avatar/18.jpg" size="small"></igx-avatar>