3

I want to be able to edit this HTML page from a function where i can pass in 2 strings to edit the hyperText link with dashboardName and where it says with dashboardDisplayName.

I can't quite seem to find anything regarding being able to call an html file and edit it. I want to be able to take the html file change what I described based on the input of the getEmailHtml() function in the Typescript. Then with that i'd like to be able to take the contents of the editing HTML and set it as a string.

If anyone has any knowledge of anything involved in this problem i'd very much appreciate any help!

Angular Typescript file function i wish to edit with

import { Injectable } from '@angular/core';

/**
 * @description service for notifications
 */
@Injectable()
export class NotificationService {

    constructor() {}

    /**
     * @description gets the default HTML email message to be sent
     * uses Display Name for text in the Email and dashboardName for hyperlink to userdashboard
     * @param {string} dashboardName
     * @param {string} dashboardDisplayName
     */
    getEmailHtml(dashboardName: string, dashboardDisplayName: string): void {

    }
}

HTML file that I want to edit

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <!--[if gte mso 9]><xml>
     <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
     </o:OfficeDocumentSettings>
    </xml><![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width">
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
    <title>BF-basic-onecolumn</title>


    <style type="text/css" id="media-query">
        body {
            margin: 0;
            padding: 0;
        }

        table, tr, td {
            vertical-align: top;
            border-collapse: collapse;
        }

        .ie-browser table, .mso-container table {
            table-layout: fixed;
        }

        * {
            line-height: inherit;
        }

        a[x-apple-data-detectors=true] {
            color: inherit !important;
            text-decoration: none !important;
        }

        [owa] .img-container div, [owa] .img-container button {
            display: block !important;
        }

        [owa] .fullwidth button {
            width: 100% !important;
        }

        [owa] .block-grid .col {
            display: table-cell;
            float: none !important;
            vertical-align: top;
        }

        .ie-browser .num12, .ie-browser .block-grid, [owa] .num12, [owa] .block-grid {
            width: 500px !important;
        }

        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
            line-height: 100%;
        }

        .ie-browser .mixed-two-up .num4, [owa] .mixed-two-up .num4 {
            width: 164px !important;
        }

        .ie-browser .mixed-two-up .num8, [owa] .mixed-two-up .num8 {
            width: 328px !important;
        }

        .ie-browser .block-grid.two-up .col, [owa] .block-grid.two-up .col {
            width: 250px !important;
        }

        .ie-browser .block-grid.three-up .col, [owa] .block-grid.three-up .col {
            width: 166px !important;
        }

        .ie-browser .block-grid.four-up .col, [owa] .block-grid.four-up .col {
            width: 125px !important;
        }

        .ie-browser .block-grid.five-up .col, [owa] .block-grid.five-up .col {
            width: 100px !important;
        }

        .ie-browser .block-grid.six-up .col, [owa] .block-grid.six-up .col {
            width: 83px !important;
        }

        .ie-browser .block-grid.seven-up .col, [owa] .block-grid.seven-up .col {
            width: 71px !important;
        }

        .ie-browser .block-grid.eight-up .col, [owa] .block-grid.eight-up .col {
            width: 62px !important;
        }

        .ie-browser .block-grid.nine-up .col, [owa] .block-grid.nine-up .col {
            width: 55px !important;
        }

        .ie-browser .block-grid.ten-up .col, [owa] .block-grid.ten-up .col {
            width: 50px !important;
        }

        .ie-browser .block-grid.eleven-up .col, [owa] .block-grid.eleven-up .col {
            width: 45px !important;
        }

        .ie-browser .block-grid.twelve-up .col, [owa] .block-grid.twelve-up .col {
            width: 41px !important;
        }

        @media only screen and (min-width: 520px) {
            .block-grid {
                width: 500px !important;
            }

                .block-grid .col {
                    display: table-cell;
                    Float: none !important;
                    vertical-align: top;
                }

                    .block-grid .col.num12 {
                        width: 500px !important;
                    }

                .block-grid.mixed-two-up .col.num4 {
                    width: 164px !important;
                }

                .block-grid.mixed-two-up .col.num8 {
                    width: 328px !important;
                }

                .block-grid.two-up .col {
                    width: 250px !important;
                }

                .block-grid.three-up .col {
                    width: 166px !important;
                }

                .block-grid.four-up .col {
                    width: 125px !important;
                }

                .block-grid.five-up .col {
                    width: 100px !important;
                }

                .block-grid.six-up .col {
                    width: 83px !important;
                }

                .block-grid.seven-up .col {
                    width: 71px !important;
                }

                .block-grid.eight-up .col {
                    width: 62px !important;
                }

                .block-grid.nine-up .col {
                    width: 55px !important;
                }

                .block-grid.ten-up .col {
                    width: 50px !important;
                }

                .block-grid.eleven-up .col {
                    width: 45px !important;
                }

                .block-grid.twelve-up .col {
                    width: 41px !important;
                }
        }

        @media (max-width: 520px) {
            .block-grid, .col {
                min-width: 320px !important;
                max-width: 100% !important;
            }

            .block-grid {
                width: calc(100% - 40px) !important;
            }

            .col {
                width: 100% !important;
            }

                .col > div {
                    margin: 0 auto;
                }

            img.fullwidth {
                max-width: 100% !important;
            }
        }
    </style>
