Show information in two separate columns based on a specific criteria

In my current project with Angular, I am looking to present data in a two-column layout, with each row's placement determined by a specific condition.

<div class="row" *ngFor="let content of Content"> 
    <div class="col-md-6" *ngIf="content.group==='Date'">
        <div>{{content.title}}</div>
    </div>
</div>

For instance, suppose my data is categorized into two groups: text and date. I aim to populate the left column with data from the text group, while data from the date group should populate the right column.

htmlcssangularbootstrap-4

Answer №1

To achieve the precise desired output, some adjustments need to be made:

<div class="row"> 
    <div class="col-md-6">
        <div class="row" *ngFor="let item of Items">
          <div class="col-md-12" *ngIf="item.type==='Date'">{{item.name}}</div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row" *ngFor="let item of Items">
         <div class="col-md-12" *ngIf="item.type==='Text'">{{item.name}}</div>
        </div>
    </div>
</div>

This adjustment should bring out the desired result.

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

A guide to mastering the art of descending using three distinct class types

My script is functioning properly for a single class, but it fails to work for multiple classes with the same purpose. I attempted to transfer from div (#panel) to class (.panel) as I am using several classes. However, this adjustment did not resolve the i ...

jqueryhtmlcss

Updating the CSS: Using jQuery to modify the display property to none

I am facing an issue with displaying an element that is defined as display:none in CSS. I tried to use the .show() function in jQuery, but it's not working as expected. Here's the code snippet: CSS .element { position: absolute; display: no ...

javascriptjqueryhtmlcsssettimeout

How can I dynamically adjust the size of an image in a directory based on its filename with php?

Is it possible to resize a specific image in a folder by its name using PHP? ..................................................................................................................................................................... I have trie ...

phpcssimage

Tips for implementing index values in typescript within an Angular Material Table

<mat-cell *matCellDef="let element; let i index">{{ element.patientName }}<input type="hidden" [(ngModel)]="index" value={{i}}/></mat-cell> I created an index variable to access the value in the typescript f ...

angulartypescriptangular-material

There was an error in reading the 'nativeElement' property in Angular's waveform library, resulting in a TypeError

This is the code I wrote, but it is showing an error: The waveform should be created, but the function to create the waveform is not working. startRecording() { this.mediaSectionVisible = false; if (!this.isRecording) { this.isRecording = t ...

javascriptangularerror-handlingwaveformaudiowaveform

Troubles arising while using ng serve in Angular 2

I'm currently facing an issue during the installation process of an existing Angular application. When trying to run the application using the ng serve command, I encounter the following error message: The "@angular/compiler-cli" package was not prope ...

javascriptangularnpmnpm-install

Implementing CSS and HTML in Email Communication

I'm noticing a difference between how this appears in a browser versus an email. The text on the image looks perfect when viewed on Mozilla/Chrome, but when I use the same code in an email, the text ends up displaced below the image (right beneath it) ...

htmlcssemail

Place form at the center of the Bootstrap Modal

My question is, how can I center the entire form, including the input fields and labels, within the modal? Here is also a helpful Fiddle: http://example.com, although the snippet provided should work as well. <script src="https://example.com/bootstr ...

javascriptjqueryhtmlcsstwitter-bootstrap

Issue with border rendering on triangles in CSS on IE8

I currently have a horizontal navigation bar with triangle borders inserted using :before and :after for each list item. This creates the illusion of a white bordered point on the right side of each list item. The issue I'm facing is that this design ...

htmlcssborderpseudo-element

When using Angular 2 formControl, manually changing the value may not be detected by the form

Having a simple form (as shown below), I am encountering an issue: Manually entering input value causes form.controls['myValue'].value to change If #myInput value is changed programmatically, the form completely ignores that change What could ...

angular

Unable to send message using window.parent.postMessage when src is set to "data:text/html;charset=utf-8" within an iframe

I'm currently working on a project to develop a compact editor that allows users to edit HTML using an iframe. I'm passing an HTML string into the src attribute as data:text/html, but I'm encountering challenges with communication in the par ...

javascripthtmlangularjs

retrieve the checkbox formgroup using the Response API

After following a tutorial on creating dynamic checkboxes, I now need to implement dynamic checkboxes using an API request. In my implementation so far, I have defined the structure as shown below: inquiry-response.ts interface Item { // Item interface ...

angulartypescriptcheckboxrxjsobservable

JavaScript code is functioning properly on Chrome and Internet Explorer, however, it may not be working on FireFox

Despite searching through the console, I am unable to find a solution to this issue. There are two images in play here - one is supposed to appear at specific coordinates while the other should follow the mouse cursor. However, the image intended to track ...

javascriptcsshtml

Issue with jQuery DataTable: Unable to use column-level filters at the top and maintain a fixed height simultaneously

I am having an issue displaying data in a jQuery DataTable with a column level filter at the top, fixed height, and scroller enabled. Initially, I was able to display the column level filter at the top and it was functioning properly. However, when I set t ...

javascriptjqueryhtmldatatables

What is the best way to implement custom sorting for API response data in a mat-table?

I have been experimenting with implementing custom sorting in a mat-table using API response data. Unfortunately, I have not been able to achieve the desired result. Take a look at my Stackblitz Demo https://i.sstatic.net/UzK3p.png I attempted to implem ...

htmlangulartypescript

Javascript is experiencing a decrease in the variability of its content

I currently have multiple pages structured like this: <body> <table><tr><td align="center" width="100%"> --PAGE HTML-- </td></tr></table> </body> For a temporary period, I need to change the str ...

javascriptjqueryhtmlcss

Why won't my dropdown menu work properly with JavaScript on certain pages?

Being new to javascript, I encountered an issue with a function that I recently modified. When a user selects "Yes" from a dropdown menu, it should generate 3 text boxes within a specific div area. Below is the code for my form dropdown: <select name= ...

javascripthtmlonselect

Creating Canvas dimensions to match the dimensions of a rectangle specified by the user

When the code below runs, it correctly generates a rectangle the same size as the canvas on start-up. However, an issue arises when the user clicks the button to generate a new canvas - the rectangle does not appear. Can someone please provide assistance ...

javascriptjqueryhtmlcanvas

Is it recommended to store SCSS and TypeScript files in the wwwroot folder in ASP.NET Core and Angular 2 development?

I'm struggling to understand where I should place my ts and scss files. The wwwroot folder is specifically for static files, but the ts and scss files are compiled. Should I recreate a similar folder structure both in wwwroot and outside of it, and th ...

angularasp.net-core

Updating the checklist status using an ajax request: A step-by-step guide

Is it better to update the checklist status by making individual ajax calls for each checklist item or by making one call and updating it once completed? I have included a template showing how it currently looks and what I am aiming for. Unfortunately, I ...

javascriptjqueryhtmlcssajax