title: Using templateUrl within template in angular2
body: <p>I've just started learning Angular2 and stuck at a point wherein I need to combine 2 components. </p>
  
  <p>Here's my app.component.ts</p>
  
  <pre><code> import { Component } from '@angular/core';
  
      @Component({
       selector: 'app-root',
       template: './app.component.html &lt;app-home&gt;&lt;/app-home&gt;',
       styleUrls: ['./app.component.css']
      })
      export class AppComponent {
        mylogo = 'ABC Engineering';
        headlist = ["Home", "About", "Portfolio", "Pricing", "Contact"];
        technology = ["HTML", "CSS", "JavaScript", "jQuery", "AngularJS",    "PHP"];
      }
  </code></pre>
  
  <p>Here's my app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  
  import { AppComponent } from './app.component';
  import { HomeComponent } from './home/home.component';
  import { AboutComponent } from './about/about.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      HomeComponent,
      AboutComponent,
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule
    ],
  
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>It gives the output as shown in the image. 
  <a href="https://i.stack.imgur.com/0B4aD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0B4aD.png" alt="Output"></a></p>
  
  <p>It is not showing the output of app.component.html! But it does show the content from 'home.component.html'.
  How do I fix it to show the content from 'app.component.html'?</p>