title: Angular 2 component inside other component
body: <p>Creating an RPG character creator. </p>
  
  <p>I have a NewCharacterComponent and I am trying to implement a DieInputComponent inside it. The NewCharacterComponent is routed from an AppComponent. Important snippets of the code will be below.</p>
  
  <p>The issue I am running into is that I am not getting the DieInputComponent to load within the NewCharacterComponent. When I break the DieInputComponent code no errors are thrown in the console, so the error is likely that I am just not successfully importing the DieInputComponent but I just have no idea what is going wrong.</p>
  
  <p>new-character.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router-deprecated';
  
  import { DieInputComponent } from './die-input.component';
  
  @Component({
    selector: 'core-worlds',
    templateUrl: 'app/new-character.component.html',
    styleUrls: ['app/new-character.component.css'],
  })
  
  export class NewCharacterComponent {
    constructor() { }
  }
  </code></pre>
  
  <p>new-character.component.html </p>
  
  <pre><code>&lt;h2&gt;New Character&lt;/h2&gt;
  &lt;die-input&gt;&lt;/die-input&gt;
  </code></pre>
  
  <p>die-input.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
      selector: 'die-input',
      templateUrl: 'app/die-input.component.html',
      styleUrls: ['app/die-input.component.css'],
  })
  
  export class DieInputComponent {
      constructor() { }
  }
  </code></pre>
  
  <p>die-input.component.html</p>
  
  <pre><code>&lt;input type="number" placeholder="1d4"&gt;&lt;/input&gt;
  </code></pre>