</head>
    <body class="clean-body" style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #FFFFFF">
        <!--[if IE]><div class="ie-browser"><![endif]-->
        <!--[if mso]><div class="mso-container"><![endif]-->
        <div class="nl-container" style="min-width: 320px;Margin: 0 auto;background-color: #FFFFFF">
            <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" style="background-color: #FFFFFF;"><![endif]-->
            <div style="background-color:#D9D9D9;">
                <div style="Margin: 0 auto;min-width: 320px;max-width: 500px;width: 500px;width: calc(19000% - 98300px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;" class="block-grid ">
                    <div style="border-collapse: collapse;display: table;width: 100%;">
                        <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="background-color:#D9D9D9;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width: 500px;"><tr class="layout-full-width" style="background-color:transparent;"><![endif]-->
                        <!--[if (mso)|(IE)]><td align="center" width="500" style=" width:500px; padding-right: 20px; padding-left: 20px; padding-top:20px; padding-bottom:20px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><![endif]-->
                        <div class="col num12" style="min-width: 320px;max-width: 500px;width: 500px;width: calc(18000% - 89500px);background-color: transparent;">
                            <div style="background-color: transparent; width: 100% !important;">
                                <!--[if (!mso)&(!IE)]><!--><div style="border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:20px; padding-bottom:20px; padding-right: 20px; padding-left: 20px;">
                                    <!--<![endif]-->
                                    <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 0px; padding-bottom: 0px;"><![endif]-->
                                    <div style="color:#555555;line-height:120%;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; padding-right: 10px; padding-left: 10px; padding-top: 0px; padding-bottom: 0px;">
                                        <div style="font-size:12px;line-height:14px;color:#555555;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;text-align:left;"><p style="margin: 0;font-size: 18px;line-height: 22px;text-align: center"><span style="font-size: 24px; line-height: 28px;"><strong><span style="line-height: 28px; font-size: 24px;">Notification from&#160;&lt;DashboardName&gt;</span></strong></span></p></div>
                                    </div>
                                    <!--[if mso]></td></tr></table><![endif]-->
                                    <!--[if (!mso)&(!IE)]><!-->
                                </div><!--<![endif]-->
                            </div>
                        </div>
                        <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
                    </div>
                </div>
            </div>    <div style="background-color:transparent;">
                <div style="Margin: 0 auto;min-width: 320px;max-width: 500px;width: 500px;width: calc(19000% - 98300px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;" class="block-grid ">
                    <div style="border-collapse: collapse;display: table;width: 100%;">
                        <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="background-color:transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width: 500px;"><tr class="layout-full-width" style="background-color:transparent;"><![endif]-->
                        <!--[if (mso)|(IE)]><td align="center" width="500" style=" width:500px; padding-right: 0px; padding-left: 0px; padding-top:30px; padding-bottom:30px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><![endif]-->
                        <div class="col num12" style="min-width: 320px;max-width: 500px;width: 500px;width: calc(18000% - 89500px);background-color: transparent;">
                            <div style="background-color: transparent; width: 100% !important;">
                                <!--[if (!mso)&(!IE)]><!--><div style="border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:30px; padding-bottom:30px; padding-right: 0px; padding-left: 0px;">
                                    <!--<![endif]-->
                                    <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 5px; padding-bottom: 10px;"><![endif]-->
                                    <div style="color:#aaaaaa;line-height:120%;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; padding-right: 10px; padding-left: 10px; padding-top: 5px; padding-bottom: 10px;">
                                        <div style="font-size:12px;line-height:14px;color:#aaaaaa;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;text-align:left;"><p style="margin: 0;font-size: 12px;line-height: 14px;text-align: center"><span style="font-size: 16px; line-height: 19px; color: rgb(0, 0, 0);">Dashboard: &lt;DashboardName&gt; has been updated. </span></p><p style="margin: 0;font-size: 16px;line-height: 19px;text-align: center"><a style="color:#0000FF;color:#0000FF;text-decoration: underline;" href="http://localhost:8080/DashboardConsole/ownerManyFields" target="_blank" rel="noopener noreferrer">Click here to view the updated Dashboard</a></p></div>
                                    </div>
                                    <!--[if mso]></td></tr></table><![endif]-->
                                    <!--[if (!mso)&(!IE)]><!-->
                                </div><!--<![endif]-->
                            </div>
                        </div>
                        <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
                    </div>
                </div>
            </div>    <div style="background-color:#444444;">
                <div style="Margin: 0 auto;min-width: 320px;max-width: 500px;width: 500px;width: calc(19000% - 98300px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;" class="block-grid ">
                    <div style="border-collapse: collapse;display: table;width: 100%;">
                        <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="background-color:#444444;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width: 500px;"><tr class="layout-full-width" style="background-color:transparent;"><![endif]-->
                        <!--[if (mso)|(IE)]><td align="center" width="500" style=" width:500px; padding-right: 0px; padding-left: 0px; padding-top:10px; padding-bottom:10px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><![endif]-->
                        <div class="col num12" style="min-width: 320px;max-width: 500px;width: 500px;width: calc(18000% - 89500px);background-color: transparent;">
                            <div style="background-color: transparent; width: 100% !important;">
                                <!--[if (!mso)&(!IE)]><!--><div style="border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:10px; padding-bottom:10px; padding-right: 0px; padding-left: 0px;">
                                    <!--<![endif]-->


                                    <div align="center" class="button-container center" style="padding-right: 10px; padding-left: 10px; padding-top:10px; padding-bottom:10px;">
                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top:10px; padding-bottom:10px;" align="center"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:42px; v-text-anchor:middle; width:212px;" arcsize="10%" strokecolor="#3AAEE0" fillcolor="#3AAEE0"><w:anchorlock/><center style="color:#ffffff; font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:16px;"><![endif]-->
                                        <div style="color: #ffffff; background-color: #3AAEE0; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; max-width: 192px; width: 152px; width: auto; border-top: 0px solid transparent; border-right: 0px solid transparent; border-bottom: 0px solid transparent; border-left: 0px solid transparent; padding-top: 5px; padding-right: 20px; padding-bottom: 5px; padding-left: 20px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; text-align: center; mso-border-alt: none;">
                                            <span style="font-size:16px;line-height:32px;"><span style="font-size: 12px; line-height: 24px;" data-mce-style="font-size: 12px;"><strong><span style="line-height: 24px; font-size: 12px;" data-mce-style="line-height: 24px;">Click here to unsubscribe</span></strong></span></span>
                                        </div>
                                        <!--[if mso]></center></v:roundrect></td></tr></table><![endif]-->
                                    </div>

                                    <!--[if (!mso)&(!IE)]><!-->
                                </div><!--<![endif]-->
                            </div>
                        </div>
                        <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
                    </div>
                </div>
            </div>   <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
        </div>
        <!--[if (mso)|(IE)]></div><![endif]-->
    </body>
