directive don't exist in current component

Question

I'm new to angular 2, I saw some videos and implement this but I am facing some problems. I have created a new component navbar and imported it in app.component.ts file. While adding meta data @Component directive not found error occurred.

Error: Argument of type '{ selector: string; template: string; directive: (typeof NavbarComponent)[]; }' is not assignable to parameter of type 'Component'.
  Object literal may only specify known properties, and 'directive' does not exist in type 'Component'.

app.component.ts Code:

import { Component } from '@angular/core';
import { NavbarComponent } from './navbar.component';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
  directive: [NavbarComponent]
})
export class AppComponent  { name = 'Angular'; }

Answer 1

We have to import in app.model.ts file

import { NavbarComponent} from './navbar.component';

and

declarations: [ AppComponent,NavbarComponent ],

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

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent,NavbarComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

and in app.component.ts just call selector

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


@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
                <p>Hello once again</p>
                <navbar></navbar>

  `
})
export class AppComponent  { name = 'Angular'; }

Answer 2

As the error says 'directive' does not exist in type 'Component'.

The component argument does not take a parameter of type directive. If you would like to see your newly created navbar in your app.component.html just remove the directive from app.component.ts and add the navbar selector in you app.component.html (make sure to have some html in your navbar template to make sure it is working).

<nabar><\navbar>