Using Angular's flex-layout directive alongside the ngFor directive

I am a beginner when it comes to flex-layout and I'm currently facing an issue that I need help with. Here is the problem I am encountering:

https://github.com/angular/flex-layout

This is my ngFor loop:

<div fxLayout.xs="column">
 <country fxFlex *ngFor="let country of countries" [country]="country"></country>
</div>

Here is the current result:

https://i.sstatic.net/p7LZJ.png

The challenge I am facing now is, what if I only want 3 countries in a row, meaning the last 'Germany' should move to the next row?

Do I have to create multiple fxLayout's to achieve this? Would I need one loop to determine the number of fxLayout's and another internal loop to display my country components (fxFlex items)? Thank you for your assistance in advance!

cssangulartypescriptflexbox

Answer №1

I stumbled upon the solution here: How to adjust number of items per row using media queries in Flexbox?

Here is the HTML snippet:

<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap="wrap">
  <country fxFlex.gt-xs="50%" [fxFlex.gt-md]="regularDistribution" *ngFor="let country of countries" [country]="country"></country>
</div>

And the corresponding Typescript code:

//I am utilizing this technique to demonstrate expression bindings in flex-layout and avoid cluttering the HTML with calculated values.
regularDistribution = 100 / 3;

The rule specified here dictates a multi-line layout that flows from left to right in ltr direction, and from right to left in rtl direction.

The crucial element to pay attention to is the fxLayoutWrap="wrap"

Answer №2

After upgrading to Angular 6 and the latest version of flex-layout, my code now appears as follows:

<div fxLayout="row wrap">
   ...
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Optimizing Angular2 with Tree Shaking using Webpack2 and ng

In my angular2 application, I am currently utilizing https://github.com/ng-bootstrap/ng-bootstrap with webpack2 to compile all ts files. At the moment, I am only using the Modal Component from NgbModule. However, even in the minified file, I can still see ...

angulartypescriptwebpack-2ng-bootstrap

What is the best way to reveal CSS files downloaded via npm?

I'm currently working on a Sass/CSS library that I have hosted on npm. I am exploring ways to make it easier for clients to access it, such as using: @import 'library_name' Instead of the less appealing option: @import 'node-modules/ ...

cssnode.jsnpmsass

The publish-subscribe feature appears to be ineffective

