CODEWITHSUNDEEP
angularangular-flex-layout
al.koval
al.koval

Reputation: 2532

Flex-layout for the exported component

in the core module is the exported nav component(app-nav). The core module is imported into the app module.

The flex-layout module is also imported into the app module.

I add the selector app-nav to app.component.html. But in the nav component, they do not work out flex-layout properties "fxFlex".

Tell me, please, what's the problem? How to import a Flex-Layout module into an app module and make it available to all child modules?

nav.component.html

<a mat-list-item [ngStyle]="{'padding-left': (depth * 12) + 'px'}" (click)="onItemSelected(item)" [ngClass]="{'active': item.route ? router.isActive(item.route, true): false, 'expanded': expanded}"
  class="menu-list-item">
  <i class="{{item.iconName}}"></i>
  {{item.displayName}}
  <span fxFlex *ngIf="item.children && item.children.length">
    <span fxFlex></span>
    <mat-icon [@indicatorRotate]="expanded ? 'expanded': 'collapsed'">
      expand_more
    </mat-icon>
  </span>
</a>
<div *ngIf="expanded">
  <app-nav *ngFor="let child of item.children" [item]="child" [depth]="depth+1"></app-nav>
</div>

core.module.ts

/* other modules and components */
import { NavComponent } from './nav/nav.component';

@NgModule({
  imports: [
    ..,   
  ],
  declarations: [
    ..,
    NavComponent
  ],
  exports: [
    ..,
    NavComponent
  ],
  providers: [
    ..,
  ]
})
export class CoreModule { }

app.module.ts

/* other modules and components */
import { FlexLayoutModule } from '@angular/flex-layout';
import { CoreModule } from './core/core.module';;

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FlexLayoutModule,
    CoreModule,
    BotModule,
    DashboardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<mat-nav-list>
    <app-nav *ngFor="let item of navItems" [item]="item"></app-nav>
</mat-nav-list>

Upvotes: 1

Views: 1030

Answers (1)

Manu Bhardwaj
Manu Bhardwaj

Reputation: 1051

It is not working because, FlexLayoutModule is imported in AppModule and not in CoreModule. Components declared in CoreModule have scope limited to CoreModule only and thus they cannot use components or modules not imported in CoreModule.

To make this work:

  1. Either import FlexLayoutModule in CoreModule.
  2. import and export FlexLayoutModule in SharedModule and then import SharedModule wherever you want to use flex.

Upvotes: 3

Related Questions