CODEWITHSUNDEEP
angularangular2-template
SelvaKumar Selvi
SelvaKumar Selvi

Reputation: 11

Multiple Components in angular2

I'm new to angular 2 , In multiple components i have written a two components in a single folder file i have import the 2nd class in first file and given directive: class but its showing error! Here the app.module.ts file

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

Here the first component file app.component.ts

import { Component } from '@angular/core';
import { mydetailsComponent } from './app.details';

@Component({
   selector: 'my-app',
   template: `<h1>Welcome to this Application...</h1>
   <p>We have the App details here:</p>
   <mydetails></mydetails>
   `
  directives: [ mydetailsComponent ] })
export class myAppComponent { }

Here second Component file app.details.ts

import { Component } from '@angular/core';
@Component({
  selector: 'mydetails',
  template: `<ul>
             <li>Settings</li>
             <li>Profile</li>
             <li>Games</li>
             <li>Gallery</li>
            `
})
export class mydetailsComponent { }

Please tell us how to use and display the multiple components!

Upvotes: 0

Views: 7547

Answers (1)

ranakrunal9
ranakrunal9

Reputation: 13558

in latest angular @Component.directives are deprecated so you have to declare your mydetailsComponent in AppModule

app.module.ts

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

app.component.ts

import { Component } from '@angular/core';
import { mydetailsComponent } from './app.details';

@Component({
  selector: 'my-app',
  template: `<h1>Welcome to this Application...</h1>
    <p>We have the App details here:</p>
    <mydetails></mydetails>
  `
})
export class myAppComponent { }

Upvotes: 7

Related Questions