title: How to deal with MVC controllers using angular 5?
body: <p>I am trying to build my first app using angular 5 and .Net core 2 API in visual studio 2017. I am using angular 5 for the client-side, and to maintain data-access, security, authorization ... I am creating Web API controllers using .Net core 2 which will be called from angular I succeeded to implement both (angular and .net APIs) in the same project; </p>
  
  <p>After searching for multiple days of how to generate reports in my solution, I found multiple tools (third parties) that will help me to create reports and export them to pdf, images, excel files ... and they can be displayed as PDF or HTML  in the browser pages; Now the third parties that I found work with .net Core, and all templates are MVC templates, so when a Controller is called --> a view is returned displaying a filled cshtml page;</p>
  
  <p>My problem is the below: </p>
  
  <p>With angular I know how to call an API controller to return data using CRUD operations, but I don't know how to deal with MVC controllers in order to return the report page filled in the server side using .NetCore and a third party. Any suggestions?
  I other words:</p>
  
  <ol>
  <li>How to add MVC Controller to my solution and what is the necessary configuration of it in startup.cs file?</li>
  <li>How to call it from the client side using angular 5 on a button click?</li>
  </ol>
  
  <p>////// templates .net Core 2  API //////</p>
  
  <p>Below is a template of a controller API:</p>
  
  <pre><code>  [Route("api/test/")]
    [Produces("application/json")]
    //[Authorize]
  
    public class TestController : Controller
    {
  
      private IConfiguration _config;
  
      public TestController(IConfiguration config)
      {
        _config = config;
      }
  
      [HttpGet("GetNames")]
      public IEnumerable&lt;string&gt; GetNames()
      {          
        string[] lst= { "A", "B", "C"};
        return lst;
      }
  }
  </code></pre>
  
  <p>////// templates angular 5 calling API //////</p>
  
  <p>// TestService code //</p>
  
  <pre><code>import { Injectable, Inject } from '@angular/core';
  import { Observable } from 'rxjs/Observable';
  import { Router } from '@angular/router'; 
  import { Person } from '../person';
  import { HttpClientModule, HttpHeaders, HttpClient } from '@angular/common/http';
  import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
  import { catchError, retry } from 'rxjs/operators';
  import { HttpErrorResponse } from '@angular/common/http';
  
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': 'Bearer Generatedkey'
    })
  };
  
  @Injectable()
  export class TestService {
  
    constructor(private _http: HttpClient) {
    }
  
    getNameslst() {   
  
      return this._http.get('/api/test/GetNames', httpOptions)
        .pipe(
          catchError(this.handleError)
        );  
    }
  
    private handleError(error: HttpErrorResponse) {
  
      if (error.error instanceof ErrorEvent) {
        // A client-side or network error occurred. Handle it accordingly.
        console.error('An error occurred:', error.error.message);
      } else {
        // The backend returned an unsuccessful response code.
        // The response body may contain clues as to what went wrong,
        console.error(
          'Backend returned code ${error.status}, ' +
          //`body was: ${JSON.stringify(error.error)}`);
          'body was: ${error.error}');
      }
      // return an ErrorObservable with a user-facing error message
      return new ErrorObservable(
        'Something bad happened; please try again later.');
    };    
  
  }
  </code></pre>
  
  <p>// app component ts code //</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Http, Headers } from '@angular/http';
  import { TestService } from '../app/test.service';
  import { Person } from '../person';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  export class AppComponent implements OnInit {
  
    public apiValues: string[] = [];
  
    constructor(public http: Http, private _testService: TestService) {
  
    }  
  
    ngOnInit() {
  
     this.getnames();   
    }
  
    getnames() {
      this._testService.getNameslst().subscribe(
        data =&gt; this.apiValues = data
      )
    }
  
  }
  </code></pre>