Not able to view line breaks i.e. \n

Question

I have lightning component, which shows a dynamic message -4

Here is the component code--

                        <!-- Success Message Start -->
                    <div class="slds-region_narrow slds-is-relative slds-m-top_small">
                        <div class="slds-theme_success slds-notify slds-notify_toast">
                            <span class="slds-icon_container slds-m-right_small slds-no-flex slds-align-top">
                                <lightning:icon class="slds-icon_small" iconName="utility:success" alternativeText="Success!" size="small" variant="inverse"></lightning:icon>
                            </span>
                            <div class="slds-notify__content">
                                <!-- Keeping preformatted considering different formatting sent from different componennts-->
                                <h2 class="slds-text-heading_small"><p>{!v.successMessage}</p></h2>
                            </div>
                            <!--div class="slds-notify__close">
                                <lightning:buttonIcon class="slds-m-left_small" alternativeText="Close" iconClass="" variant="bare-inverse" type="button" iconName="utility:close" size="large" onclick="{! c.close}"></lightning:buttonIcon>
                            </div> -->
                        </div>              
                    </div>
                <!-- Success Message End -->

Problem is when I try to set v.succesMessage with a text like ABCD \n DEF , it is not taking the line breaks, it shows properly in console logs and alerts.

I tried to use <p> instead of <h2> but it didn't work.

What can be the problem? which the class getting wrong?

Thanks

Answer 1

You're going to want to use aura:unescapedHtml and format your message to use HTML tags rather than newline characters. Something along the following lines:

<!-- Success Message Start -->
    <div class="slds-region_narrow slds-is-relative slds-m-top_small">
        <div class="slds-theme_success slds-notify slds-notify_toast">
            <span class="slds-icon_container slds-m-right_small slds-no-flex slds-align-top">
                <lightning:icon class="slds-icon_small" iconName="utility:success" alternativeText="Success!" size="small" variant="inverse"></lightning:icon>
            </span>
            <div class="slds-notify__content">
                <!-- Keeping preformatted considering different formatting sent from different componennts-->
                <h2 class="slds-text-heading_small"><p><aura:unescapedHtml value="{!v.successMessage}"/></p></h2>
            </div>
            <!--div class="slds-notify__close">
                <lightning:buttonIcon class="slds-m-left_small" alternativeText="Close" iconClass="" variant="bare-inverse" type="button" iconName="utility:close" size="large" onclick="{! c.close}"></lightning:buttonIcon>
            </div> -->
        </div>              
    </div>
<!-- Success Message End -->

And successMessage should contain a string that looks like:

'This is a test<p>with a paragraph break.'

rather than

'This is a test\n with a newline.'