CODEWITHSUNDEEP
angularangular-directive
tbddeveloper
tbddeveloper

Reputation: 2447

Angular Structural Directive Broken

I'm trying to create a site using Angular 5.2.9. I'm working through building a system to log in to and now want to avoid loading elements into the page when the user isn't authorized.

Routes is one thing, I can use the canActivate and put the AuthGuard in there, but for specific elements (like menu items, page elements) I want to control whether the user sees them. So, I thought I would create a structural directive.

I copied the example code directly into my application from the Angular Documentation. While typing I get the error;

Property binding appUnless not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations".

I have the directive referenced in my declarations inside of app.module.ts. I'm certain I'm missing something, but I'm not quite sure what. I've looked all around here and other places.

Upvotes: 0

Views: 1701

Answers (1)

Damien
Damien

Reputation: 1610

I copy and paste the app.module.ts file from the angular documentation below.

You forgot to add declarations: [UnlessDirective] to your project. That's the reason you are getting the error. UnlessDirective should be replaced by your directive name.

import { NgModule }      from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }         from './app.component';
import { heroSwitchComponents } from './hero-switch.components';
import { UnlessDirective }    from './unless.directive';

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

Upvotes: 1

Related Questions