Having difficulty in getting the heading to align with the left side

Looking for some guidance on creating a dynamic page similar to this DemoPage. The goal is to have the content editable and pulling data from the backend. However, I am facing challenges in achieving the desired layout as shown in the sample page CreatedPage.

The main issue I'm encountering is ensuring that the heading remains on the left side above each paragraph, while maintaining the alignment of the paragraphs and pictures which need to reverse with each iteration. Currently, I am using class binding based on an alignment property for reversing rows.

At the moment, the paragraphs are not aligning properly with the pictures, making it quite challenging to achieve the desired result. Any suggestions on how I can solve this issue? Feel free to review the code on this stackblitz site PageCreated

htmlcssangulartypescript

Answer №1

Perhaps you're hesitant to include a nested heading? Give this a try:

<h1>App Comp</h1>
<section>
  <div *ngFor="let item of data; even as isLeft">
    <h4>{{ item.heading }}</h4>
    <div class="card-item" [class.paraRight]="isLeft">
      <div class="image-container">
        <img [src]="item.image">
      </div>
      <div class="desc-container">
        <p>{{ item.paragraph }}</p>
      </div>
    </div>
  </div>
</section>

Answer №2

    <h1>Application Component</h1>
<div *ngFor="let item of data;even as isLeft">
      <h4>{{ item.heading }}</h4>      
    <section>
      <div class="card-item"  [class.paraRight]="isLeft">
    <div class="image-container">
      <img [src]="item.image">
    </div>
    <div class="desc-container">
      <p>{{ item.paragraph }}</p>
    </div>
  </div>  
</section>
</div>

Enhanced stack blitz interface https://stackblitz.com/edit/so-list-hqjqh5

Adjusted spacing between image and paragraph

img {
  max-width: 200px;
  padding:8px;
}

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

What is the best way to transform a string array into a number array?

I'm attempting to convert a string array into a number array and after conducting some research online, I came across this solution: let numbersAsStringArray = originalQueryParams[property] ?? [] let numbers = numbersAsStringArray.map((i) => ...

arraystypescript

Angular 2 is not recognizing the element 'router-outlet'

I am currently utilizing universal-cli... This is how my app.node.module.ts appears: /** * This file and `main.browser.ts` are quite similar, for now! * By separating these, you can create logic, imports, etc that are "Platform" specific. * If you wis ...

javascriptnode.jsangularangular-routinguniversal-cli

What steps can I take to successfully implement Tailwind CSS's max-w class?

After successfully using the proper class for setting max width in tailwind, it suddenly stopped working. I'm baffled by the fact that the max-w has refused to take effect. <section class="max-w-[80em]"></section> Previously, I ...

htmlcsstailwind-csswidth

Instructions for connecting my website's URL to a designated channel (button) on an external widget

My goal is to connect a channel from a third-party widget to my website through a URL link with a button. I want the channel to open directly under that specific URL. I attempted this method, but it seems to be ineffective: shareurexperience Animal "> ...

html

Having trouble configuring the sticky-footer correctly

Currently enrolled in a web development course on Udemy, I am facing an issue with the footer on my webpage. Even after setting its CSS position to relative, the footer overlaps the content when more data is added. However, removing this positioning causes ...

javascripthtmlcssejssticky-footer

Recurrence of solely the middle segment of the separator's background picture

I have a unique divider image with fading top and bottom parts. I'm wondering if it's possible to use a sprite and 3 divs to only repeat the middle section, considering that my height is variable. Do I need separate images for the top, middle, an ...

javascripthtmlcss

Leverage a custom server (such as NestJS) within NextJS to dynamically render targeted pages

I am experimenting with using NestJS as a custom server for NextJS, following the instructions in this article. Here is a simplified version of the code: @Controller('/') export class ViewController { @Get('*') async static(@Req() r ...

javascriptreactjstypescriptnext.jsnestjs

Concealing Angular Features Using a Button

Currently, I am experimenting with Angular and attempting to create a button that disappears when clicked. Despite trying methods like [hidden], (click)="showHide = !showHide", and several others, nothing seems to be working as expected. This is the curre ...

htmlangulartypescriptshow-hide

Having trouble customizing the toolbar on ngx-quill? Quill seems to be having trouble importing modules

UPDATE: I jumped ship when I discovered that PrimeNg had a quill implementation, and since I was already using PrimeNg, I switched over. Initially had some issues, but upgrading to angular 7 and ngrx 7 beta resolved them. https://www.primefaces.org/primeng ...

angularangular7quillngx-quill

The Expo TypeScript template highlights JSX errors such as "Cannot assign type 'boolean' to type 'View'. TypeScript error 2322 at line 5:10:5"

Just starting out with Expo and decided to dive in with the typescript template using the npx create-expo-app -t expo-template-blank-typescript command. However, I'm running into some JSX type errors that are popping up even though the Expo server see ...

reactjstypescriptexpo

Creating a composite object in Angular 2 reactive forms: a step-by-step guide

These are the two classes I have: export class Machine { name = ''; computer = new Computer() } export class Computer { os = ''; } Then in my component, using reactive forms, I have: ngOnInit() { this.form = this.fb ...

angularangular2-forms

The default value of components in Next.js

I'm working on establishing a global variable that all components are initially rendered with and setting the default value, but I'm unsure about how to accomplish the second part. Currently, this is what I have in my _app.tsx: import { AppProps ...

javascriptreactjstypescriptnext.js

Embracing this web design framework with Rails

Hey there, I am currently trying to integrate a free CSS/HTML/JavaScript template into my Rails project. You can download the template from here. The template consists of an index page, a single CSS file, and two JavaScript files. To implement this templa ...

htmlcssruby-on-railsruby-on-rails-5

Is it possible to reduce the brightness of a background image that has already been added?

I am encountering a situation that I find difficult to put into words. I have added an image as a 'background-image' and although it is small, it suits my needs as I am still learning. However, the issue lies in the brightness of the second repea ...

htmlcss

push one element to fit in between two adjacent elements

Is there a way to make my responsive webpage ensure that the full-screen element appears between sibling elements when viewed on mobile devices? Check it out on desktop or on mobile here. I have three (div) elements: two in one row and another in a separa ...

htmlcss

AngularJS is designed to provide alternating colors specifically for the objects that are currently visible within the complete set

Within my angularjs application, I am working with the following JSON data: $scope.itemsList = { "busName": "ABC", "needsToHide": true, "num": 123 }, { "busName": "xyz", "needsToHide": false, "num": 567 ...

cssangularjsangularjs-ng-repeatng-classangularjs-ng-class

What is the best way to authenticate an admin in the front-end using backend technologies like Node.js, Angular, and MongoDB?

Within the user model, there is a property named isAdmin with a default value of false. In MongoDB, I have manually created an admin account with the isAdmin property set to true. When logging in as an admin, the program verifies this and displays "admin ...

node.jsangularmongodbadminmean-stack

Material-ui v5's DataGrid now includes a new filter icon feature

The current default setting for the new DataGrid is to only display a filter icon when hovering over the column header with an applied filter. In contrast, the previous version had the icon visible at all times. For reference, you can view the Codesandbox ...

cssreactjsmaterial-uiemotioncss-in-js

What is the best way to format a text component so that the initial word in each sentence is bolded?

Creating a text component where the first word of the sentence is bold can be a bit tricky. The current solution may result in a messy output like "Tips: favouritevacation" where there is no space after "Tips:". This approach is not very elegant. One pos ...

javascriptreactjstypescript

What is the best way to change a timestamp into a date format using Angular?

I am struggling to convert a timestamp to the date format 'dd/MM/YYYY' but keep getting a different date format in the output. I am using syncfusion spreadsheet for this task. https://i.sstatic.net/BoRaa.png export-electronic.component.ts updat ...

angulartypescript