Adding another Component into angular 2 application

Question

Here i am trying to create a simple angular application. I have created one more component named tutorialcomponent, than app component. Now using selector of tutorialComponent, i am trying to embed it in app component. But i am not getting output of app component after embedding. here is my app component:

import { Component } from '@angular/core';
import {TutorialComponent} from './tutorial/tutorial.component';

@Component({
  selector: 'app-root',
  template: `./app.component.html
        <app-tutorial></app-tutorial>`,
  styleUrls: ['./app.component.css']
})  
export class AppComponent {
  title = 'My Angular2 Login App';
}

Here is tutorialcomponent,

import { Component } from '@angular/core';

@Component({
  selector: 'app-tutorial',
  templateUrl: './tutorial.component.html',
  styleUrls: ['./tutorial.component.css']
})
export class TutorialComponent  {


}

Here is my output,

so please suggest me a way to bind components.

The selector would be app-tutorial and templateUrl, not template, would identify the html content. — Andy G
– Andy G, Commented Dec 14, 2017 at 10:23
<app-tutorial> is selector for for tutorial component. My code for tutorial component is import { Component } from '@angular/core'; @Component({ selector: 'app-tutorial', templateUrl: './tutorial.component.html', styleUrls: ['./tutorial.component.css'] }) export class TutorialComponent { } — user9083640
– user9083640, Commented Dec 14, 2017 at 10:28

chirag sorathiya · Accepted Answer · 2017-12-14 14:23:08Z

1

Try this

import { Component } from '@angular/core';
import { TutorialComponent } from './tutorial/tutorial.component';

@Component({
   selector: 'app-root',
   template: `{{ title }} <br/>
              <app-tutorial></app-tutorial>`,
   styleUrls: ['./app.component.css']
})  

export class AppComponent {
   public title = 'My Angular2 Login App'; //define as public 
}

answered Dec 14, 2017 at 14:23

chirag sorathiya

1,25312 silver badges31 bronze badges

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

Comments

Akash Agrawal · Accepted Answer · 2017-12-14 10:31:36Z

0

Try this

@Component({
  selector: 'app-root',
  template: `{{title}}<br><app-tutorial></app-tutorial>`,  //this line
  styleUrls: ['./app.component.css']
})

I think your app component is working as expected. You are not binding the title that's wht you are not able to see the message.

answered Dec 14, 2017 at 10:31

Akash Agrawal

2,2991 gold badge21 silver badges41 bronze badges

Comments

Nailik · Accepted Answer · 2017-12-14 10:37:24Z

0

Or if you prefer to have an html file you can try this:

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

Puis dans le fichier html tu remets ceci:

<span>{{title}}</span>
<br>
<app-tutorial></app-tutorial>

answered Dec 14, 2017 at 10:37

Nailik

12 bronze badges

1 Comment

user9083640 Over a year ago

Thank-you. Its working for my application. Both the components are displaying on browser now.

Collectives™ on Stack Overflow

Adding another Component into angular 2 application

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related