Unable to use child component in a parent component in Angular2

Question

I am trying to use the child component inside the main component, app.component using the selector inside the template of the main component. However it is not working.

child.component.ts

import { Component} from '@angular/core';
@Component({
selector: 'child-component',
templateUrl: `<p>Child Component</p>`
})
export class ChildComponent  {  }

app.component.ts

import { Component } from '@angular/core';
import { ChildComponent} from './child.component';

@Component({
selector: 'my-app',
template: `<h1>Hello Angular!</h1>
<child-component>    </child-component>       `
})

export class AppComponent { }

I did the declaration in the modules as below for the ChildComponent

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChildComponent} from './child.component';
import { AppComponent } from './app.component';

@NgModule({
imports: [BrowserModule],
declarations: [AppComponent,ChildComponent],
bootstrap: [AppComponent]
})

export class AppModule { }

The solution mentioned at How to import component into another root component in Angular 2 does not works.

Please help with a resolution.

Pankaj Parkar · Accepted Answer · 2016-11-19 19:43:22Z

1

You had typo inside child-component meta options.

templateUrl: `<p>Child Component</p>`

should be

template: `<p>Child Component</p>`

answered Nov 19, 2016 at 19:43

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

2 Comments

ningomba 2.0 Over a year ago

Thanks a lot for this. It is working now like magic. Please let me know how do I debug it. I was not successful in tracing it from the terminal/console.

Pankaj Parkar Over a year ago

Error message inside a browser console are explanatory, you should look at them first

Collectives™ on Stack Overflow

Unable to use child component in a parent component in Angular2

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related