nlr_p nlr_p - 4 months ago 58
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';
selector: 'header-Navbar',
templateUrl: './app/navbar/navbar.html',
export class Navbar {}

my app.component.html,


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';
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.


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

Now they should be in

  declarations: [NavBar]
export class AppModule {} 
// or 
export class MyOtherModule {}

See also