Tips for arranging objects consecutively with angular's *ngFor

I need help with displaying items inline instead of in different rows. I have searched online for solutions, but couldn't find a relevant answer. Can anyone assist me with this? Thank you!

https://i.sstatic.net/AvlMj.jpg

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8>"
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
    <div>
        <div class="pimg1">
           <div class="ptext">
               <span class="borderStyle">
                   Kenny's Site
               </span>
           </div>
        </div>
        <section class="section section-light">
            <h2>Skills</h2>
            <p class="skills" *ngFor="let skill of skills">{{skill.skill}}</p>
        </section>
        <div class="pimg2">
           <div class="ptext">
               <span class="borderStyle">
                   Image2 Text
               </span>
           </div>
        </div>
        <section class="section section-dark">
           <h2>Section 1</h2>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, saepe.</p>
       </section>
       <div class="pimg3">
           <div class="ptext">
               <span class="borderStyle">
                   Image3 Text
               </span>
           </div>
        </div>
        <section class="section section-dark">
           <h2>Section 3</h2>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, saepe.</p>
       </section>
       <div class="pimg1">
           <div class="ptext">
               <span class="borderStyle">
                   Kenny's Site
               </span>
           </div>
        </div>
    </div>
 </body>
 </html>
javascriptcssarraysangularngfor

Answer №1

In this particular situation, it seems that the issue is not related to Angular. Instead, adjusting the CSS settings can help in properly displaying the skills using flexbox or grid.

One approach could be wrapping all the skills in a container div and then applying flex properties to them.

Here's an example of how you can structure your HTML:

<section class="section section-light">
      <h2>Skills</h2>
      <div class="skill-list">
         <p class="skills" *ngFor="let skill of skills">{{skill.skill}}</p>
      </div>
 </section>

And here's how you can use CSS to style the skills container using flexbox:

.skill-list{
     display : flex;
     justify-content: space-between;
}

Answer №2

To utilize the css flexbox design, consider applying a class to your <p> element with the specified properties:

.<your chosen class name> {
  display: flex;
  flex-wrap: nowrap;
}

Answer №3

    For those who prefer not to get too deep into CSS attributes, consider checking out the [@angular/flex-layout][1] library.


          [1]: https://github.com/angular/flex-layout

        1. Creating rows can be done like this: 
        <div fxLayout="row wrap">
          <div fxFlex="50%" [fxFlex.lt-md]="100%" fxLayoutAlign="start center">

          </div>
          <div fxFlex="50%" [fxFlex.lt-md]="100%" fxLayoutAlign="end center">

          </div>
        </div>

        2. To make columns:

        <div fxLayout="column wrap">
          <div fxFlex="50%" fxLayoutAlign="start center">

          </div>
          <div fxFlex="50%" fxLayoutAlign="end center">

          </div>
        </div>


    The [fxFlex.lt-md] attribute ensures responsive styling based on the viewport of the user. Other options include *.lt-sm, *.lt-md, *.gt-sm, and more.

You can also utilize flexLayout directives such as "fxLayoutAlign" and others...

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

When attempting to display an identical image on two distinct canvas elements in Angular 6

I am facing an issue where the image is only rendered on the second canvas instead of both canvases. I need assistance in finding a solution to render the same image on both canvases. Below is a screenshot demonstrating that the image is currently only re ...

javascriptangularimagetypescript

How can I dynamically resize an element based on the height of its content in Ionic?

Is there a way to make my element expand conditionally? I would like it to expand on click based on the height of its content. This is what the component's HTML looks like: <div class="container" [style.height]="enlarged === true ? ...

htmlcssangularionic-frameworkionic4

Is there a way to determine the actual time or percentage completion of a file upload using Telerik RadUpload?

Utilizing the Telerik upload file control with manager is a key component of my project: <telerik:RadUpload ID="RadUpload" Runat="server" MaxFileInputsCount="5" /> <telerik:RadProgressManager ID="RadProgressManager" Runat="server" /> For clie ...

javascriptjqueryasp.nettelerik

What is the best way to align the Burger menu with the logo on the same row and have the menu dropdown open below the header?

Is there a way to align the Burger menu with the logo and have the menu dropdown open below the header? I attempted to position the burger menu next to the logo, but it didn't turn out the way I thought it would. Coding in html and css is still new t ...

htmlcssbootstrap-5

What is the correct way to integrate HTML input elements into JavaScript code without encountering a type error?

I'm having some trouble with this code snippet. It's my first time coding and I can't figure out what's causing the issue. The error message I'm receiving is: "TypeError: Cannot read properties of null (reading 'value&ap ...

