Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(flex): detect display precedence in fxLayout directive #1385

Merged
merged 1 commit into from
Jan 3, 2022

Conversation

CaerusKaru
Copy link
Member

@CaerusKaru CaerusKaru commented Jan 3, 2022

In some cases, a user may intentionally hide a directive using
styling that exists outside of the scope of this library. However,
fxLayout had no way of detecting this, or establishing a precedence
for pre-existing styles. This adds detection and special caching
for pre-styled display attributes on an element. This means that if,
at any point in the change detection of the directive for its entire
lifespan, it detects that the style has been set to display: none,
it will use that as the display value in place of what it otherwise
would have used.

Please note: this means that you need to be more careful when using
this functionality! If, for instance, you have functionality that
sets display: none on a directive, that functionality needs to
now take over restoring the correct style for the directive. This
is essentially an escape hatch from the library: saying that you
know better how to manage these directives.

To use this feature, do the following:

@NgModule({
  imports: [
    FlexLayoutModule.withConfig({detectLayoutDisplay: true}),
  ],
})
export class AppModule {}

Your markup should then adapt automatically to the new behavior.

Fixes #1043

In some cases, a user may intentionally hide a directive using
styling that exists outside of the scope of this library. However,
fxLayout had no way of detecting this, or establishing a precedence
for pre-existing styles. This adds detection and special caching
for pre-styled display attributes on an element. This means that if,
at any point in the change detection of the directive for its entire
lifespan, it detects that the style has been set to `display: none`,
it will use that as the display value in place of what it otherwise
would have used.

Please note: this means that you need to be more careful when using
this functionality! If, for instance, you have functionality that
sets `display: none` on a directive, that functionality needs to
now take over restoring the correct style for the directive. This
is essentially an escape hatch from the library: saying that you
know better how to manage these directives.

To use this feature, do the following:

```ts
@NgModule({
  imports: [
    FlexLayoutModule.withConfig({detectLayoutDisplay: true}),
  ],
})
export class AppModule {}
```

Your markup should then adapt automatically to the new behavior.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 3, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

fxLayout overrides and destroys existing display properties on screen width changes
1 participant