title: How can I get data from component angular and print it out into html?
body: <p>How can I get data from component angular and print it out into html? 
  I'm trying to get an pokemon name in my html from my component</p>
  
  <p>Here's my app.components.ts:</p>
  
  <pre><code>import { Component, OnInit } from "@angular/core";
  import { HttpService } from "./http.service";
  
  @Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"],
  })
  export class AppComponent {
    title = "pokemon";
    tasks = [];
    task = "";
    constructor(private _httpService: HttpService) {}
  
    ngOnInit() {
      this.getTasksFromService();
    }
  
    getTasksFromService() {
      let observable = this._httpService.getPokemon();
      observable.subscribe((data) =&gt; {
        this.tasks = data["data"];
        console.log(data);
        return data;
      });
    }
  }
  </code></pre>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div *ngFor="let task of tasks; let idx = index"&gt;
    &lt;p&gt;{{task.name}}&lt;/p&gt;
  &lt;/div&gt;
  
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>Here's my http.service.ts:</p>
  
  <pre><code>import { Injectable } from "@angular/core";
  import { HttpClient } from "@angular/common/http";
  
  @Injectable({
    providedIn: "root",
  })
  export class HttpService {
    constructor(private _http: HttpClient) {
      this.getPokemon();
    }
  
    getPokemon() {
      let pokemon = this._http.get("https://pokeapi.co/api/v2/pokemon/1/");
      return pokemon;
    }
  }
  </code></pre>
  
  <p>Thank you! </p>