search

ngbracket / ngx-layout

Clone of the Angular FlexLayout
MIT License
197 stars 11 forks source link

Add provider to support Angular Standalone components #27

Open duluca opened 1 year ago

duluca commented 1 year ago

Feature Request

What is the desired behavior?

In bootstrapApplication be able to provide FlexLayoutModule members, so the entire application can have access to the directives:

import { provideFlexLayout } from '@ngbracket/ngx-layout'

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    provideFlexLayout()
  ]
}

What is the use case or motivation for the desired behaviour?

Currently, if you convert an Angular app to a standalone app, which is the recommended way of creating Angular apps by the Angular team, the developer needs to import FlexLayoutModule for every individual component. Needless to say, this is tedious and creates a frustrating situation where fx-layout directives may seem to be broken at random, when the module is missing from that component. An easy mistake to make.

Sample app where I ran into this exact issue: https://github.com/duluca/local-weather-app

Is there anything else we should know?

I haven't looked into what it takes to implement a provider like this, so I'm unsure of feasibility of this request.

DuncanFaulkner commented 1 year ago

This would make sense to create a provider for the layout module, again not sure myself but I will look into it.

Thanks for the suggestion.

duluca commented 1 year ago

When I was looking at https://github.com/ngbracket/ngx-layout/blob/main/projects/libs/flex-layout/module.ts and saw ModuleWithProviders<FlexLayoutModule>, I got excited to see if using importProvidersFrom(FlexLayoutModule) would work. I tested it on my sample project. No luck.

sourav-bhar commented 1 year ago

When I was looking at https://github.com/ngbracket/ngx-layout/blob/main/projects/libs/flex-layout/module.ts and saw ModuleWithProviders<FlexLayoutModule>, I got excited to see if using importProvidersFrom(FlexLayoutModule) would work. I tested it on my sample project. No luck.

Does importProvidersFrom(FlexLayoutModule.withConfig(configOptions, breakpoints)) work when working with standalone apps? Then inside a standalone component, one could import FlexModule / ExtendedModule / GridModule or simply FlexLayoutModule to import the required directives depending on what is used.

DuncanFaulkner commented 1 year ago

@sourav-bhar Not at the moment, but this is something that I plan to investigate soon

DuncanFaulkner commented 7 months ago

@duluca @sourav-bhar: I've migrated both the demo apps to be standalone - which seems to work, I was looking to convert the library but there are a couple of issues with that will require more thought and investigation, but thought I would let you it seems to be working (though the demo apps are not the most comprehensive of applications).

the changes are all in the migrate-standalone branch - this branch is now running the latest versions of everything as well.