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

Ways to implement a filter pipe on a property within an array of objects with an unspecified value

CSS fluid layout with three columns

Are you looking for a demonstration of "Creative Loading Effects" that triggers when the page is loaded?

Is there a way to eliminate the additional and varying pseudo-padding on text inputs in both Webkit and Gecko browsers?

I'm having trouble displaying the X's and O's in my tic tac toe JavaScript game. Any suggestions on how to resolve this issue?

Using AJAX to submit a form and retrieve response data in Javascript

Angular Universal does not fully render on the server side

Looking for the next jQuery class that is not a sibling to toggle the slide

In Production mode, Angular automatically reloads the page every time my data request service is executed to fetch data from the API

Display a unique button and apply a strike-through effect specifically for that individual list item

Once data is assigned to a variable within a subscribe method, it will no longer be available after the method has been completed

The Google Map is not showing all the details

Using Javascript to create a radio button group

Retrieve the information from the API and populate the tables with the data

Load Angular template dynamically within the Component decorator

Managing the behavior of screen readers when interacting with forms

Fresh sheet with a view through the window

Interpreting HTML using a PHP script and running PHP commands embedded in the file

Guide on incorporating Bootstrap JS into HTML5 reusable web elements

Update the text in a personalized dropdown menu when an option is chosen