Recently starting with meteor, I learned about the importance of removing autopublish. So, I decided to publish and subscribe to a collection in order to retrieve two different sets of values. Here is the code on my meteor side: Meteor.publish('chann ...

javascriptangularmeteor

What could be the reason for the CSS stylesheet not functioning properly on mobile devices?

I am a newcomer to web development and currently working on a website for a massage therapist using bootstrap. However, I am facing an issue where my CSS styles are not displaying correctly on mobile devices. The backgrounds and bootstrap navbar disappear, ...

htmlcssmobilebootstrap-4

Retrieve the bounding rectangle of a div that has the CSS style `display: contents` using the getBoundingClientRect

My objective is to apply styling and obtain the bounding box of an entire "row" within a CSS grid, including features like highlighting when hovering over it. To achieve the styling aspect, I make use of the display: contents property, so that the styles ...

javascripthtmlcss

What causes the text node to be visible on top of the background of the element it is overlapping with?

Consider this basic HTML structure: div { box-sizing: border-box; color: white; font-size: 28px; height: 100px; width: 200px; } #a { background: blue; padding-top: 40px; } #b { background: green; margin-top: -100px; } <div id="a" ...

htmlcss

What is the best way to add a 'Drawer' component into the 'AppBar' using React MUI within the Next.js framework?

My goal is to create an App bar with a 'hamburger' icon on the left that, when clicked, will display a Sidenav (drawer). I am working with React Material and Next.js (App router) and need to have the app bar and drawer as separate components, hea ...

reactjstypescriptnext.jsmaterial-uinavigation-drawer

Ways to dynamically update the state of a mat-button-toggle-group programmatically

I'm currently working on implementing a confirmation dialog to change the state of MatButtonToggleGroup. However, I am facing an issue where I need to prevent the default behavior unless I revert to the previous state upon cancellation. Here's t ...

angularangular-material

What is the best way to apply styles to a React component that is passed as a prop?

I'm currently working on a component that is passed as a label prop. In order for me to utilize justify-content: space between within my div, I must ensure it has a width of 100%. You can see how this appears in the developer tools by clicking here. r ...

cssreactjsflexboxstylesreact-props

Achieving a persistent footer at the bottom of the page within Material Angular's mat-sidenav-container while using the router-outlet

I am looking to keep my ngx-audio-player fixed at the bottom of the screen, similar to what you see on most music streaming websites. I currently have a structure with divs and various elements for dynamic content and playing music. The issue is that the ...

htmlcssangularangular-material

Incorporate data binding within ngFor

When working with an array in HTML using *ngFor, I need to calculate the total value of the array without utilizing the .ts file. The total value should be displayed in a separate row. <ion-grid> <ion-row *ngFor="let item of dailyDays"> ...

angularionic2

How to efficiently structure CSS columns using Div elements within a Bootstrap card

<!-- New Blog Post --> <div class="card mb-4"> <img class="card-img-top" src="https://ichef.bbci.co.uk/news/660/cpsprodpb/948D/production/_109592083_mediaitem109591445.jpg" alt="Card image cap"> ...

htmlcssbootstrap-4

Having trouble getting IcoMoon icons to display properly in Internet Explorer 8?

While using IcoMoon icons on my website, I have noticed that they function perfectly in all modern browsers except for Internet Explorer 7, where they do not display at all. In Internet Explorer 8, the icons show up as small boxes instead. The CSS code I a ...

cssinternet-explorer-8internet-explorer-7font-facehaslayout

The Generic Function's Return Type in Typescript

The latest addition of ReturnType in TypeScript 2.8 is a highly valuable feature that enables you to capture the return type of a specific function. function foo(e: number): number { return e; } type fooReturn = ReturnType<typeof foo>; // numbe ...

typescriptgenerics

Utilizing Angular Services to Share Events and Reusing Components Multiple Times on a Page

My unique custom table is made up of multiple components, each emitting events using a shared service called TableEvent. These events are subscribed to by a class named TableTemplate, which facilitates communication among the different components of the ta ...

angulartypescriptrxjs

Discover the power of debugging Typescript in Visual Studio Code with Gulp integration

I've been working on setting up an express/typescript/gulp application, and while it's functional, I'm struggling to debug it using source-maps. Here is how I've set it up: Gulp File var gulp = require('gulp'), nodemon ...

node.jsexpresstypescriptgulpgulp-sourcemaps

Tips for dynamically updating the Header name based on backend data

I am currently utilizing ag-grid within my Angular application. Within the columnDefs array, I have defined headers for my grid. One of the headers is for a column labeled Amount. My goal is to make this header dynamic, so that if the currency value coming ...

angularag-grid

Exploring Composite Types with TypeScript's `infer` Keyword

After implementing redux in my project, I found myself including the following code snippet in my store: type CombinedParamTypes<T extends { [key: string]: (state: any, action: any) => any; }> = T extends { [key: string]: (state: infer R, ...

reactjstypescriptreduxreact-redux

Internet Explorer and Edge browsers are concealing box shadow behind the parent div

When using an input slider range, the box-shadow is being applied to the active thumb in all browsers except for IE & EDGE. In these browsers, the shadow is cutting or hiding behind the parent div #c. I have already tried setting overflow:visible on the p ...

htmlcss

Is it possible to enter NaN in Vue3?

Is there a way to handle NaN values and keep a field blank instead when calculating margins with a formula? https://i.stack.imgur.com/JvIRQ.png Template <form> <div class="row"> <div class="mb-3 col-sm ...

javascripttypescriptvue.jsvuejs3