Consider this scenario where a component.ts file looks like the following:
@Input() studentHeader?: BaseStudent;
get studentText() {
if(this.studentHeader) {
return this.studentHeader.nr + ' - ' +
this.studentHeader.firstname + ' ' +
this.studentHeader.lastname + ' ' +
this.studentHeader.gender + ' ' +
}
return '';
}
get iconStudent() {
let icon = null;
if (this.studentHeader) {
switch (this.studentHeader) {
case (this.studentHeader.gender === 'FEMALE') :
icon = 'icon_female_i.svg';
break;
case (this.studentHeader.gender === 'MALE') :
icon = 'icon_male_i.svg';
break;
}
return icon;
}
}
Imagine having an HTML template structured like so:
<div class="h-header">
<div class="h-header-left">
<div class="iconStudent"></div>
{{studentText}}<br>
</div>
Upon compilation, you see the output as:
1 - John Doe MALE
, which only displays the text and not the corresponding icon. Is there a way to show the icon instead?