CODEWITHSUNDEEP
angulartypescript
MMR
MMR

Reputation: 3009

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.

Upvotes: 2

Views: 5359

Answers (2)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657308

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

Upvotes: 3

Sefa
Sefa

Reputation: 8992

Your app.component

@Component({ // <--- removed directives
    selector: 'my-app',
    templateUrl: './app/components/app.component.html',
    providers: [Config]
})

Your app.module

import { Navbar }  from '../navbar/navbar';
@NgModule({
    imports: [],
    exports: [],
    declarations: [Navbar], // <-- imported here
    providers: [],
})

Upvotes: 3

Related Questions