Paddy Paddy - 2 months ago 14
AngularJS Question

AngularJS 2 calling a directive inside another one

I'm trying to follow the angualrJS 2.0 tutorial on calling another component inside another one. However I'm getting an error saying that it is not a known element on the

<main-footer></main-footer>
selector. What am i doing wrong?

//app.component.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { FooterComponent } from './footer.component';

@Component({
selector: 'my-app',
// use templateurl for template files
template: `
<h1>My First Angular App 22</h1>
<main-footer></main-footer>
`,
directives: [FooterComponent]
})
export class AppComponent {

}

// footer.component.ts
import { Component } from '@angular/core';

@Component({
selector: 'main-footer',
template: `
<h2>The footer</h2>
`,
})
export class FooterComponent{

}


EDIT

So I got it working, by declaring and importing the file in
app.module.ts
as well as the
app.component.ts
file Thanks to the help from @Chang I did not see this in the tutorials on AngualrJS 2.0

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FooterComponent } from './footer.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent, FooterComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }

Answer

can try to declare "FooterComponent" in your app.modules ?

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    routing
  ],
  declarations: [
    AppComponent,
    FooterComponent
  ],
  providers: [

  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}
Comments