fix avatar onChange state

umutyerebakmaz · Oct 23, 2023 · 7c71d65 · 7c71d65
1 parent 69f5027
commit 7c71d65
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 20 deletions.
diff --git a/libs/avatar/package.json b/libs/avatar/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ngx-bio-components/avatar",
-    "version": "0.0.14",
+    "version": "0.0.15",
     "license": "MIT",
     "author": "Umut Yerebakmaz <[email protected]> (https://github.com/umutyerebakmaz)",
     "repository": {

diff --git a/libs/avatar/src/lib/components/avatar/avatar.component.html b/libs/avatar/src/lib/components/avatar/avatar.component.html
@@ -1,11 +1,16 @@
 <div class="bio-avatar">
-
     <div *ngIf="avatar.placeholder; else image" class="placeholder-container" [ngClass]="addPlaceHolderContainerClass">
         <span class="placeholder-text" [ngClass]="addPlaceHolderTextClass">{{ avatar.placeholder }}</span>
     </div>
 
     <ng-template #image>
-        <img *ngIf="avatar.img; else icon" class="avatar-image" [ngClass]="addImageAndIconClass" [src]="avatar.img" [alt]="avatar.alt"/>
+        <img
+            *ngIf="avatar.img; else icon"
+            class="avatar-image"
+            [ngClass]="addImageAndIconClass"
+            [src]="src"
+            [alt]="avatar.alt"
+        />
     </ng-template>
 
     <ng-template #icon>

diff --git a/libs/avatar/src/lib/components/avatar/avatar.component.stories.ts b/libs/avatar/src/lib/components/avatar/avatar.component.stories.ts
@@ -17,8 +17,7 @@ export const primary = {
             badgeColor: 'green',
             badgePosition: 'topRight',
             path: 'http://localhost:4000/images/users/',
-            img: '28b4bf01-a067-46cb-9244-c55809608727.jpg',
-            placeholder: 'IO',
+            img: 'ecefa734-6a02-47dc-ae56-67102a8627ca.jpg',
         }
     }
 }
diff --git a/libs/avatar/src/lib/components/avatar/avatar.component.ts b/libs/avatar/src/lib/components/avatar/avatar.component.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, Input, OnInit } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, OnInit, SimpleChanges } from '@angular/core';
 
 export type Avatar = {
     shape?: 'circular' | 'rounded';
@@ -20,24 +20,15 @@ export type Avatar = {
 export class BioAvatarComponent implements OnInit {
 
     @Input() avatar!: Avatar;
+    src!: string;
 
     ngOnInit(): void {
+        this.handler();
 
-        if (this.avatar.path && this.avatar.img) {
-            this.avatar.img = this.avatar.path + this.avatar.img;
-        }
-
-        if (!this.avatar.shape || this.avatar.shape === null) {
-            this.avatar.shape = 'circular';
-        }
-
-        if (!this.avatar.size || this.avatar.size === null) {
-            this.avatar.size = 'md'
-        }
+    }
 
-        if (this.avatar.placeholder) {
-            delete this.avatar.img;
-        }
+    ngOnChanges(changes: SimpleChanges): void {
+        this.handler();
     }
 
     get addPlaceHolderContainerClass() {
@@ -90,4 +81,23 @@ export class BioAvatarComponent implements OnInit {
             'xl': this.avatar.size === 'xl'
         }
     }
+
+    handler() {
+        if (this.avatar.path && this.avatar.img) {
+            this.src = this.avatar.path + this.avatar.img;
+        }
+
+        if (!this.avatar.shape || this.avatar.shape === null) {
+            this.avatar.shape = 'circular';
+        }
+
+        if (!this.avatar.size || this.avatar.size === null) {
+            this.avatar.size = 'md'
+        }
+
+        if (this.avatar.placeholder) {
+            delete this.avatar.img;
+        }
+    }
+
 }