</html>
Improve this question
4
  • So you just need to do a string replacement in the HTML? Or are you also allowing the user to do edits to this HTML? Commented Aug 24, 2017 at 19:08
  • just string replacing in 3 places where it has <DashboardName> and the href to replace where it currently says "ownerManyFields" Commented Aug 24, 2017 at 19:11
  • this will be done automatically and then be parsed into a string into a textarea for the user then to either use or edit Commented Aug 24, 2017 at 19:12
  • You using wrong approach, you don't need to replace but you can keep variable on your component and bind them on html, rest will be take care automatically Commented Aug 24, 2017 at 19:26

3 Answers 3

Reset to default
1

You can replace text in any string using the JavaScript replace feature as detailed here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

Something like this:

let yourNewString = yourHTMLString.replace('/<DashboardName>/g', dashboardName);

OR

let text = '<DashboardName>';
let yourNewString = yourHTMLString.replace(new RegExp(text, 'g'), dashboardName);

Adding the 'g' provides a global search/replace.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

how would I reference the html file (named default.email.html) i've never used HTML files in Angular in this way only in components or dialogs so i'm unsure of what the best approach would be in this case.
I assume it would be treated as a string defined in your code somewhere. If it really needs to be an external file you are pulling from somewhere, then I don't know.
0

