refactor: change how to detect if an image or icon should be displayed
MODIFY
src/app/components/img-or-icon-selector/img-or-icon-selector.component.html
src/app/components/img-or-icon-selector/img-or-icon-selector.component.html
<!-- Show img source if available -->
<img
- *ngIf="isImage; else icon"
+ *ngIf="imgUrl; else icon"
id="img"
class="api-img"
alt="api logo"

MODIFY
src/app/components/img-or-icon-selector/img-or-icon-selector.component.ts
src/app/components/img-or-icon-selector/img-or-icon-selector.component.ts
@@ -32,7 +32,6 @@ import { ConfigService } from '../../services/config/config.service';
export class ImgOrIconSelectorComponent implements AfterViewInit, OnChanges {
@Input() imgUrl: string | undefined = '';
@Input() dimension = '';
- isImage = false;
constructor(
public configService: ConfigService,
@@ -43,7 +42,6 @@ export class ImgOrIconSelectorComponent implements AfterViewInit, OnChanges {
this.imgUrl = changes.imgUrl.currentValue
? (changes.imgUrl.currentValue as string)
: '';
- this.isImage = this.imgUrl !== undefined || this.imgUrl !== '';
this.cdr.detectChanges();
this.resize();
}
@@ -79,6 +77,6 @@ export class ImgOrIconSelectorComponent implements AfterViewInit, OnChanges {
}
showFallbackIcon() {
- this.isImage = false;
+ this.imgUrl = '';
}
}

refactor: change how to detect if an image or icon should be displayed