Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Angular 4/ Typescript - How to edit an HTML file with Typescript

Tags:

javascript

html

css

typescript

angular

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>
like image 532
Daniel Turcich Avatar asked Jan 31 '26 05:01

Daniel Turcich

1 Answers

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.

like image 91
DeborahK Avatar answered Feb 01 '26 21:02

DeborahK
Sign in to Comment

Related questions

Remove several table rows using jQuery
Nuxt and Vue support for IE11
Vue Router: URL does not load correct component while router-link does
How to mock a React.MouseEvent<{}, MouseEvent> onClick event?
How to handle condition rendering in react
How to provide context to React Server Components (Next.js 13.2) ? (e.g. theme)
es6 Promises: exception thrown in a promise is not caught by the catch method
Variable scope inside loop with async call
Get reference to arbitrarily (deep) nested node inside JSON/JS object using value of key
I want to POST data to an API when user close the browser tab
How to calculate array of character expression like eval?
Convert stringified numbers back to number
find '*' , '**' and '`' from string and replace with <strong></strong> and <code></cod in javascript, Typescript
how to get the right solution with Nerdamer.js
What is the ideal way to test a service with angular? [closed]
Having trouble making moment().utc() return a 2 digit month and year
Can't walk dependency graph: Cannot find module './crypto_auth' sodium-universal
Different behaviors of <a> tag with download attribute and dataUrl href?
How to add auto detect page break
Could not resolve 'javascript:;' from state 'app'

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!