Thanks to DeborahK I managed to get it to work how I want it to!

Working File Below

import { Injectable } from '@angular/core';

/**
 * @description service for notifications
 */
@Injectable()
export class DefaultEmailService {

    setHtml: string;
    defaultEmailHtml: string = 
`
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
    <head>
        <!--[if gte mso 9]><xml>
         <o:OfficeDocumentSettings>
          <o:AllowPNG/>
          <o:PixelsPerInch>96</o:PixelsPerInch>
         </o:OfficeDocumentSettings>
        </xml><![endif]-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width">
        <!--[if !mso]><!-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
        <title>BF-basic-onecolumn</title>


        <style type="text/css" id="media-query">
            body {
                margin: 0;
                padding: 0;
            }

            table, tr, td {
                vertical-align: top;
                border-collapse: collapse;
            }

            .ie-browser table, .mso-container table {
                table-layout: fixed;
            }

            * {
                line-height: inherit;
            }

            a[x-apple-data-detectors=true] {
                color: inherit !important;
                text-decoration: none !important;
            }

            [owa] .img-container div, [owa] .img-container button {
                display: block !important;
            }

            [owa] .fullwidth button {
                width: 100% !important;
            }

            [owa] .block-grid .col {
                display: table-cell;
                float: none !important;
                vertical-align: top;
            }

            .ie-browser .num12, .ie-browser .block-grid, [owa] .num12, [owa] .block-grid {
                width: 500px !important;
            }

            .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
                line-height: 100%;
            }

            .ie-browser .mixed-two-up .num4, [owa] .mixed-two-up .num4 {
                width: 164px !important;
            }

            .ie-browser .mixed-two-up .num8, [owa] .mixed-two-up .num8 {
                width: 328px !important;
            }

            .ie-browser .block-grid.two-up .col, [owa] .block-grid.two-up .col {
                width: 250px !important;
            }

            .ie-browser .block-grid.three-up .col, [owa] .block-grid.three-up .col {
                width: 166px !important;
            }

            .ie-browser .block-grid.four-up .col, [owa] .block-grid.four-up .col {
                width: 125px !important;
            }

            .ie-browser .block-grid.five-up .col, [owa] .block-grid.five-up .col {
                width: 100px !important;
            }

            .ie-browser .block-grid.six-up .col, [owa] .block-grid.six-up .col {
                width: 83px !important;
            }

            .ie-browser .block-grid.seven-up .col, [owa] .block-grid.seven-up .col {
                width: 71px !important;
            }

            .ie-browser .block-grid.eight-up .col, [owa] .block-grid.eight-up .col {
                width: 62px !important;
            }

            .ie-browser .block-grid.nine-up .col, [owa] .block-grid.nine-up .col {
                width: 55px !important;
            }

            .ie-browser .block-grid.ten-up .col, [owa] .block-grid.ten-up .col {
                width: 50px !important;
            }

            .ie-browser .block-grid.eleven-up .col, [owa] .block-grid.eleven-up .col {
                width: 45px !important;
            }

            .ie-browser .block-grid.twelve-up .col, [owa] .block-grid.twelve-up .col {
                width: 41px !important;
            }

            @media only screen and (min-width: 520px) {
                .block-grid {
                    width: 500px !important;
                }

                    .block-grid .col {
                        display: table-cell;
                        Float: none !important;
                        vertical-align: top;
                    }

                        .block-grid .col.num12 {
                            width: 500px !important;
                        }

                    .block-grid.mixed-two-up .col.num4 {
                        width: 164px !important;
                    }

                    .block-grid.mixed-two-up .col.num8 {
                        width: 328px !important;
                    }

                    .block-grid.two-up .col {
                        width: 250px !important;
                    }

                    .block-grid.three-up .col {
                        width: 166px !important;
                    }

                    .block-grid.four-up .col {
                        width: 125px !important;
                    }

                    .block-grid.five-up .col {
                        width: 100px !important;
                    }

                    .block-grid.six-up .col {
                        width: 83px !important;
                    }

                    .block-grid.seven-up .col {
                        width: 71px !important;
                    }

                    .block-grid.eight-up .col {
                        width: 62px !important;
                    }

                    .block-grid.nine-up .col {
                        width: 55px !important;
                    }

                    .block-grid.ten-up .col {
                        width: 50px !important;
                    }

                    .block-grid.eleven-up .col {
                        width: 45px !important;
                    }

                    .block-grid.twelve-up .col {
                        width: 41px !important;
                    }
            }

            @media (max-width: 520px) {
                .block-grid, .col {
                    min-width: 320px !important;
                    max-width: 100% !important;
                }

                .block-grid {
                    width: calc(100% - 40px) !important;
                }

                .col {
                    width: 100% !important;
                }

                    .col > div {
                        margin: 0 auto;
                    }

                img.fullwidth {
                    max-width: 100% !important;
                }
            }
        </style>
    </head>
    <body class="clean-body" style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #FFFFFF">
        <!--[if IE]><div class="ie-browser"><![endif]-->
        <!--[if mso]><div class="mso-container"><![endif]-->
        <div class="nl-container" style="min-width: 320px;Margin: 0 auto;background-color: #FFFFFF">
            <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" style="background-color: #FFFFFF;"><![endif]-->
            <div style="background-color:#D9D9D9;">
                <div style="Margin: 0 auto;min-width: 320px;max-width: 500px;width: 500px;width: calc(19000% - 98300px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;" class="block-grid ">
                    <div style="border-collapse: collapse;display: table;width: 100%;">
                        <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="background-color:#D9D9D9;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width: 500px;"><tr class="layout-full-width" style="background-color:transparent;"><![endif]-->
                        <!--[if (mso)|(IE)]><td align="center" width="500" style=" width:500px; padding-right: 20px; padding-left: 20px; padding-top:20px; padding-bottom:20px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><![endif]-->
                        <div class="col num12" style="min-width: 320px;max-width: 500px;width: 500px;width: calc(18000% - 89500px);background-color: transparent;">
                            <div style="background-color: transparent; width: 100% !important;">
                                <!--[if (!mso)&(!IE)]><!--><div style="border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:20px; padding-bottom:20px; padding-right: 20px; padding-left: 20px;">
                                    <!--<![endif]-->
                                    <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 0px; padding-bottom: 0px;"><![endif]-->
                                    <div style="color:#555555;line-height:120%;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; padding-right: 10px; padding-left: 10px; padding-top: 0px; padding-bottom: 0px;">
                                        <div style="font-size:12px;line-height:14px;color:#555555;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;text-align:left;"><p style="margin: 0;font-size: 18px;line-height: 22px;text-align: center"><span style="font-size: 24px; line-height: 28px;"><strong><span style="line-height: 28px; font-size: 24px;">Notification from ReplaceDashboardName</span></strong></span></p></div>
                                    </div>
                                    <!--[if mso]></td></tr></table><![endif]-->
                                    <!--[if (!mso)&(!IE)]><!-->
                                </div><!--<![endif]-->
                            </div>
                        </div>
                        <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
                    </div>
                </div>
            </div>    <div style="background-color:transparent;">
                <div style="Margin: 0 auto;min-width: 320px;max-width: 500px;width: 500px;width: calc(19000% - 98300px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;" class="block-grid ">
                    <div style="border-collapse: collapse;display: table;width: 100%;">
                        <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="background-color:transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width: 500px;"><tr class="layout-full-width" style="background-color:transparent;"><![endif]-->
                        <!--[if (mso)|(IE)]><td align="center" width="500" style=" width:500px; padding-right: 0px; padding-left: 0px; padding-top:30px; padding-bottom:30px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><![endif]-->
                        <div class="col num12" style="min-width: 320px;max-width: 500px;width: 500px;width: calc(18000% - 89500px);background-color: transparent;">
                            <div style="background-color: transparent; width: 100% !important;">
                                <!--[if (!mso)&(!IE)]><!--><div style="border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:30px; padding-bottom:30px; padding-right: 0px; padding-left: 0px;">
                                    <!--<![endif]-->
                                    <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 5px; padding-bottom: 10px;"><![endif]-->
                                    <div style="color:#aaaaaa;line-height:120%;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; padding-right: 10px; padding-left: 10px; padding-top: 5px; padding-bottom: 10px;">
                                        <div style="font-size:12px;line-height:14px;color:#aaaaaa;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;text-align:left;">
                                        <p style="margin: 0;font-size: 12px;line-height: 14px;text-align: center">
                                        <span style="font-size: 16px; line-height: 19px; color: rgb(0, 0, 0);">Dashboard: ReplaceDashboardName has been updated. </span>
                                        </p><p style="margin: 0;font-size: 16px;line-height: 19px;text-align: center">
                                        <a style="color:#0000FF;color:#0000FF;text-decoration: underline;" ReplaceHrefToUserDashboard target="_blank" rel="noopener noreferrer">Click here to view the updated Dashboard</a></p></div>
                                    </div>
                                    <!--[if mso]></td></tr></table><![endif]-->
                                    <!--[if (!mso)&(!IE)]><!-->
                                </div><!--<![endif]-->
                            </div>
                        </div>
                        <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
                    </div>
                </div>
            </div>    <div style="background-color:#444444;">
                <div style="Margin: 0 auto;min-width: 320px;max-width: 500px;width: 500px;width: calc(19000% - 98300px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;" class="block-grid ">
                    <div style="border-collapse: collapse;display: table;width: 100%;">
                        <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="background-color:#444444;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width: 500px;"><tr class="layout-full-width" style="background-color:transparent;"><![endif]-->
                        <!--[if (mso)|(IE)]><td align="center" width="500" style=" width:500px; padding-right: 0px; padding-left: 0px; padding-top:10px; padding-bottom:10px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><![endif]-->
                        <div class="col num12" style="min-width: 320px;max-width: 500px;width: 500px;width: calc(18000% - 89500px);background-color: transparent;">
                            <div style="background-color: transparent; width: 100% !important;">
                                <!--[if (!mso)&(!IE)]><!--><div style="border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:10px; padding-bottom:10px; padding-right: 0px; padding-left: 0px;">
                                    <!--<![endif]-->


                                    <div align="center" class="button-container center" style="padding-right: 10px; padding-left: 10px; padding-top:10px; padding-bottom:10px;">
                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top:10px; padding-bottom:10px;" align="center">
                                        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:42px; v-text-anchor:middle; width:212px;" arcsize="10%" strokecolor="#3AAEE0" fillcolor="#3AAEE0">
                                        <w:anchorlock/><center style="color:#ffffff; font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:16px;"><![endif]-->
                                        <div style="color: #ffffff; background-color: #3AAEE0; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; max-width: 192px; width: 152px; width: auto; border-top: 0px solid transparent; border-right: 0px solid transparent; border-bottom: 0px solid transparent; border-left: 0px solid transparent; padding-top: 5px; padding-right: 20px; padding-bottom: 5px; padding-left: 20px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; text-align: center; mso-border-alt: none;">
                                            <span style="font-size:16px;line-height:32px;"><span style="font-size: 12px; line-height: 24px;" data-mce-style="font-size: 12px;">
                                                <strong><span style="line-height: 24px; font-size: 12px;" data-mce-style="line-height: 24px;">Click here to unsubscribe</span></strong></span></span>
                                        </div>
                                        <!--[if mso]></center></v:roundrect></td></tr></table><![endif]-->
                                    </div>

                                    <!--[if (!mso)&(!IE)]><!-->
                                </div><!--<![endif]-->
                            </div>
                        </div>
                        <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
                    </div>
                </div>
            </div>   <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
        </div>
        <!--[if (mso)|(IE)]></div><![endif]-->
    </body>
</html>
`;

    constructor() {}

    /**
     * @description gets the default HTML email message to be sent
     * uses Display Name for text in the Email and dashboardName for hyperlink to userdashboard
     * @param {string} dashboardName 
     * @param {string} dashboardDisplayName
     */
    getDefaultHtml(dashboardName: string, dashboardDisplayName: string): string {
        var dashboardHomepageUrl = 'href = "http://localhost:8080/DashboardConsole/';

        var replaceDashboardName = this.defaultEmailHtml.replace(new RegExp('ReplaceHrefToUserDashboard', 'g'), dashboardHomepageUrl + dashboardName + `"`);
        var replaceDashboardDisplayName = replaceDashboardName.replace(new RegExp('ReplaceDashboardName', 'g'), dashboardDisplayName);

        return replaceDashboardDisplayName;
    }
}
Improve this answer

1 Comment

Using regex for this is a waste because you never use the initial string. You should just create a function that builds the HTML and takes two parameters. For example: function getHtml(name, displayName){ return '<p class="'+name+'">'+displayName+'</p>'}
0 
`   this.replacetext = "test angular";

let yourNewString = this.replacetext.replace(new RegExp('test', 'g'), '');
this.replacetext = yourNewString;

Output :

this.replacetext = " angular"
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.