title: Using Angular 2 to return HTML from C#/.NET service
body: <p>I have an existing .NET application that I want to update to use an Angular 2 front-end. There is a section of a page that has dynamic content and every time I want to get the most up-to-date content, I currently use jquery similar to this: </p>
  
  <pre><code>$.get("/Plan/Variety/VarietyList")
              .done(function (data) {
                  PlaceReturnedData($("body"), data, "variety-list-selling");
              });
  </code></pre>
  
  <p>The data returned is the exact HTML I need, no need to manipulate it.</p>
  
  <p>How can I use Angular 2 to return this same data? I've looked around and only see how to handle JSON data, such as the example below from Angular 2's Tour of Heroes tutorial:</p>
  
  <p><strong>heroes.component.ts:</strong></p>
  
  <pre><code>heroes: Hero[];
  selectedHero: Hero;
  
  constructor(
      private router: Router,
      private heroService: HeroService
  ) { }
  
  getHeroes(): void {
      this.heroService.getHeroes().then(heroes =&gt; this.heroes = heroes);
  }
  
  ngOnInit(): void {
      console.log('initializing MenuVarietiesComponent');
      this.getHeroes();
  }
  </code></pre>
  
  <p><strong>hero.service.ts</strong></p>
  
  <pre><code>@Injectable()
  export class HeroService {
      private heroesUrl = 'app/heroes';  // URL to web api
      private headers = new Headers({'Content-Type': 'application/json'});
  
      constructor(private http: Http){ }
  
      getHeroes(): Promise&lt;Hero[]&gt; {
          return this.http.get(this.heroesUrl)
                     .toPromise()
                     .then(response =&gt; response.json().data as Hero[])
                     .catch(this.handleError);
      }
  }
  </code></pre>
  
  <p><strong>heroes.component.html:</strong></p>
  
  <pre><code>&lt;ul class="heroes"&gt;
      &lt;!-- On click, execute onSelect() function and pass in the hero variable from the ngFor. Apply the "selected" class if hero &amp; selectedHero match, remove it if they don't --&gt;
      &lt;li *ngFor="let hero of heroes" 
          (click)="onSelect(hero)" 
          [class.selected]="hero === selectedHero"&gt;
          &lt;span class="badge"&gt;{{hero.id}}&lt;/span&gt;
          &lt;span&gt;{{hero.name}}&lt;/span&gt;
          &lt;!-- We need to stop propagation so we don't trigger the onSelect() method on the &lt;li&gt; --&gt;
          &lt;button class="delete" (click)="delete(hero); $event.stopPropagation()"&gt;x&lt;/button&gt;  
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>How can I modify the example Angular 2 code above to handle HTML data rather than JSON data so I can take advantage of code I already have set up on the C# end? I'm guessing the <code>*ngFor</code> in the html is irrelevant since I probably won't need to save my data as an array and I would probably need to change the value of <code>heroesUrl</code> to <code>/Plan/Variety/VarietyList</code>, but I'm a little stuck after that.</p>
  
  <p>EDIT:
  Here is what the returned HTML from my controller might look like:</p>
  
  <pre><code>    &lt;div class="varietyTypeName" data-toggle="collapse" data-target="" aria-expanded="true" aria-controls=""&gt;
          Greens
          &lt;i class="fa fa-angle-down arrow-toggle"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div class="collapse in collapsableArea"&gt;
          &lt;div class="varietyFamilyName"&gt;Arugula&lt;/div&gt;            
          &lt;div class="varietyName"&gt;
              &lt;a class="ajax-rep rep-main-col" href="/Plan/Selling/DetailsPPVS/5409"&gt;Astro&lt;/a&gt;
              &lt;a href="#deleteVarietySelling" id="deleteVarietySelling_5409" class="quick-delete fa-minus-button" title="Delete" data-toggle="modal"&gt;
                  &lt;i class="fa fa-minus"&gt;&lt;/i&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="collapse in collapsableArea"&gt;
          &lt;div class="varietyFamilyName"&gt;Kale&lt;/div&gt;                 
          &lt;div class="varietyName"&gt;
              &lt;a class="ajax-rep rep-main-col" href="/Plan/Selling/DetailsPPVS/3720"&gt;Kalettes&lt;/a&gt;
              &lt;a href="#deleteVarietySelling" id="deleteVarietySelling_3720" class="quick-delete fa-minus-button" title="Delete" data-toggle="modal"&gt;
                  &lt;i class="fa fa-minus"&gt;&lt;/i&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>