Adding a new line in the configurations of MatDialogConfig (Angular)

Here is a code snippet:

private mDialog: MatDialog,
const dialog = new MatDialogConfig();
msg = "I enjoy coding in Angular.\r\n I am learning TypeScript."

 dialog.data = {
                message:msg 
            };
alert (msg);
mDialog.open(ABCCustomDialogComponent, dialog);

After trying to alert the string 'msg', it displays a line break in the alert message window like this:

I enjoy coding in Angular
I am learning TypeScript

However, when displayed in the dialog box, the message does not show the line break. The output appears as follows:

I enjoy coding in Angular. I am learning TypeScript

Attempts with br and div tags did not result in printing the line break in the dialog box output.

Any ideas on what could be going wrong?

angulartypescript

Answer №1

If you need to preserve white spaces in your text, using the white-space css property is what you're looking for. In this scenario:

.mat-dialog-content {
    white-space: pre-line;
}

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

Looping through template reference of material chip input using ngFor

I'm attempting to dynamically loop and generate Material chip inputs, as shown below: <section *ngFor="let basket of baskets"> <mat-form-field class="example-chip-list"> <mat-chip-list #chipList aria-label="Fruit selection"> ...

angular

Is it possible to lengthen a function in TypeScript?

I am part of a team responsible for maintaining a unique JavaScript library that generates spy functions. These spy functions are designed to allow users to monitor how a function is called, primarily used in the context of unit testing. Our library creat ...

typescript

React: Issue with passing arguments to redux action hooks

In my React application, I have implemented Redux-Toolkit to manage reducers and actions with slices. I am currently working on creating actions that can update and delete values from the store, requiring arguments for their usage. To achieve this, I have ...

reactjstypescriptreduxredux-toolkit

Issue during deployment: The type 'MiniCssExtractPlugin' cannot be assigned to the parameter type 'Plugin'

I'm working on deploying a Typescript / React project and have completed the necessary steps so far: Created a deployment branch Installed gh-pages for running the deployed application Added a deploy command as a script in the package.j ...

reactjstypescriptdeploymenthadoop-yarn

Is there a method to retrieve Mui state classes easily?

One thing I really appreciate is the way to style mui-components with their class names. I'm curious if there's a method to access state classes like Mui-checked using a variable. Let me delve deeper into this: I have a styled component that lo ...

reactjstypescriptmaterial-ui

After refreshing, the LocalStorage in Angular 2 seems to disappear

Something a little different here :) So, when attempting to log a user in, I am trying to store the access_token and expires in localStorage. It seems to be working "okay". However, if I refresh the page, the tokens disappear. Also, after clicking the log ...

javascriptangular

RxJs: Generating an observable based on changes in a field's value

Is there a way to generate an Observable using the variable this.pending as its source? I'm looking to create an Observable that will produce a new feed each time the value of this.pending changes. For example, if I update this.pending to be false i ...

typescriptrxjs

Guide on associating user IDs with user objects

I am currently working on adding a "pin this profile" functionality to my website. I have successfully gathered an array of user IDs for the profiles I want to pin, but I am facing difficulties with pushing these IDs to the top of the list of profiles. My ...

javascriptreactjstypescriptsortingnext.js

Utilizing React forwardRef with a functional component

Looking at my code, I have defined an interface as follows: export interface INTERFACE1{ name?: string; label?: string; } Additionally, there is a function component implemented like this: export function FUNCTION1({ name, label }: INTERFACE1) { ...

javascriptreactjstypescriptrefreact-forwardref

Can you explain the function and purpose of the <template> element in Angular 2?

Within the angular2 control file, specifically on line 91, there is a unique tag called <template>. What purpose does this tag serve? ...

angular

When using nodejs with sqlite3, the first callback parameter returns the class instance. How can this be resolved in order to prevent any issues?

Exploring a TypeScript class: class Log { public id: number; public text: string; construct(text: string){ this.text = text; } save(){ db.run( `insert into logs(text) values (?) `, this.text, ...

javascriptnode.jstypescriptsqliteelectron

What is the best way to transform Vue JS templates into clean HTML code?

Hello, I've received a request to convert a full VueJS template into pure HTML for use in Angular. While I have access to all of Vue's files and codebase, I'm wondering if there's a fast method to convert these templates into standard ...

htmlangularvue.js

Angular 2: Store all form inputs within a JSON object upon submission

I am working on a form that has multiple fields and I need to retrieve the data once it is submitted. This is the code in component.html : <div class="ui raised segment"> <h2 class="ui header">Demo Form: Sku</h2> <form #f="ngFor ...

jsonformsangulartypescriptangularjs-ng-form

What is the best way to showcase a file edited in Emacs within Atom?

The coding project I'm working on is built with Typescript, but I don't believe that's relevant. I've noticed that Emacs has a unique approach to indentation. According to the documentation, in Text mode and similar major modes, the TAB ...

typescriptemacsatom-editorindentation

Displaying JSON data using FormControls in Angular 5

Upon receiving Json values from the server, I am encountering an issue while binding them to respective textboxes. The problem arises as the value in the textbox appears as [object object] <h1>{{title}}</h1> <h3>Catalog</h3> ...

htmljsonangulartypescript

The issue arises when trying to pass multiple parameters with the Angular 2 router and encountering

After creating a sample Plunker to pass multiple parameters to the next page, I encountered an issue where the crisis center routing failed to work properly upon clicking on items. See the demonstration on Plunker here: http://plnkr.co/edit/ngNSsKBzAuhaP0E ...

angularangular2-routing

Pause before sending each request

How can we optimize the Async Validator so that it only sends a request to JSON once, instead of every time a letter is typed in the Email form? isEmailExist(): AsyncValidatorFn { return (control: AbstractControl): Observable<any> => { ...

javascriptangulartypescriptrxjsdebouncing

The browser is not displaying the HTML correctly for the Polymer Paper-Menu component

I attempted to implement a paper-menu, but I am facing issues with the rendered HTML and its interaction. When I click on a menu item, the entire list disappears due to the paper-item elements not being properly placed inside a key div within the paper-men ...

htmltypescriptangularpolymerpaper-elements

Angular 6 triggers NavigationCancel event when encountering valid guards

I'm encountering difficulties with the Angular router while trying to navigate to a specific state. Despite my attempts to utilize a custom guard with canLoad() and canActivate() functions that return true, I have not been successful. The Angular do ...

angularangular-routerangular-guards

Setting the Default Value for Dropdown Options in Angular 2

Back in the Angular 1 days, I had a trick up my sleeve for setting the default option on a dropdown menu: <select data-ng-model="carSelection" data-ng-options = "x.make for x in cars" data-ng-selected="$first"> </select> But now, in ...

htmlangular