locked
How to call function return text of label from database on angular ? RRS feed

  • Question

  • User696604810 posted

    Problem

    How to call function (GetLabelTextForEmployee) on angular component on employees.ts and employees.component.html ?

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

    I make function on web API to get text of label from database and show on view 

    this function work on web API but in angular I cannot know how to call it inside angular ?

    this is my function :

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


    Function above return only one string value for label

    What I have tried:

    on Angular API service i do as below

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


    on main page or component Employee

    getreferencefile(tableName:string,FieldName : string) :void
    {
      this.api.GetLabelTextForEmployee(tableName,FieldName).subscribe( data=>{
        this.returnedData = data; //SUBSCRIBE HERE
        console.log(data);
      }); 
    }


    on view how to call on get reference file function

    Saturday, February 23, 2019 7:21 PM

All replies

  • User61956409 posted

    Hi ahmedbarbary,

    How to call function (GetLabelTextForEmployee) on angular component on employees.ts and employees.component.html ?

    It seems that you'd like to create and use a service to make request to your API and get&show the text on view. To achieve the requirement, you can refer to the following steps and code snippet:

    Create a service

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    
    
    @Injectable()
    export class MytestserviceService {
    
      apiresult;
    
      constructor(private http: HttpClient) { }
    
      GetLabelTextForEmployee(tableName: string, FieldName: string) {
        return this.http.get('http://localhost:44326/api/reference/' + tableName + '/' + FieldName, {responseType: 'text'}).toPromise();
      }
    
    }
    

    Include the service created in the main parent app.module.ts

    Import and use the service in component

    import { Component, OnInit } from '@angular/core';
    import { MytestserviceService } from '../mytestservice.service';
    
    @Component({
      selector: 'app-employees',
      templateUrl: './employees.component.html',
      styleUrls: ['./employees.component.css']
    })
    export class EmployeesComponent implements OnInit {
      returnedData = 'null here';
    
      constructor(private myservice: MytestserviceService) { }
    
      ngOnInit() {}
    
      getreferencefile() {
        this.myservice.GetLabelTextForEmployee('table_name_here', 'field_value_here').then(res => {
          this.returnedData = res;
          console.log(this.returnedData);
        });
      }
    
    }
    

    With Regards,

    Fei Han

    Monday, February 25, 2019 7:38 AM