How to break line with TypeScript - html

Question

I am new to angular and I am trying to do a random quote generator. I got inspired from a tutorial and everything is fine until now but I want to add a line break between the quote and the author.
What I have:
Don't Let Yesterday Take Up Too Much Of Today. - Will Rogers
What I want:
Don't Let Yesterday Take Up Too Much Of Today.
Will Rogers
I have this code so far in my app.component.ts:
quotes = [
'The Pessimist Sees Difficulty In Every Opportunity. The Optimist Sees The Opportunity In Every Opportunity',
"Don\'t Let Yesterday Take Up Too Much Of Today. -Will Rogers",
'You Learn More From Failure Than From Success. Don\'t Let It Stop You'
]
getNewQuote() {
const quoteText = document.querySelector('.quote-text');
this.randomNumber = Math.floor(Math.random() * (this.quotes.length));
quoteText.textContent = this.quotes[this.randomNumber];
quoteText.textContent = this.quotes[this.randomNumber].split("-");
}
I tried
quoteText.textContent = this.quotes[this.randomNumber].split("-");
But is is just giving me:
Don't Let Yesterday Take Up Too Much Of Today. , Will Rogers
I looked for line break with typescript but none of what I did is working. How can i do it?

Answer 1

You are using TypeScript to generate the contents of an HTML page. Hence, your ultimate output is supposed to be HTML code. To break lines in HTML, use the <br> tag.
The output generated by your TypeScript code should be something like this:
<p>First Line.<br>Second Line</p>
Here is some reference.

Answer 2

It can be solved by just adding \n at the point where you want to break the quote.
//By adding \n in the text you can Break the line. Happy Coding!
var test = "Hello\nWorld";
console.log(test);

Answer 3

If you are setting up the quotes yourself, you can separate the author from the quote from the start.
I won't recommend using a regexp or split() to chunk a string in pieces unless you know very precisely where to split your string and that it never fails or splits at the wrong place.
example
Stackblitz: https://stackblitz.com/edit/angular-ivy-ogfspj?file=src/app/app.component.ts
app.component.ts
import { Component, OnInit } from '#angular/core';
interface Quote {
quote: string;
author: string;
}
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
public quote: Quote;
private quotes: Quote[];
ngOnInit(): void {
this.quotes = [
{
quote: 'The Pessimist Sees Difficulty In Every Opportunity. The Optimist Sees The Opportunity In Every Opportunity',
author: 'unknown'
}, {
quote: 'Don\'t Let Yesterday Take Up Too Much Of Today',
author: 'Will Rogers'
}, {
quote: 'You Learn More From Failure Than From Success. Don\'t Let It Stop You',
author: 'unknown'
}
]
this.random_quote()
}
private random_quote(): void {
const index = Math.floor( Math.random() * this.quotes.length );
this.quote = this.quotes[index];
}
}
app.component.html
<blockquote>
<i>{{quote.quote}}</i><br><br>
- {{quote.author}}
</blockquote>
takeaways for beginners
The big takeaways for beginners from this example would be:
use an interface to define a Quote type, this will be easier to work with
bind a property using {{}}
most of the time you want to initialise data in the ngOnInit lifecycle hook; You will probably refactor this code at some point to get the quotes from a service. Then you need to initialise quote in this hook.