Develop Reference

How to call a function on clicking a text in angular 8

I have an anchor tag in HTML. I want to create a click event which calls function. The issue is whatever solution I have tried makes the page reload. I don't want the page to reload or refresh.
<div *ngIf="showOTPResendText">
<p style="text-align: center;">Please wait {{counter | formatTime}} seconds(s) before requesting a new One Time Password(OTP)</p>
</div>
<div class="otp-not-recieved">
<br />
<h4>
Not received your code?
<a [routerLink]="/"></a>
Resend OTP.
</h4>
</div>
The text looks something like this.
Text Screenshot.
I want it to be text and still hit a function in typescript which calls the resend otp function.
What I have tried and problem I am facing with the solution.
onclick="return false; It doesn't reload the page but then I can't call the function.
Thought of using routerlink but then I don't want to route anywhere and if I route to same page it still reloads the page.

so if you want to have a click event but not go anywhere you can also just not use an <a> tag but regular <p>/<span>/... tag as well.
The angular way is to use the click attribute, so something like
<span (click)="callToYourFunction()">Text</span>
If you really want to use an <a> tag I think you should be able to prevent the event default. For example
<a (click)="myFunction($event)">Link</a>
function myFunction(event) {
event.preventDefault();
}

Remember and pass value by clicking back button

I am using MyApp.updateHashLabel on using browser location hash to enable back/forward events which works with only one issue - it doesn't pass value. This is my html code and one of the buttons (fourth) has got onClick MyApp.updateApp with extra value which I want to pass when I click on a back button from another screen/state. So when I am clicking on second button after fourth and go back it shows my a correct screen but doesn't display the value = 6. Is there any way to put it in sessionStorage for this action? Or there may be a different solution...
<div class="button-bar">
<button onclick="MyApp.updateApp(1, true);" type="button">ONE</button>
<button onclick="MyApp.updateApp(2, true);" type="button">TWO</button>
<button onclick="MyApp.updateApp(3, true);" type="button">THREE</button>
<button onclick="MyApp.updateApp(4, true, 6);" type="button">FOUR</button>
</div>
<div id="hash-label">#</div>
<div id="value-label"></div>
<div id="image-placeholder"></div>
This is my jQuery code:
MyApp.updateApp = function (hashValue, allowAppToUpdateHash, valueID) {
var index = parseInt(hashValue, 10);
var imageNode = document.getElementById('image-placeholder');
var id = parseInt(valueID, 10);
}
And the function of a value usage is:
window.article = function (id) {
$("#value-label").html(id);
}
Please see my whole code on jsfiddle here: http://jsfiddle.net/nzsqt06a/1/
Really appreciate your help.

you could intercept the args and store them in session storage, and recover them once the DOM is loaded again.

How to set focus on text box whenever it appears on the screen

I've made a web application That starts from a specific amount and every time a donation is made it counts down and shows how much is needed. And at one time I might have about 10-20 of these counting down and I am always creating new ones. Now when I am doing that it would be nice that when I click the button it automatically focuses on the text field for ease of use. however I can't quite get that to work.
The window to set the countdown is shown using angularjs dialogs/modals. This means that when I click the a button it writes code onto the page that shows the dialog/modal and when I submit it it is removed from the page completely.
The first time around when I click the button it focuses on the text box and I can type the number and press enter and it's submitted, now I want to create a new one. I click the button, up comes the modal but now I have to grab the mouse, move it to the input and click it. Waste of time and not user friendly.
What I'm asking is for a way to have it focus on the text field when using modals every time I click the button.
here's the window:
<form name="formCountdown" novalidate class="css-form">
<div modal="showCountdownModal" close="showCountdownModal = false" options="opts" ng-cloak>
<div class="modal-header">
<h4>Enter Countdown Amount</h4>
</div>
<div class="modal-body">
<input id="focusbox" type="number" min="1" autofocus required ng-model="countDownAmount" name="countDownAmount" ui-keypress="{13:'setCountdown()'}" select-on-focus />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary cancel" ng-disabled="formCountdown.$invalid" ng-click="setCountdown()">Set</button>
</div>
</div>
</form>
I've tried using autofocus, and that works fine the first time you press the button after loading the page. but the second and up it does not.
I've also tried using this jquery code with no luck:
<script>
$("#focusbtn").click(function() {
$("#focusbox").focus();
});
</script>
And now I am completely lost and would really love it if someone could help me out here.

Edit: forgot to put in the timeout, to make sure the browser is ready!
add the following line to your setCountDown() function:
$timeout(function (){
document.querySelector('#focusbox').focus();
},0)
You need to inject the $timeout in your controller
That will probably do the trick!
However, this will work, but dom manipulation should be done in a directive!

I copied your posted code together with the script and it works just fine. I'm not sure if I understood the problem but the autofocus works well in my end. Autofocus is present after the page has loaded or refreshed and even after the button has been clicked. Of course the autofocus will be removed if a click outside the input text has been triggered.
Morever, I think Autofocus is an attribute by HTML5. You might want to include in your HTML or maybe it is just a browser compatibility issue.
You can test or check if autofocus is supported by your browser at http://html5test.com/.
Hope this help somehow.
EDIT:
Try this on your script.
$(document).ready(function() {
$(".modalName").on('shown', function() {
$(this).find("[autofocus]:first").focus();
});
});

How to create an HTML button that show more text same page

I'm working with html and javascript. My problems is, in one webpage a show a plot and a few button. When the user press any of this button I need show 3 or 4 options but in the same page without switching pages.
Below is my code
<form action="MyPage">
<button type="submit" value="More Options">
</form>
redirect to an other page.What I can do?

First of all, get rid of type="submit". That's what's causing the page to do stuff you don't want. The second thing is to add an onclick handler. It should return false to avoid behavior like "submit". The variable 'this' will pass the button to your function, which you might need in that code. Then fill in the body of addMoreStuff() with your code to, well, add more stuff!
<form action="MyPage">
<button onclick="addMoreStuff(this); return false; ">More Options</button>
</form>
<script type="text/javascript">
function addMoreStuff(button) {
/* your code here */
}
</script>

Drop the form (use the button alone), and look into jQuery. It's extremely easy to use, and it'll help you quickly build code your application.
HTML
<button type="submit" value="More Options" id="more">
JavaScript (jQuery)
// run "add_options" when someone clicks on the button
jQuery('button#more').on('click', add_options)
function add_options() {
//code here to add more options
}

When I use input type="button" a function works well but when I use button it doesn`t

I call the same function with those two types of button. With the first it works perfectly but with button it works well at the first but in less than one second it looks like refresh the page.
<input type="button" id="bProv" value="filtrar" onclick="filtroP()"/>
<button id="bProv" onclick="filtroP()">filtrar</button>

The type of a <button> element defaults to submit, so it will run the JS and then immediately submit the form.
Use <button type="button" ... if you don't want form submission.
That said, hard coding a button (which does nothing without JS) goes against the principles of unobtrusive JavaScript (which are part of best practise programming for the WWW).