Using *ngIf together with fxFlex.lg and fxFlex.xl is causing compatibility issues

Question

Using *ngIf together with fxFlex.lg and fxFlex.xl is causing compatibility issues

One of the challenges I faced involved a div element with a conditional *ngIf statement and responsive layout values set using

fxFlex.lg="30" fxFlex.xl="50"

:

<div class="project-test__element" *ngIf="myCondition()" fxFlex.lg="30" fxFlex.xl="50" fxLayoutAlign="end center">
    Test fxFlex.lg and fxFlex.xl
</div>

The styling applied to this particular div included:

place-content: center flex-end;
align-items: center;
flex-direction: row;
box-sizing: border-box;
display: flex;
flex: 1 1 100%;
max-width: 30%; (30% for lg and 50% for xl)

However, transitioning from HD to Full HD resolution caused the removal of the max-width property. The solution involved separating the *ngIf logic into a new outer div preceding the inner div containing the fxFlex directives.

So, the question arises: Why do *ngIf and fxFlex clash when used together? Discover more about them through @angular/flex-layout.

Current versions in use include:

Angular: 8.1.3
@angular/flex-layout: 8.0.0-beta.26

html css angular

Answer 1

Answer №1

With the introduction of Angular 9 and the new Ivy template compiler, this issue has been resolved.

When using a structural directive (marked with *), it's helpful to think of the directive as wrapping the element it's applied to inside an ng-template tag, which serves as the template for that particular item:

<div *ngIf="hide">HELLO</div>

will essentially look like this:

<ng-template *ngIf="hide">
  <div>HELLO</div>
</ng-template>

In previous versions of angular, everything placed on the element with the structural directive was automatically transferred to the ng-template tag. This is why the extra wrapping was necessary.

A better approach would be to use ngIf without the *, and include the ng-template tag as demonstrated above. Additional directives can then be applied directly to the div element itself.

I recommend upgrading to at least Angular 9 to not only resolve this issue but also take advantage of the advancements in the newer versions.

Answer 2

With the introduction of Angular 9 and the new Ivy template compiler, this issue has been resolved.

When using a structural directive (marked with *), it's helpful to think of the directive as wrapping the element it's applied to inside an ng-template tag, which serves as the template for that particular item:

<div *ngIf="hide">HELLO</div>

will essentially look like this:

<ng-template *ngIf="hide">
  <div>HELLO</div>
</ng-template>

In previous versions of angular, everything placed on the element with the structural directive was automatically transferred to the ng-template tag. This is why the extra wrapping was necessary.

A better approach would be to use ngIf without the *, and include the ng-template tag as demonstrated above. Additional directives can then be applied directly to the div element itself.

I recommend upgrading to at least Angular 9 to not only resolve this issue but also take advantage of the advancements in the newer versions.

Using *ngIf together with fxFlex.lg and fxFlex.xl is causing compatibility issues

Answer №1

Similar questions

Showing Text Information from a distant web server's jQuery.getJSON() script

The node.js and express.js update operation (CRUD) is not rendering the CSS files properly

Update the image source within a CSS element

What's the best way to ensure that my image remains perfectly centered at the point where the background colors of my

Ways to eliminate a textbox from an HTML table using jQuery or JavaScript while retaining the textbox values

One or multiple web browsers set in the Browserslist of the project

Customize the appearance of the bootstrap nav-bar by assigning unique background colors to each dropdown menu

Best practices for implementing dual ngFor directives within a single tr element?

Click to add a card

What could be causing site container not to respond to height:auto?

The svg image could not be loaded from an external URL due to a Content Security Policy directive violation stating: "default-src 'none'"

Nested divs with overlapping background images

Creating elegant Select Dropdown Box in AngularJS without relying on images

Column Reordering in DataTable Causes Data to be Mapped Incorrectly

Can we find a solution to optimize "Crystal Reports" for mobile browsers and make it responsive?

Ways to specify the encoding for a text iframe embedded in a webpage

Adjusting the width of tabs dynamically using jQuery

Instructions for turning an HTML table cell into an editable text box

Are HTML files and PHP generated files cached differently by web browsers?

When utilizing Ionic components in Angular, you may encounter the error message "element not recognized."