CODEWITHSUNDEEP
angularcomponentsangular2-components
ningomba 2.0
ningomba 2.0

Reputation: 323

Unable to use child component in a parent component in Angular2

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.

Upvotes: 2

Views: 1928

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

You had typo inside child-component meta options.

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

should be

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

Upvotes: 1

Related Questions