Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Michael Prentice
    @Splaktar
    @xhani-manolis-trungu please post a StackBlitz reproduction to get help debugging the issue.
    @Yavorss I would recommend looking at the generated/applied CSS in your app, then removing the fxLayoutGap directive and applying a similar custom CSS that is tweaked to your needs.
    Michael Prentice
    @Splaktar
    @mijatovicmile btw https://material.angularjs.org/latest/migration#changes-to-layout-features has links to a number of resources for learning CSS Grid and CSS Flexbox.
    Markus Thiel
    @mackelito
    the fx.show/hide directive are useful but sometimes I want to add/remove the element and not just hide using css.. we currently have use the cdk/layout and subscribe on that.. but If would be rather nice to have a similar solution as fx.show/hide.. Is there any specific reason why it does not exists?
    Michael Prentice
    @Splaktar
    @mackelito *ngIf is the normal choice for this. You can use https://github.com/angular/flex-layout/wiki/MediaObserver to make it responsive. I guess it’s a little more complicated (and powerful) than just fxShow/fxHide’s ability to do .breakpoint at the end of the attribute.
    ge-vlad-romanov
    @ge-vlad-romanov
    Hello - from the breakpoint documentation https://github.com/angular/flex-layout/wiki/BreakPoints I understand that all that is required to start using orientation breakpoints is FlexLayoutModule.withConfig({addOrientationBps: true}), in the app module imports? If so, it doesn't seem to be working for me on the latest version of flex-layout, whereas the default breakpoints are working fine (my IDE complains that attributes like fxHide.web.portrait are not allowed, and they do not take any effect if testing it). Any help would be appreciated
    ilitosh
    @ilitosh
    hello
    I am trying to position child Angular components within a grid defined in a parent component
    but they end up creating their own subgrids within a cell of the parent grid
    is there a way around this?
    ilitosh
    @ilitosh
    found a solution - can be done with display: contents as per https://medium.com/@fivedicephoto/css-grid-and-smart-dumb-components-74d246d17740
    Michael Prentice
    @Splaktar
    :thumbsup:
    ionut-gheorghe
    @ionut-gheorghe
    Hi, is it posible to use the lastest version of flex layout with angular7? Or I should use a specific version.
    Frotty
    @Frotty
    Hey, I'm having problems with nested components inside a nx mono repo. flex-layout works fine in parent components, but inside nested children components the directives aren't resolved at all, just staying inside the div tag.
    I can use fxFlex="50%" in the parent successfully, but fxFlex directives inside a <app-my-component></app-my-component> child are not handled
    Michael Prentice
    @Splaktar
    @ionut-gheorghe what version of Angular?
    @Frotty in what module do you import flex layout? can you reproduce in StackBlitz or only in a Nx repo? Is it open source?
    Vijay
    @vijhhh2
    Hi, I have issue with @angular/flex-layout: ^10.0.0-beta.32.The error is"This likely means that the library (@angular/flex-layout) which declares FlexLayoutModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy."
    I fixed it by installing angular/cdk
    Vijay
    @vijhhh2
    angular flex layout in feature module
    I tried importing in feature module and main module and tried a lot of things
    but still the same issue
    if anyone can send an example of how to use flex layout in feature module will be very helpful
    Dominic Watson
    @intellix
    I don't know why this one was closed: angular/flex-layout#1152
    Flex-Layout STILL renders the same style 10x in the header AND inlines it into the element itself
    it generates about 150kb of CSS
    Screenshot 2020-07-14 at 17.06.20.png
    CaerusKaru
    @CaerusKaru
    It's closed because you asked how to disable SSR style generation, and that's included in the guide linked in the issue
    My guess is that flex-layout-11 is present 11 times because you're using responsive breakpoints
    Which means the class itself is recreated in different ways for each breakpoint
    cc @intellix
    Dominic Watson
    @intellix
    ahah potentially but they're exactly the same class and content
    was going to serve the one included in the flex-layout repository to create a reproduction
    CaerusKaru
    @CaerusKaru
    Unfortunately there's no good way to do consolidation, especially when you consider custom breakpoints
    We might be able to optimize, but worst case it's going to be the same thing
    Dominic Watson
    @intellix
    My original thought still stands on that issue actually which is that the ServerMediaMatcher isn't exported and it's the only thing we use
    Getting around it by importing the private tokens
    CaerusKaru
    @CaerusKaru
    Can you give me some insight into how you use it?
    Dominic Watson
    @intellix
    In parsing the user-agent and assuming the type of device being: mobile, tablet or desktop and setting particular breakpoints as active
    so if it's a mobile useragent then we assume it's XS and if it's desktop we assume it's LG and pass those breakpoints
    disabling the inline and flex classes and only using the ngClass.xs stuff. Now we're using utility classes like d-flex as well
    We assume the media size because we use a *mediaIf structural directive to remove DOM based on viewport size like mobile menus etc
    CaerusKaru
    @CaerusKaru
    Hmm. I've always considered stuff like that to be an antipattern, but I'm all for unblocking people if there's a use for it. We could add a server configuration option to limit the breakpoint scope. We already do this with MediaObserver. Would that help?
    Dominic Watson
    @intellix
    maaybe, this is exactly what we do on the server:
    export function getFlexLayoutConfig(request: Request) {
      const uaParser = new UAParser(request.headers['user-agent']);
      const device = String(uaParser.getDevice().type);
      let ssrObserveBreakpoints = ['gt-xs', 'gt-sm', 'gt-md', 'lg', 'lt-xl'];
      const breakpoints: Record<string, string[]> = {
        mobile: ['xs', 'lt-sm', 'lt-md', 'lt-lg', 'lt-xl'],
        tablet: ['gt-xs', 'gt-sm', 'md', 'lt-lg', 'lt-xl'],
        desktop: ['gt-xs', 'gt-sm', 'gt-md', 'lg', 'lt-xl'],
      };
    
      if (device in breakpoints) {
        ssrObserveBreakpoints = breakpoints[device];
      }
    
      return { ssrObserveBreakpoints };
    }
    if you load the page on your mobile and it delivers a desktop site there's gonna be a flash of things moving around so the transition will be really ugly without the above and vice versa
    James Garcia
    @jamesg-gxg
    Hi, Im wondering if anyone has a solution on how to use mediaObserver to show custom breakpoints. When i subscribe right now it only shows me the default ones
    well nevermind. Apparently i had to disable the defaults in the config on the app module
    kpaxton
    @kpaxton
    Does FlexLayout re-render child elements if a Responsive API breakpoint is hit on window resize?
    ie. not just move elements around, but actually create new instances.
    jagdishsinh jadeja
    @jagdishjadeja
    why not flex-layout come to official angular discord ?
    jagdishsinh jadeja
    @jagdishjadeja
    anyone using angular flex layout in server side rendering ?
    Shekhar Ramola
    @shekharramola
    how to reduce a lot of space in here ?
    between cards