Using Typescript to combine strings with the newline character

Currently, I am delving into Angular2 and facing the challenge of creating a new line for my dynamically generated string.

For example:

input:

Hello how are you ?

output:

Hello

how

are

you?

Below is the code snippet:

.html

<div class="row">
                <div class="well"gt;
                    <h1 class="text-center">Import Data</h1>
                    <p class="text-center">{{selectedLogContent.message}}</p>
                </div>
            </div>

This corresponds to the typescript code:

var splitString = selectedRows[0].description.split(":");
            var messageString= splitString[3].split(".");
            var messageStringAfter ="";
            for(var i=0;i<messageString.length;i++){
                messageStringAfter= messageStringAfter+`\ 
                \n`+messageString[i];
            }
            var finalString = splitString[0]+":"+splitString[1]+":"+splitString[2]+': '+messageStringAfter;
            console.log(finalString);
            this.selectedLogContent.message = finalString;

I attempted to use '\n' during string concatenation, but couldn't achieve the desired output in separate lines.

Your help would be greatly appreciated! Thank you.

Answer №1

To implement this in Angular 2, all you need is to use *ngFor as shown below:

<div *ngFor="let s of values.split(' ')">
      {{s}} <br/>
</div> 

Check out the LIVE DEMO here.

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

Dealing with null-safe operators issues has been a challenge for me, especially while working on my Mac using

Hey everyone! I'm encountering errors when using null sage operators in TypeScript. Can someone help me figure out how to solve this issue? By the way, I'm working on Visual Studio Code for Mac. https://i.stack.imgur.com/huCns.png ...

Having trouble navigating typescript's "import" syntax in conjunction with compiler options like module and choosing between esnext and commonjs?

I am facing an issue with my typescript project that includes mocha tests. Here is a snippet of how the tests start: import { assert } from "chai"; import "@material/mwc-ripple"; //I need to test a script that uses this describe("simple test", () => { ...

Viewability of external values in angular designs

Currently, I am facing an issue where multiple modules have duplicated options within the class field: ... options = ['opt1','opt1'] ... To solve this problem, I want to move the duplicated options to a constants module and then im ...

Change the background color of a span element dynamically

I am currently working on implementing dynamic background coloring for a span tag in my Angular view that displays document types. The code snippet provided is as follows: <mat-card *ngFor="let record of records"> <span class="doc ...

Troubleshooting Angular 2 routes failing to function post aot compilation deployment

Currently, I am implementing RouterModule in my project and have the following configuration in my app.module.ts file: const appRoutes: Routes = [ { path: '', redirectTo: 'mainMenu', pathMatch: 'full' }, { path: 'mainMen ...

Converting TypeScript to ES5 in Angular 2: A Comprehensive Guide

I am currently diving into Angular 2 and delving into Typescript to create simple applications within the Angular 2 framework. What I have discovered is that with Typescript, we can utilize classes, interfaces, modules, and more to enhance our application ...

When comparing the values of two arrays with undefined property values

Struggling with sorting an array of arrays that works perfectly except when the property value is undefined. Take this example: posts array = {id: "1", content: "test", "likes":[{"user_id":"2","user_name":"test"}] }, {id: "2", content: "test", "likes": ...

An issue (TC2322) has been encountered during the compilation of the Angular4 application

Encountered an issue while running the "ng build" command: ERROR in src/app/model/rest.datasource.ts(34,5): error TS2322: Type 'Observable<Product | Order | Product[] | Order[]>' is not assignable to type 'Observable<Product[]>& ...

The URL dynamically updates as the Angular application loads on GitHub Pages

Encountering an unusual issue when trying to access my angular website on GitHub pages. The URL unexpectedly changes upon opening the page. Please check it out at this link: The original expected URL should be However, as the page loads, the URL gets alt ...

Angular 2 wrap-up: How to seamlessly transfer filter data from Filter Component to App Component

A filtering app has been created successfully, but there is a desire to separate the filtering functionality into its own component (filtering.component.ts) and pass the selected values back to the listing component (app.ts) using @Input and @Output functi ...

Adjusting various angular-cli configuration files or providing input variables

My application caters to different customers, requiring personalized configurations based on their needs. I am looking for a way to customize the settings in the angular-cli.json file each time I run ng build. Is there a method to: 1) Dynamically cha ...

Tips for extracting a keyword or parameters from a URL

I'm in the process of creating my personal website and I am interested in extracting keywords or parameters from the URL. As an illustration, if I were to search for "Nike" on my website, the URL would transform into http://localhost:3000/searched/Nik ...

Adjust the size of every card in a row when one card is resized

At the top of the page, I have four cards that are visible. Each card's height adjusts based on its content and will resize when the window size is changed. My goal is to ensure that all cards in the same row have equal heights. To see a demo, visit: ...

Transmit data to a modal popup in Angular 8

Here is the code snippet written in .ts file: openFormModal(id: number) { console.log(id); const modalRef = this.modalService.open(PartidoComponent); modalRef.componentInstance.id = id; //modalRef.componentInstance.id = id; modalRef.r ...

Is there a way to customize the default MuiCheckbox icon in theme.ts?

How can I customize the icon default prop for Mui checkbox? I followed the instructions provided here and used a snippet from the documentation: const BpIcon = styled('span')(({ theme }) => ({ borderRadius: 3, width: 16, height: 16, .. ...

How to access the selectedIndex and handle click events for select options in Angular4

Initially, my aim was to get the selectedIndex and then retrieve the selected data model, but I discovered that I could directly access the selected data model in Angular2 RC2 by following this link: Angular2 RC2 Select Option selectedIndex. However, I e ...

Interacting with an iframe within the same domain

I'm currently working on an application in Angular 6 that requires communication with an iframe on the same origin. I'm exploring alternative methods to communicate with the iframe without relying on the global window object. Is there a more effi ...

Unable to utilize MUI Dialog within a ReactDOMServer.renderToStaticMarkup() call

I recently started using the DIALOG component for the first time, expecting it to seamlessly integrate into my setup. However, much to my disappointment, it did not work as expected. After spending a considerable amount of time troubleshooting the issue, I ...

Encountering incorrect month while utilizing the new Date() object

My Objective: I am looking to instantiate a new Date object. Snippet of My Code: checkDates (currentRecSec: RecommendedSection){ var currActiveFrom = new Date(currentRecSec.activeFrom.year,currentRecSec.activeFrom.month,currentRecSec.activeFrom.day ...

Can we streamline a generic overloaded function's signature to make it more concise?

I have developed a streamlined Axios wrapper function that integrates zod-parsing and presents a discriminated union for improved error handling. While the implementation successfully maintains the default behavior of Axios to throw errors in certain cas ...