I am a beginner in Angular and I am currently experimenting with using the ng-if directive to conditionally render different HTML elements based on whether type=input or type=select is selected. If type=select is chosen, then a select dropdown will be rendered; otherwise, an input field will be displayed. Here is a snippet of my code:
template: `<div *ngIf="type='input'">
<div class='investecField textField'>
<div class='investecFieldIn'>
<label>
<span>{{value}}</span>
<input type="text" value="{{valueInput}}">
</label>
</div>
</div>
</div>`
+
`<div *ngIf="type='select'">
<div class='investecField selectField'>
<div class='investecFieldIn'>
<label>
<span>{{selectValue}}</span>
<strong><i class='fa fa-sort-desc' aria-hidden='true'></i></strong>
<select>
<option></option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</label>
</div>
</div>
</div>`
})
export class InvestecFieldComponent implements OnInit {
@Input()
set selectValue(name: string) {
};
@Input() value: string;
@Input() valueInput: string;
constructor(private elem: ElementRef, private renderer: Renderer2) {
}
ngOnInit() {
}
}
And here is how it is used in the HTML template:
<investec-field [ngIf]="type=='input'"
value="User Name"
valueInput="">
</investec-field>
However, upon testing, I encountered an error in the console which reads: Error: Template parse errors: Parser Error: Bindings cannot contain assignments at column 6 in [type='input'] in ng:///AppModule/investecFieldComponent.html@0:5 ("]*ngIf="type='input'")