0

When a child component with this html code:

<div *ngxPermissionsOnly="['ADMIN']">Just Admin see it</div>

is being loaded, this error happens:

users-list.component.html:2 NG0303: Can't bind to 'ngxPermissionsOnly' since it isn't a known property of 'div' (used in the 'UsersListComponent' component template).

1. If 'div' is an Angular component and it has the 'ngxPermissionsOnly' input, then verify that it is a part of an @NgModule where this component is declared.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

Importing NgxPermissionsModule.forRoot() in app.module is done! Importing NgxPermissionsModule.forChild(), in child components is done! Whether it's LazyLoading or not, it doesn't work for the components! BUT when I add *ngxPermissionsOnly="['ADMIN']" to app.component.html it works! So It's facing the problem just for child components!

Environment

Angular version: 14.2.X ngx-permissions version: 14.0.0

Browser:

  • [ ] Chrome (desktop) version 107.0.5304.123 (Official Build) (64-bit)

I tried many different ways and found a solution! Including the child components in declarations array in app.module! Or importing all component's modules in app.module import array would work! But I don't like this solution! And I think it is in contrast with the LazyLoading concept! (Is it?) Also using sharedModule didn't solve the problem!

Ata
  • 1
  • 1

0 Answers0