nlr_p nlr_p - 1 month ago 33
TypeScript Question

How to use directives in angular2

I want to load my navbar.html in my app.component.html for that i used directives and follwed the below method,

my navbar html,

<p>Hi i am a pen</p>


my navbar.ts,

import {Component,Directive, OnInit} from '@angular/core';
@Component({
selector: 'header-Navbar',
templateUrl: './app/navbar/navbar.html',
})
export class Navbar {}


my app.component.html,

<header-Navbar></header-Navbar>


my app.component.ts,

import {Component,Directive, OnInit} from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import { Http, Headers } from '@angular/http';
import { Navbar } from '../navbar/navbar';
import {PathLocationStrategy, LocationStrategy, Location} from '@angular/common';
import { Config } from '../headers';
@Component({
selector: 'my-app',
directives : [Navbar],---->Saying type error
templateUrl: './app/components/app.component.html',
providers: [Config]
})


My error,

'header-Navbar' is not a known element:
1. If 'header-Navbar' is an Angular component, then verify that it is part of this module.
2. If 'header-Navbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
[ERROR ->]<header-Navbar></header-Navbar>


This is my situation and i am not sure about how to solve it,can any one suggest me help.Thanks.

Answer

directives in @Component() is gone since a while.

Now they should be in

@NgModule({
  declarations: [NavBar]
  ...
}
export class AppModule {} 
// or 
export class MyOtherModule {}

See also