CODEWITHSUNDEEP
angularangular-directive
knowledgeseeker
knowledgeseeker

Reputation: 359

using custom structural directive throws an error in console?

Hi I have created a structural directive. however the using it throws an error . the following is my code for structural directive.

import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';
import { Account } from '../models';

@Directive({
  selector: '[pcHasCampaignBudgetEnabled]'
})
export class HasCampaignBudgetEnabledDirective {

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

 @Input() 
 set pcHasCampaignBudgetEnabled(account:Account){
    if(account && account.budget){
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear()
    }
  }

}

i am declared this structural directive in my root mode. I am using it like as follow from a component template .

  <ng-container *pcHasCampaignBudgetEnabled="currentUserAccount" pcColumnDef="budget" [sortable]="true">
      <pc-header-cell *cdkHeaderCellDef>
        {{ 'LABELS.BUDGET' | translate }} ({{ currencySymbol }})
      </pc-header-cell>
      <cdk-cell *cdkCellDef="let row">
        {{ row.budget | number }}
      </cdk-cell>
    </ng-container>

How ever from the developer tool i am getting the following error.

Uncaught Error: Template parse errors:
Can't bind to 'pcHasCampaignBudgetEnabled' since it isn't a known property of 'ng-container'.
1. If 'pcHasCampaignBudgetEnabled' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
    </ng-container>

    <ng-container [ERROR ->]*pcHasCampaignBudgetEnabled="currentUserAccount" pcColumnDef="budget" [sortable]="true">
      <pc-he"): ng:///AppModule/CampaignsAwaitingPanelComponent.html@40:18
Property binding pcHasCampaignBudgetEnabled 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". ("
    </ng-container>

    [ERROR ->]<ng-container *pcHasCampaignBudgetEnabled="currentUserAccount" pcColumnDef="budget" [sortable]="true""): ng:///AppModule/CampaignsAwaitingPanelComponent.html@40:4
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24667)
    at JitCompiler._parseTemplate (compiler.js:34620)
    at JitCompiler._compileTemplate (compiler.js:34595)
    at eval (compiler.js:34496)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34496)
    at eval (compiler.js:34366)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34365)

really appreciate any help thank you

Upvotes: 0

Views: 495

Answers (1)

user11341611
user11341611

Reputation:

You need to import that directive into your component.module.ts Like this:

import { HasCampaignBudgetEnabledDirective } from './HasCampaignBudgetEnabledDirective ';

@NgModule({
  imports: [
    ...
  ],
  declarations: [ComponentPage, HasCampaignBudgetEnabledDirective ]
})

Upvotes: 1

Related Questions