CODEWITHSUNDEEP
angular
user9083640
user9083640

Reputation:

Adding another Component into angular 2 application

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,

enter image description here

so please suggest me a way to bind components.

Upvotes: 0

Views: 120

Answers (3)

chirag sorathiya
chirag sorathiya

Reputation: 1243

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 
}

Upvotes: 1

Nailik
Nailik

Reputation: 1

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>

Upvotes: 0

Akash Agrawal
Akash Agrawal

Reputation: 2299

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.

Upvotes: 0

Related Questions