CODEWITHSUNDEEP
angular5
Germán Küber
Germán Küber

Reputation: 23

ngx-permissions error with directive *ngxPermissionsOnly

I have a problem with the directive of the library ngx-permissions. These are the versions of my angular's dependency:

    "@angular/animations": "^5.0.3",
    "@angular/common": "^5.0.3",
    "@angular/compiler": "^5.0.3",
    "@angular/core": "^5.0.3",
    "@angular/forms": "^5.0.3",
    "@angular/http": "^5.0.3",
    "@angular/platform-browser": "^5.0.3",
    "@angular/platform-browser-dynamic": "^5.0.3",
    "@angular/router": "^5.0.3",

And I am following this example.

I am using the version of module:

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

import { AppComponent } from './app.component';

import { NgxPermissionsModule } from 'ngx-permissions';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
     NgxPermissionsModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I can use the services without problem, but I have an error only with the directive. The error is the next:

Can't bind to 'ngxPermissionsOnly' since it isn't a known property of 'div'. ("
    </div>
            </div>
                <div [ERROR ->]*ngxPermissionsOnly="['ADMIN', 'GUEST']" class="m-portlet__head-tools">
                    <ul class="nav nav-pil"): ng:///DashboardModule/DashboardComponent.html@35:10
Property binding ngxPermissionsOnly 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". ("
                    </div>
                </div>
                [ERROR ->]<div *ngxPermissionsOnly="['ADMIN', 'GUEST']" class="m-portlet__head-tools">
                    <ul class="nav na"): ng:///DashboardModule/DashboardComponent.html@35:5

Upvotes: 2

Views: 8540

Answers (5)

Mossy_yankee
Mossy_yankee

Reputation: 1

In my case, the issue was with the version of the ngx-permissions package. I was using version 17.0.1 with an Angular v15 project, which caused the problem. Downgrading ngx-permissions to version 15.0.1 fixed it. Additionally, I had to change the imports from ngxPermissionsGuard to NgxPermissionsGuard.

Upvotes: 0

rdbhandari
rdbhandari

Reputation: 111

For Standalone Component

add NgxPermissionsModule.forRoot() to app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [importProvidersFrom(NgxPermissionsModule.forRoot())]
};

add NgxPermissionsModule in imports of the component

imports: [NgxPermissionsModule],

use ngxPermissionsOnly in html file

<div  *ngxPermissionsOnly = "[ActionTypeEnum.APPROVE]">
      <h1>OOOOOOOOOOOOOOOOOOOOOKKKKKKKKKKKKKKKKKKKK</h1>
</div>

Upvotes: 1

Thato Lesetla
Thato Lesetla

Reputation: 1

My issue was that I was using the latest version of NgxPermissionModule on a old angular version. Ensure that the

Upvotes: 0

Kuzenko Lubko
Kuzenko Lubko

Reputation: 2109

I had the same issue and my fix was to add NgxPermissionsModule for child module.

NgxPermissionsModule.forChild()

Upvotes: 8

uttamjaiswal86
uttamjaiswal86

Reputation: 47

I would like to say that I was also facing same issue. but in my case; I had a shared module and I did same as wiki says but solutions was just exports NgxPermissionsModule.

My issue went out and code is working fine.Check if you might have same case and my fix works for you.

Thanks

Upvotes: 1

Related Questions