CODEWITHSUNDEEP
angular
aleczandru
aleczandru

Reputation: 5449

Can't bind to dropdown since it isent a known native property

Hi I just started a new angular application and I have a problem when importing a directive. Here is my code:

This is my bootstrap file:

import { bootstrap } from '@angular/platform-browser-dynamic';
import {CommercifyComponent} from './commercify.component';

bootstrap(CommercifyComponent);

This is my root component:

import { Component } from '@angular/core';   
import { LeftNavigationComponent } from './navigation/components/left-navigation.component';
import { TopNavigationComponent } from './navigation/components/top-navigation.component';

@Component({           
    moduleId: module.id, 
    selector: 'commercify',
    templateUrl: 'commercify.view.html',
    styleUrls: ['commercify.style.css'],  
    directives: [LeftNavigationComponent, TopNavigationComponent]
})        
export class CommercifyComponent {
    private ceva = "iom";
}

This is the LeftNavigationComponent:

import { Component } from '@angular/core';
import { DropdownDirective } from './../directives/dropdown.directive';

    @Component({
        moduleId: module.id,
        selector: 'left-navigation',
        styleUrls: ['left-navigation.style.css'],
        templateUrl: 'left-navigation.view.html',
        directives: [DropdownDirective]
    }) 
    export class LeftNavigationComponent {
         private ceva = "iom";
    }

And the left navigation component view:

    <li class="nav-item" [dropdown]>
        <div class="nav-item-header nav-item-header-active">
            <span class="nav-item-icon glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
            <span class="nav-item-text">Catalog</span>
            <span class="nav-item-arrow glyphicon glyphicon-menu-right"></span>
        </div>
        <ul class="nav-item-content nav-item-content-active list-unstyled">
            <li class="nav-child-item">
                <span class="nav-item-icon glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
                <span class="nav-item-text">Categories</span>
            </li>
            <li class="nav-child-item">
                <span class="nav-item-icon glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
                <span class="nav-item-text">Templates</span>
            </li>
            <li class="nav-child-item">
                <span class="nav-item-icon glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
                <span class="nav-item-text">Products</span>
            </li>
        </ul>  
    </li>

And finally this is the DropdownDirective:

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({ selector: '[dropdown]' })
export class DropdownDirective {

    public element: HTMLElement;

    constructor(element: ElementRef) {
        this.element = element.nativeElement;
    }
}

When I run the code I get this error:

enter image description here

Now I tought this error was displyed because I needed to add the directive in LeftNavigationComponent but I did that. I am using angular rc.4.

Anyone know what is wrong?

Upvotes: 0

Views: 235

Answers (1)

schacki
schacki

Reputation: 9533

Just do this

<li class="nav-item" dropdown>

instead of this

<li class="nav-item" [dropdown]>

Upvotes: 1

Related Questions