Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/79.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Angular 4/Typescript-如何使用Typescript编辑HTML文件_Javascript_Html_Css_Angular_Typescript - Fatal编程技术网

Javascript Angular 4/Typescript-如何使用Typescript编辑HTML文件

Javascript Angular 4/Typescript-如何使用Typescript编辑HTML文件,javascript,html,css,angular,typescript,Javascript,Html,Css,Angular,Typescript,我希望能够从一个函数中编辑此HTML页面,在该函数中,我可以传入两个字符串,以编辑带有dashboardName的超文本链接,并显示带有dashboardDisplayName的超文本链接 我似乎找不到任何关于调用html文件并对其进行编辑的功能。我希望能够根据Typescript中getEmailHtml()函数的输入对html文件进行更改。然后,我希望能够将编辑HTML的内容设置为字符串 如果任何人对这个问题有任何了解,我将非常感谢任何帮助 我希望使用的角度类型脚本文件功能 import {

我希望能够从一个函数中编辑此HTML页面,在该函数中,我可以传入两个字符串,以编辑带有dashboardName的超文本链接,并显示带有dashboardDisplayName的超文本链接

我似乎找不到任何关于调用html文件并对其进行编辑的功能。我希望能够根据Typescript中getEmailHtml()函数的输入对html文件进行更改。然后,我希望能够将编辑HTML的内容设置为字符串

如果任何人对这个问题有任何了解,我将非常感谢任何帮助

我希望使用的角度类型脚本文件功能

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文件

<!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>

BF基本列
身体{
保证金:0;
填充:0;
}
表,tr,td{
垂直对齐:顶部;
边界塌陷:塌陷;
}
.ie浏览器表、.mso容器表{
表布局:固定;
}
* {
行高:继承;
}
a[x-apple-data-detectors=true]{
颜色:继承!重要;
文字装饰:无!重要;
}
[owa].img容器div[owa].img容器按钮{
显示:块!重要;
}
[owa]。全宽按钮{
宽度:100%!重要;
}
[owa].块网格.col{
显示:表格单元格;
浮动:无!重要;
垂直对齐:顶部;
}
.ie browser.num12、.ie browser.block grid[owa].num12[owa].block grid{
宽度:500px!重要;
}
.ExternalClass、.ExternalClass p、.ExternalClass span、.ExternalClass字体、.ExternalClass td、.ExternalClass div{
线高:100%;
}
.ie browser.mixed two-up.num4[owa]。mixed two-up.num4{
宽度:164px!重要;
}
.ie browser.mixed two-up.num8[owa]。mixed two-up.num8{
宽度:328px!重要;
}
.ie browser.block-grid.two-up.col[owa].block-grid.two-up.col{
宽度:250px!重要;
}
.ie browser.block-grid.three-up.col[owa].block-grid.three-up.col{
宽度:166px!重要;
}
.ie browser.block-grid.four-up.col[owa].block-grid.four-up.col{
宽度:125px!重要;
}
.ie browser.block-grid.five-up.col[owa].block-grid.five-up.col{
宽度:100px!重要;
}
.ie browser.block-grid.six-up.col[owa].block-grid.six-up.col{
宽度:83px!重要;
}
.ie browser.block-grid.seven-up.col[owa].block-grid.seven-up.col{
宽度:71px!重要;
}
.ie browser.block-grid.eight-up.col[owa].block-grid.eight-up.col{
宽度:62px!重要;
}
.ie browser.block-grid.nine-up.col[owa].block-grid.nine-up.col{
宽度:55px!重要;
}
.ie browser.block-grid.ten-up.col[owa].block-grid.ten-up.col{
宽度:50px!重要;
}
.ie browser.block-grid.eleven-up.col[owa].block-grid.eleven-up.col{
宽度:45px!重要;
}
.ie browser.block-grid.leven-up.col[owa].block-grid.leven-up.col{
宽度:41px!重要;
}
@仅介质屏幕和(最小宽度:520px){
.块网格{
宽度:500px!重要;
}
.block grid.col{
显示:表格单元格;
浮动:无!重要;
垂直对齐:顶部;
}
.block grid.col.num12{
宽度:500px!重要;
}
.block-grid.mixed-two-up.col.num4{
宽度:164px!重要;
}
.block-grid.mixed-two-up.col.num8{
宽度:328px!重要;
}
.块网格。两个向上的列{
宽度:250px!重要;
}
.方块网格.三向上.柱{
宽度:166px!重要;
}
.块网格。四向上。柱{
宽度:125px!重要;
}
.方块格线.五向上.柱{
宽度:100px!重要;
}
.方块网格。六向上。col{
宽度:83px!重要;
}
.格线格线格线格线格线格线格线格线格线格线格线格线格线格线格线格线格线格线格线格线格线格线格线格线格线格线格线格线格线格{
宽度:71px!重要;
}
.方块格线.八向上.柱{
宽度:62px!重要;
}
.格挡.九向上.柱{
宽度:55px!重要;
}
.方块格线.十向上.柱{
宽度:50px!重要;
}
.方块格线.十一向上.柱{
宽度:45px!重要;
}
.方块格线.十二向上.柱{
宽度:41px!重要;
}
}
@介质(最大宽度:520像素){
.块网格,.col{
最小宽度:320px!重要;
最大宽度:100%!重要;
}
.块网格{
宽度:计算(100%-40px)!重要;
}
上校{
宽度:100%!重要;
}
.col>div{
保证金:0自动;
}
全宽{
最大宽度:100%!重要;
}
}
let yourNewString = yourHTMLString.replace('/<DashboardName>/g', dashboardName);
let text = '<DashboardName>';
let yourNewString = yourHTMLString.replace(new RegExp(text, 'g'), dashboardName);
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;
    }
}
`   this.replacetext = "test angular";

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