Dynamically changing the header tag of html based on java script variable

Question

I want to dynamically change the header tag of html based on java script variable in angular project.

Here is the function in javascript file validationController.js

function myFunction(){
    var isUserNameValid = validateUserName();  //validates whether username is valid or not and returns either true or false
    var isPwdValid = validatePwd();           //validates whether password is valid or not and returns either true or false
    if(!isUserNameValid || !isPwdValid){
        //If any of the variables is false it redirects to validation.html page and display it's default content
        open validation.html;
    }
}

In validation.html file there is a header tag

<h2> Please change your password</h2>

If the isUserNameValid in validationController.js file returns false, the header tag in html should dynamically change to

<h2> Please change your username</h2>

Thank you in advance for your valuable answers

Answer 1

You can take one variable to display text

and make changes in given method as follow

public title: string;

function myFunction(){
            var isUserNameValid = validateUserName();  //validates whether username is valid or not and returns either true or false
            var isPwdValid = validatePwd();           //validates whether password is valid or not and returns either true or false
            if(!isPwdValid){
                //If any of the variables is false it redirects to validation.html page and display it's default content
                title = 'Please change your password';
            }

            if (!isUserNameValid ) {
                title = 'Please change your username';
            }
        }

And in HTML you can use that title variable like

<h1>{{title}}</h1>