Adding a line break (\n) in a paragraph within a TypeScript file and then transferring it to HTML does not seem to be functioning properly

Angular Website Component:

HTML file

<content-section [text]="data"></content-section>

TypeScript file

data = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`;

Expected Output:

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Actual Output:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

javascriptangulartypescriptstring

Answer №1

To display line breaks in text, simply include the white-space: pre-line; property in your CSS.

custom-styles.css

p {
    white-space: pre-line;
}

index.html

<p> {{ bodyContent }} </p>

Answer №2

To properly display line breaks in your content, you must convert the newline character to a <br> tag within Angular. The paragraph tag does not automatically render newlines as line breaks; instead, it treats them as spaces. Additionally, make sure to utilize the innerHTML directive to allow Angular to render HTML properties.

Your component structure should resemble the following example:

@Component({
  selector: 'home-page',
  template: `<p [innerHTML]="content"></p>`
})
export class MyComonent {
  content = '';

  @Input()
  set copy(input: string) {
    this.content = `<p>${input.split(/\n/g).join('</p><p>')}</p>`;
  }
}

Check out this live example for reference.

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

The plugin "proposal-numeric-separator" was not found. Please make sure that there is a corresponding entry for it in the ./available-plugins.js file

{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "myProjects", "projects": { "uniqueApp": { "projectType": "web-app", "schematics": {}, "root": "", "sourceRoot": "src", ...

angular

Transmitting the Flag between PHP and JavaScript

I need help with setting a flag in PHP and accessing it in JavaScript. Currently, I have the following code: PHP if ($totalResults > MAX_RESULT_ALL_PAGES) { $queryUrl = AMAZON_SEARCH_URL . $searchMonthUrlParam . ...

javascriptphpflags

JavaScript Transcriber

Hey there! I'm currently attempting to compile some JavaScript code that I have written in a textarea and get the output of this code. I've tried using the eval() method, but unfortunately, I haven't been able to get the complete response. C ...

javascriptnpmdependencies

Tips for triggering multiple components in Angular2 with a single event

My current project involves an input component, an output component, and a processing service. The goal is to allow the user to input a string, have it processed by the processing service, and then display the processed message in the output component. How ...

eventsserviceangularcomponents

Tips on utilizing innerHTML or innerText to add content to the Evernote editor, a rich text editor

A method authored by Jayant was employed in this particular post how-to-insert-text-into-the-textarea-at-the-current-cursor-position to perform an insertion into the Evernote editor. The Evernote editor being a rich text editor, altering from el.value to ...

javascripthtmlevernote

Angular CLI version incompatibility has been encountered. This particular version of CLI is specifically designed to work with Angular versions ^13.0.0 || ^13.3.0-rc.0. However, the system detected Angular version 14

After updating my ionic project to Angular 14, everything worked smoothly when running ionic s. However, when I attempted to test it on my android device by running ionic cordova run android, I encountered the following error: [ng] This version of CLI is o ...

angularionic-frameworkionic-cliangular14

When working with an array of objects in Vue.js, what is the optimal approach: replacing the entire array or modifying individual values?

I am currently utilizing Vue and Vuex to dynamically generate components from an array retrieved from SQLite using the library better-sqlite3. let table=[ { id:1, column_1:'data', column_2:'data', column_3:{'1&apo ...

javascriptvue.jsvuejs2better-sqlite3

Enhancing the Look: A Guide to Angular Styling

As a newcomer to angular design and styling, I find myself facing a challenge in incorporating existing styles into my new project. My predecessor, who has since moved on from the project, had used certain styles that I need to adopt. Despite installing ui ...

angularuser-interfacestyles

Unreliable static URLs with Next.js static site generation

I've recently built a Next.js website with the following structure: - pages - articles - [slug].js - index.js - components - nav.js Within nav.js, I have set up routing for all links using next/link, including in pages/articles/[slug].j ...

javascriptroutesnext.js

Sending data with an Http POST request in Angular 2

I'm having difficulty with a POST request that I am trying to make: sendRequest() { var body = 'username=myusername&password=mypassword'; var headers = new Headers(); headers.append('Content-Type', 'applicat ...

typescriptangular

How can you personalize a website script by deactivating it using uBlock Origin and then reintegrating it as a userscript?

Can you imagine if it were possible to address a problematic portion of a script on a website by preventing the original script from loading, copying the source code, editing it, and then re-injecting it as a userscript with Tampermonkey? I attempted this ...

javascriptuserscripts

Ways to dynamically insert a new row into a table based on user input in a Postman-like reactive table

Is there a way to dynamically insert a row when a single character is entered into an input field in the header tab, similar to how Postman functions? 1) If a user types any single character in the td of the first row, then a new row should be added below ...

javascripthtmlangular

Troubleshooting issue: Next.js Material-ui CSS SSR not functioning properly within components

Upon completing my project, I discovered that SSR for Material-ui is not functioning on the page where I utilized functional components. Here is my _document.js file: [Code from _document.js] Example Page: [Code from E ...

javascriptreactjsmaterial-uinext.jsserver-side-rendering

Doesn't the use of asynchronous programming in Node.js lead to a potential StackOverflow issue?

Recently, I identified an issue with the Node.js (single-threaded) platform: As requests are handled by the server and they undergo processing until being blocked due to I/O operations. Once a request is blocked for processing, the server switches ba ...

javascriptnode.js

Getting the local folder name using AngularJs

Is there a way to retrieve the directory name by browsing to a folder and clicking a button? I was considering utilizing <input type="file" /> to achieve this. ...

javascriptangularjsnode.js

The functionality of Node.js's hasOwnProperty method fails to return true even for existing properties

When a user logs into my Node.js Express application using Passport, their user object is saved in the request. Here is an example of what the user object may look like: { "uuid": "caa5cb58-ef92-4de5-a419-ef1478b05dad", "first_name": ...

javascriptnode.jshasownproperty

Tips for increasing the number of inputs within a form using <script> elements

I am currently working on a form within the script tags and I would like to include additional input fields before submitting. However, the submit button seems to be malfunctioning and I suspect that there may be an issue with how I am accessing it in my c ...

javascriptjqueryhtmlforms

What is the best way to add a `<div>` before or after a specific `<p>` element based on the client's height?

I am facing an issue with inserting a div before a paragraph element based on the given clientHeight. Specifically, I need to locate the closest paragraph element from the specified clientHeight and then add a div before or after that particular element. ...

javascripthtmlvue.js

javascript issue with fetching data from URL using the GET method

Here is my attempt to fetch a JSON file from a server using asynchronous JavaScript promises. I am experiencing an issue where the result is undefined when using a specific URL, but it works when I use a different URL. Below is the working code with a dif ...

javascriptjqueryjson

What is the reason behind being able to assign unidentified properties to a literal object in TypeScript?

type ExpectedType = Array<{ name: number, gender?: string }> function go1(p: ExpectedType) { } function f() { const a = [{name: 1, age: 2}] go1(a) // no error shown go1([{name: 1, age: 2}]) // error displayed ...

javascriptreactjsangulartypescript