How to declare nested components in Angular2

Question

In the Angular2 tutorial a detail component is introduced by adding it to the @NgModule.

Instead, I would like to add it by the outer component (AppComponent) somehow importing it, so that only the outer component refers to the inner component.

I can't figure out how to do it. Old examples refer to the directives property, but directives no longer exist in the type ComponentMetadtaType. So this does not work

import { HeroDetailComponent } from './hero-detail.component';

@Component({
    selector: 'my-app',
    [..]
    directives: [HeroDetailComponent]
})

Günter Zöchbauer · Accepted Answer · 2016-10-17 08:43:57Z

4

You have to add directives and components to declarations: [] of a module.
If you want to only one component to be able to use a component, create a module that consists only of these two components.

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent, FooComponent, BarDirective],
  ...
})

edited Oct 17, 2016 at 8:43

answered Sep 18, 2016 at 15:19

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

3 Comments

Klas Mellbourn Over a year ago

You may be right, but you're essentially saying that what I want to do is not possible to do in the way I want to?

Günter Zöchbauer Over a year ago

I explained what "somehow importing it" can look like. In Angular2 final you are required to use modules and it's the only way to make one component, directive or pipe known to another component.

Tiberiu Popescu Over a year ago

@KlasMellbourn That's not exactly what he is saying. It's true that you cannot declare a component in another component. So the declaration should be moved to an outer module, which will still be fine because other modules/components will not know about this outer module, it's exactly as your old outer component declaration.

micronyks · Accepted Answer · 2016-09-18 15:19:49Z

0

You should declare it with declarations metadata as shown below,

import { HeroDetailComponent } from './hero-detail.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent,HeroDetailComponent],   //<----here
  providers:    [],
  bootstrap:    [ AppComponent ]
})

answered Sep 18, 2016 at 15:19

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

1 Comment

Klas Mellbourn Over a year ago

That is not they way I want to do it. I'd like to declaratively import the inner component in the outer component that is using the inner component. The @NgModule declaration does not make clear what is using what. But maybe what I want is impossible.

Collectives™ on Stack Overflow

How to declare nested components in Angular2

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related