Angular 2 component inside other component

Question

Creating an RPG character creator.

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.

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.

new-character.component.ts

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() { }
}

new-character.component.html

<h2>New Character</h2>
<die-input></die-input>

die-input.component.ts

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() { }
}

die-input.component.html

<input type="number" placeholder="1d4"></input>

Alcides Queiroz · Accepted Answer · 2016-06-19 02:38:48Z

2

In order to have your die-input component recognized, you'll need to inform Angular about its existence, through the directives option in the configuration object passed to the @Component decorator:

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'],
  directives: [ DieInputComponent ] //<<<< Where the magic happens
})

export class NewCharacterComponent {
  constructor() { }
}

edited Jun 19, 2016 at 2:38

answered Jun 19, 2016 at 2:31

Alcides Queiroz

9,5563 gold badges30 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Crimthann Over a year ago

Awesome, this worked. I had done the Tour of Heroes tutorial but I don't think I had gotten a true grasp on what the directives actually did.

Nicolas D Over a year ago

Sadly it is now depreacated, we have to use now a declaration in our module

Levi Fuller · Accepted Answer · 2016-06-19 04:23:18Z

If you are going to use the component often & within multiple components, you can also provide it within your main.ts.

provide(PLATFORM_DIRECTIVES, {useValue: <ComponentName>, multi: true})

This will essentially add it to primary directives collection so that it is accessed just like the built-in directives.

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { PLATFORM_DIRECTIVES, provide } from '@angular/core';
import { ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';
import { AppComponent } from './app.component';
import { DieInputComponent} from './die-input.component';

bootstrap(AppComponent, [
    ROUTER_DIRECTIVES,
    ROUTER_PROVIDERS,
    provide(PLATFORM_DIRECTIVES, {useValue: DieInputComponent, multi: true}),
]);

new-character.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router-deprecated';

@Component({
  selector: 'core-worlds',
  templateUrl: 'app/new-character.component.html',
  styleUrls: ['app/new-character.component.css'],
})

export class NewCharacterComponent {
  constructor() { }
}

new-character.component.html

<h2>New Character</h2>
<die-input></die-input>

Collectives™ on Stack Overflow

Angular 2 component inside other component

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related