I am a beginner when it comes to using Angular directives, so I created a directive like this:
import { Directive, ElementRef, Input, Output } from '@angular/core';
@Directive({
selector: "[bonusCard]"
})
export class BonusCard {
@Input() bonus: string;
@Input() amount: string;
@Input() isSelected: string;
constructor(private el: ElementRef){
el.nativeElement.innerHTML = this.getTemplate()
}
getTemplate(){
return ''+
'<div>'+
'<div class="bonus">'+this.bonus+'</div>'+
'<div class="amount">'+this.amount+'</div>'+
'<div class="radio '+(this.isSelected?'is_selected':'')+'"></div>'+
'</div>' +
'';
}
}
I am using this directive in my template like this:
<div class="column col-3" *ngFor="let b of bonusJson; let i = index" bonusCard [bonus]="b.bonus" [amount]="b.amount" [isSelected]="i==activeBonus"></div>
Where the variables are defined as follows:
bonusJson = [{
bonus:1500,
amount:2000
},{
bonus:1000,
amount:1000
},{
bonus:500,
amount:500
},{
bonus:0,
amount:100
}];
activeBonus = 0;
However, the view is not rendering correctly and it is showing undefined in the view as depicted in the image below: