Maintain the spacing of an element when utilizing *ngFor

Question

Maintain the spacing of an element when utilizing *ngFor

Using Angular.js and *ngFor to loop over an array and display the values. The goal is to preserve the spaces of elements in the array:

 string arr1 = ["    Welcome Angular   ", "Line1", "Line2", "   
 Done   "]

The current code snippet being used is:


<div *ngFor="let arrValue of arr1">
   {{arrValue}}
</div>

Current output:

Welcome Angular   
Line1
Line2
Done

Expected output:

    Welcome Angular   
Line1
Line2
    Done

How can the spaces of elements in the array be preserved without any modification?

Here's a link to a stackblitz example demonstrating the issue. Any insights on how to achieve the desired outcome would be greatly appreciated.

Thank you!

https://stackblitz.com/edit/ngfor-examples?file=app%2Fapp.component.ts,app%2Fapp.component.css

javascript angular typescript

Answer 1

Answer №1

Utilize the css property white-space: pre;

CSS

.preserve-whitespace {
  white-space: pre;
}

TS

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  arr1 = ['    Welcome Angular   ', 'Line1', 'Line2', '   Done   '];
  name = 'Angular';
}

HTML

<div *ngFor="let arrValue of arr1" class="preserve-whitespace">
  {{ arrValue }}
</div>

view forked stackblitz

Answer 2

Utilize the css property white-space: pre;

CSS

.preserve-whitespace {
  white-space: pre;
}

TS

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  arr1 = ['    Welcome Angular   ', 'Line1', 'Line2', '   Done   '];
  name = 'Angular';
}

HTML

<div *ngFor="let arrValue of arr1" class="preserve-whitespace">
  {{ arrValue }}
</div>

view forked stackblitz

Answer 3

Answer №2

Give this a shot

<div *ngFor="let value of array1">
   <pre>{{value}}</pre>
</div>

Answer 4

Give this a shot

<div *ngFor="let value of array1">
   <pre>{{value}}</pre>
</div>

Answer 5

Answer №3

To achieve the desired outcome, you can utilize CSS's white-space: pre-wrap;. You have the option to implement it inline as shown below:

YourComponent.html

<div style="white-space: pre-wrap;">

Alternatively, you can assign a CSS class to the specific div element like this:

styles.scss

.white-space {
  white-space: pre-wrap;
}

YourComponent.html

<div class="white-space">

Answer 6

To achieve the desired outcome, you can utilize CSS's white-space: pre-wrap;. You have the option to implement it inline as shown below:

YourComponent.html

<div style="white-space: pre-wrap;">

Alternatively, you can assign a CSS class to the specific div element like this:

styles.scss

.white-space {
  white-space: pre-wrap;
}

YourComponent.html

<div class="white-space">

Answer 7

Answer №4

Consider implementing the steps below:

<div *ngFor="let item of itemsArray">
   <pre>
   {{item}}
   </pre>
</div>

Answer 8

Consider implementing the steps below:

<div *ngFor="let item of itemsArray">
   <pre>
   {{item}}
   </pre>
</div>

Maintain the spacing of an element when utilizing *ngFor

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Postgres.js Date Range query failing to fetch any results

What is the best way to ensure that an element remains active even after a page refresh?

Utilizing checkboxes for toggling the visibility of buttons in Angular

The Angular CLI suddenly decided to stop providing me with useful lines (without sourcemaps) in the browser console, but interestingly the terminal continues

React Router imports and renders multiple components

changing size when hovered over with the mouse is not consistent between entering and exiting

The window.open function is returning a null value after attempting to open the specified

Steps for integrating external components into Laravel 5.3 with VueJs Routes

An effective way to determine the size of a browser through javascript

Uploading a Node.js Package to GitHub Packages - Issue ENEEDAUTH

When trying to bind an object that is constantly changing, one-way binding may not effectively capture those dynamic modifications

Commitment failing to deliver the information

Retrieving the unprocessed data from a Stripe webhook in Nest.js

Discovering a method to recover information obtained through intercepting an observable

Using jQuery to automatically select a specific radio button after the load() function is executed

What is the best way to convert a date to ISO 8601 format using JavaScript? Are there any built-in functions or methods in

Updating the state in a different component using React and Typescript

Why does the AngularJS ngRepeat filter permanently remove null values?

What is the process of creating the /dist folder in an unreleased version of an npm package?

Why do certain URLs bypass the filters despite not meeting the criteria in the Chrome extension?