When using the interpolation syntax {{ }}, the variables are limited to the scope of the corresponding component's class and do not have access to variables like StudentEnum that are defined outside that scope.
Approach 1: Local member variable
One solution is to create a local member variable to store the enum. Here's an example:
import { StudentEnum } from './model/student.enum.ts';
@Component({...})
export class SomeComponent implements OnInit {
public studentEnum = StudentEnum; // <-- assign the enum to a member variable
...
}
<!-- Note the use of `studentEnum` with a lowercase `s`. This refers to the member variable -->
<input type="text" pInputText value="{{elem[studentEnum.name] }}" name="student_name"/>
Approach 2: Pipe
If you prefer not to create a local member variable for each component, you can create a pipe to retrieve the enum value as needed.
For instance
student.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { StudentEnum } from './model/student.enum.ts';
@Pipe({
name: 'student',
pure: true,
})
export class StudentPipe implements PipeTransform {
transform(value: any): any {
if (!value) {
return null;
}
return StudentEnum[value];
}
}
Then use it in the template
<input type="text" pInputText value="{{elem['name' | student] }}" name="student_name"/>