How to return EmployeeCode on angular employees component.html?

Question

Problem

How to return EmployeeCode on angular employees component.html ?

Sample data ReferenceTable

Code  tableName   FieldName   LabelText
111   Employees   EmployeeId  EmployeeCode

Result of calling

GetLabelTextForEmployee('Employees','EmployeeId')

it suppose Return EmployeeCode

I work on asp.net core 2.1 web API with angular 6.

I make function on web API name GetReferenceFileData to get text of label from

database and show on view on employees.component.html based on Reference Table .

This is my function :

[HttpGet("{tableName}/{FieldName}")]
        [Produces("text/plain")]
        public string GetReferenceFileData([FromRoute] string tableName, [FromRoute] string FieldName)
        {
          var Result =  (from h in _context.ReferenceFiles
                          where h.TableName == tableName && h.FieldName == FieldName
                          select h.LabelText).FirstOrDefault();
            if(Result==null)
            {
                Result = "Not Exist";
            }

            return (Result);


        }

Function above return only one string value for label as Scalar Value

What I have tried:

1- on API service I create Function Below :

GetLabelTextForEmployee(tableName:string,FieldName : string)
              {
                return this.http.get('https://localhost:44326/api/reference/' + tableName + '/' + FieldName);
              }


on employee.component.html 

// how to use function GetLabelTextForEmployee here to return EmployeeCode I make code according exist on post :

on employees.component.ts

    getEmployeeCode() {
       this.api.GetLabelTextForEmployee('Employees','EmployeeId')
       .subscribe( data=>{
         this.returnedData = data; //SUBSCRIBE HERE
         console.log(data);
       }); 
    }
on employees.component.html
 {{getEmployeeCode() | async}}

Result as below I get EmployeeCode but in infinite loop and not show on form as image display Result of code on post infinite loop

Answer 1

I assume you mean, when you call GetLabelTextForEmployee() you aren't getting a result (or rather, you aren't getting the result you expect)?

When you use Angular's HttpClient for HTTP requests, you must subscribe to the method, otherwise it is never actually executed.

In your employee.component.ts , you'l need to call the function, subscribe to it, and assign the result to a local variable. You can then use that local variable in your template ( employee.component.html );

The following assumes you want to call the function on component initialisation, and your function is in a service call ApiService , and that your api returns an object.

employee.component.ts

employee: any;

constructor(private apiService: ApiService) { }

ngOnInit() { 
    this.apiService.GetLabelTextForEmployee().subscribe(result => {
          this.employee = result;
    }
}

employee.component.html

Now, with your local variable assigned, you can use interpolation to display the value.

eg

<span class="employee-code">{{employee.employeeCode}}</span>

Again, this is on the assumption your API returns an object, which you're accessing in the template with {{employee.employeeCode}} .

If your API returns a string, then you're simply interpolating {{employee}}

EDIT

If you want to call the function directly from the template, you still use interpolation, but as your function is in a service, you would need to have a function in your component which calls the service. It's not recommended to call a service function directly from the template.

ie

employee.component.ts

getEmployeeCode() {
    return this.apiService.GetLabelTextForEmployee('Employees','EmployeeId');
}

employee.component.html

Now, you can call getEmployeeCode() from your template, and use the async pipe.

{{getEmployeeCode() | async}}

NOTE: You do NOT need to subscribe to GetLabelTextForEmployee() in your component method ( getEmployeeCode() ) when using the async pipe. Angular will already subscribe to it, and return the latest value emitted, before marking for change detection.

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.