javascripthtml

Is there a way to submit the value of a textbox that has been generated dynamically using jQuery?

I am currently using the CodeIgniter framework and am attempting to incorporate textboxes in an HTML form. When the user clicks a button, a new textbox should be generated automatically using jQuery. However, when I submit the form, the values of the dynam ...

phpjavascriptjqueryhtmlcodeigniter

Guide on displaying an item fetched from a GraphQL database API in a React Native app

When sending a query to the graphql API, the response object can be seen in the console log (refer to the example output provided). This response can be stored in a variable for rendering in a flatlist. However, extracting elements from this variable using ...

arraysjsonreact-nativeobjectrender

The navigation function in Angular, this.router.navigate, is causing issues and

I've encountered a peculiar issue. There's a logout function that is activated whenever I receive a 401 response from any API I interact with. The function looks like this: constructor( private router: Router, ) {} logout(router1: Router ...

angulartypescriptfrontend

Creating a reverse proxy using next.js

My goal is to set up a reverse proxy for the GeForce NOW website using Next.js, but I'm struggling to make it work. module.exports = { async rewrites() { return [ { source: '/:slug', destination: 'https://pla ...

javascriptproxynext.jsreverse-proxy

Access AWS Lambda environment variables in Node.js using webpack

Looking to access environment variables in Node.js with Webpack? When trying to access them using process.env null values are returned. ...

javascriptnode.jsexpresswebpackaws-lambda

Avoiding the utilization of automatically generated JSON files as a data source in Rails when

I have implemented javascript code that uses JSON to generate a timeline. The JSON is being created using json_builder and it contains only the current user's information. The JSON displays correctly when accessed directly through its URL, but when th ...

javascriptruby-on-railsjson

Changing the ngModel with input length condition

I'm trying to implement a character limit for integers in an input field similar to the maxlength attribute used for text types. Here is the code snippet from my template: <ion-input type="number" placeholder="Username (required)" ...

angularionic2angular2-template

Currently, I am expanding my knowledge of PHP and MySQL by working on a dynamic form that utilizes arrays. As I progress through the project,

One of my recent projects involved creating dynamic rows in a form using code. I managed to save the data in an array and display it using a foreach loop, but I'm facing challenges when trying to insert this data into a database. Here's a glimps ...

javascriptphpcssmysql

Is there a way to verify if all elements within an array are identical?

For example, please confirm $a[0]=1; $a[0]=1; $a[0]=1; $a[0]=1; $a[0]=1; $a[0]=1; $a[0]=1; $a[0]=1; but not this: $a[0]=1; $a[0]=2; $a[0]=1; $a[0]=1; $a[0]=1; $a[0]=1; $a[0]=1; $a[0]=1; Thank you :) ...

phparrays

Attempting to delete a record in a Node.js Express MongoDB Jade application

I am facing a challenge with my application as I attempt to incorporate a button that can delete an entry containing a date and link. When I trigger the button, I encounter an error message stating: Error 404 not found. The goal is to input the date and li ...

javascriptnode.jsmongodbexpresspug

JavaScript and CSS Modal showing incorrect data

Currently, I am utilizing a Jinja2 Template within Flask to render an HTML document. The process involves passing a dictionary called "healthy_alerts" into the Jinja template. Below is a snippet of the dictionary (with sensitive values altered): healthy_a ...

javascripthtmlflaskmodal-dialog

Integrate Vue.js project to store images in MS Azure cloud storage

I am currently exploring the VueJs framework and looking to integrate my project with Azure. However, I am unsure of the process. Previously, I worked with Firebase - is it a similar technique where we configure storage within the project? Recently, I cre ...

javascriptazurevue.jsvuejs2

Retrieve a specific item from a JSON response using Node.js

When I receive a message from a WebSocket, the code snippet is triggered like this: ws.onmessage = (e) => { debugger if (e.data.startsWith('MESSAGE')) alert(JSON.stringify(e.data)) ImageReceived(e.data) c ...

javascriptnode.jsjsonwebsocket

State changes are not being properly reflected in the function within Next.Js

I am currently working on a functional component that displays an array of products. The products are received as props and the component utilizes the useEffect and useState hooks to manage its state. One of the functionalities I am trying to implement is ...

javascriptreactjsreact-hooksnext.jsuse-state

Modal failing to update with latest information

My webpage dynamically loads data from a database and presents it in divs, each with a "View" button that triggers the method onclick="getdetails(this)". This method successfully creates a modal with the corresponding data. function getdetails(par) { ...

javascriptjqueryasp.netajaxtwitter-bootstrap