We Keep Coding

anyway to condense this? trying to make a multiple choice questions

btnA.addEventListener('click', function() {
console.log("Answer choice: A")
answerSelected = choiceA.textContent;
checkAnswer(answerSelected);
})
btnB.addEventListener('click', function() {
console.log("Answer choice: B")
answerSelected = choiceB.textContent;
checkAnswer(answerSelected);
})
btnC.addEventListener('click', function() {
console.log("Answer choice: C")
answerSelected = choiceC.textContent;
checkAnswer(answerSelected);
})
btnD.addEventListener('click', function() {
console.log("Answer choice: D")
answerSelected = choiceD.textContent;
checkAnswer(answerSelected);
})
how would i condense this so that its only one "function"? still new to javascript
https://github.com/rahimh5/Zuhair-Problem

as per #Teemu's suggestion, you can use event delegation. when the parent element is click, find its target
document.getElementById("choices").addEventListener("click", function (e) {
if (e.target && e.target.nodeName == "BUTTON") {
console.log(e.target.innerHTML)
}
});
<div id="choices" class="choices">
<button name="btnA">A</button>
<button name="btnB">B</button>
<button name="btnC">C</button>
<button name="btnD">D</button>
</div>

Here is a rewrite of your complete quiz app.
As suggested in the comments I used event delegation for the click event (answers.onclick=ev=>{ ... })
const questions = [{id: 0,question: "6 x 6",ans: "36",A: "48",B: "36",C: "38",D: "26"},{id: 1,question: "3 x 8",ans: "24",A: "28",B: "26",C: "22",D: "24"},{id: 2,question: "4 x 12",ans: "48",A: "60",B: "52",C: "48",D: "36"},{id: 3,question: "1 x 3",ans: "3",A: "5",B: "1",C: "4",D: "3"},{id: 4,question: "6 x 3",ans: "18",A: "18",B: "17",C: "19",D: "16"}],
[qdiv,btnnext,chk]=["question","next-question-btn","checker"].map(id=>document.getElementById(id)),
answers=document.querySelector(".answer-choices"), btns=[...answers.children];
var id=0, Q; // global variables ...
btnnext.onclick=nextQ;
answers.onclick=ev=>{ // delegate click event handler for answer buttons:
if (ev.target.textContent==Q.ans) {
chk.textContent=`Correct - ${Q.question} = ${Q.ans}!`;
btnnext.style.display=""
}
else chk.textContent="Not quite - try again!";
}
function nextQ(){
Q=questions[id];
chk.textContent="";
btnnext.style.display="none";
if (id++<questions.length){ // prepare next question
qdiv.textContent=`What is ${Q.question}?`;
[Q.A,Q.B,Q.C,Q.D].forEach((ans,i)=> btns[i].textContent=ans)
}
else { // wrap up the game:
qdiv.textContent="Game over - thanks for playing!";
answers.textContent=""
}
}
nextQ(); // show initial question
<section class="container">
<div class="title">
<h2>Multiplication Quiz 2022</h2>
<div class="underline"></div>
</div>
</section>
<section class="quiz">
<h3 id="question">Question</h3>
<div class="question"></div>
<div class="answer-choices">
<button id="choice-A" class="btn A">A</button>
<button id="choice-B" class="btn B">B</button>
<button id="choice-C" class="btn C">C</button>
<button id="choice-D" class="btn D">D</button>
</div>
<div class="checker">
<h3 id="checker"></h3>
<button id="next-question-btn" class="btn nextQuestion" style="display: none;">Next Question</button>
</div>
</section>
There are many ways of doing this - and I have played around with several of them until I ended up with the above version.

Razor Communicate Display of Modal from PageModel's OnPost() Method

I want to communicate from my Razor PageModel's OnPost() method to display the modal upon validation errors for it. Which basically means changing the modal's css from display none to block. Is there a way for this to be done?
Currently on return Page() the modal is hidden because thats what its css is initially set to, and is normally displayed on the user clicking the button to show it. I marked in my PageModel code where Id like the communication to occur
#page
#{
ViewData["Folder"] = "CourtUser";
<form asp-action="AddorEditUsersOnHearing" method="post" name="AddorEditUsersOnHearingForm" id="AddorEditUsersOnHearing">
<div class="container">
<div class="row">
<div class="col-md-8 mb-4">
<p>Add/Edit Users on <b style="font-style:italic">#Model.HearingName </b></p>
<div class="modal" tabindex="-1" role="dialog" id="AddUserForm">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add User</h5>
<button type="button" onclick="closeAddUserForm()" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="form-group" style="margin-top:5px;padding-left:45px">
<label asp-for="AddUserInput" style="width:100px"></label>
<input asp-for="AddUserInput" class="form-control col-4" id="EmailInputBox" style="display:inline-block" onchange="ValidateEmail()" />
<span style="display:block" asp-validation-for="AddUserInput" class="text-danger"></span>
</div>
<div class="modal-footer">
<button class="btn btn-primary" style="margin:0 auto" asp-page-handler="AddUser" name="AddUserSubmit" value="Yes">Submit</button>
</div>
</div>
</div>
</div>
<input asp-for="HearingId" type="hidden" />
<input asp-for="HearingName" type="hidden" />
<button type="button" class="btn btn-primary" onclick="ShowAddUserForm()">Add User</button>
<button style="float:right" class="btn btn-primary">Remove User(s)</button>
</div>
</div>
</div>
</form>
}
<script type="text/javascript">
function ShowAddUserForm() {
document.getElementById("AddUserForm").style.display = "block";
}
function closeAddUserForm() {
document.getElementById("AddUserForm").style.display = "none";
}
</script>
public IActionResult OnPostAddUser()
{
if (ModelState.IsValid)
{
if (AddUserInput == null)
{
ModelState.AddModelError("AddUserInput", "Please enter an email");
UsersonHearingList = HttpContext.Session.GetObjectFromJson<List<UsersModel>>("UsersonHearingList");
//*****This is where I want to communicate to the view to display the modal.*******
return Page();
}
}
else
{
return RedirectToPage("/Shared/Error");
}
}

You can try to use TempData.Here is a demo:
js:
#section Scripts
{
<script type="text/javascript">
$(function () {
if ("#TempData["Modal"]" == "Display")
{
ShowAddUserForm();
}
});
function ShowAddUserForm() {
document.getElementById("AddUserForm").style.display = "block";
}
function closeAddUserForm() {
document.getElementById("AddUserForm").style.display = "none";
}
</script>
}
handler:
public IActionResult OnPostAddUser()
{
if (ModelState.IsValid)
{
if (AddUserInput == null)
{
ModelState.AddModelError("AddUserInput", "Please enter an email");
UsersonHearingList = HttpContext.Session.GetObjectFromJson<List<UsersModel>>("UsersonHearingList");
//*****This is where I want to communicate to the view to display the modal.*******
TempData["Modal"] = "Display";
return Page();
}
}
else
{
return RedirectToPage("/Shared/Error");
}
}
result:

How to use a VAR value from a function in another?

I'm Bruno and I started learning HTML/CSS/JS this month, I would like to know how can I use a var value from a function in another? I tried to create different functions to bring me the operator and numbers typed and then I'll use the if statement to check if the operator and numbers are typed, but the console.log(operador) is returning undefined.
Could you please share some tips on how can I fix this issue on my code?
Thank you so much :)
function oper(value) {
var operacao = document.getElementById("operador").value = value;
}
function num(value) {
var operador = oper(value);
var current = document.getElementById("numeral").value += value;
if (current === "" && operator === "") {
var checkfalse = false
}
else if (current !== "" && operator !== "") {
var checktrue = true
}
console.log(operador)
}
<!-- begin snippet: js hide: false console: true babel: false -->
section.linha-1 div{
display: inline-block;
}
section.linha-2 div{
display: inline-block;
}
section.linha-3 div{
display: inline-block;
}
section.linha-4 div{
display: inline-block;
}
section.linha-5 div{
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>Calculadora</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>Calculadora (HTML/CSS/JavaScript)</header>
<section class="tela-iphone">
<section class="tela-display">
<div class="display">
<input class ="tela-display" id="tela-display" type="text" readonly>
</div>
</section>
<section class="linha-1">
<div class="AC">
<button class="limpar" id="limpar" onclick="ac()" value="limpar"> AC</button>
</div>
<div class="positivo-negativo">
<button class="mais-menos" id="mais-menos" onclick="maismenos()" value="maismenos">+/-</button>
</div>
<div class="percentual">
<button class= "percentual" id="percentual" onclick="percentual()" value="percentual">%</button>
</div>
<div class="divisao">
<button class="divisao" id="operador" onclick="oper('÷')" value="÷">÷ </button>
</div>
</section>
<section class="linha-2">
<div class="sete">
<button class="sete" id="numeral" onclick="num(7)" value="7">7</button>
</div>
<div class="oito">
<button class="oito" id="numeral" onclick="num(8)" value="8">8</button>
</div>
<div class="nove">
<button class="nove" id="numeral" onclick="num(9)" value="9">9</button>
</div>
<div class="multiplicacao">
<button class="multiplicacao" id="operador" onclick="oper('×')" value="*">×</button>
</div>
</section>
<section class="linha-3">
<div class="quatro">
<button class="quatro" id="numeral" onclick="num(4)" value="4">4</button>
</div>
<div class="cinco">
<button class="cinco" id="numeral" onclick="num(5)">5</button>
</div>
<div class="seis">
<button class="seis" id="numeral" onclick="num(6)" value="5">6</button>
</div>
<div class="subtracao">
<button class="subtracao" id="operador" onclick="oper('-')" value="-">-</button>
</div>
</section>
<section class="linha-4">
<div class="um">
<button class="um" id="numeral" onclick="num(1)" value="1">1</button>
</div>
<div class="dois">
<button class="dois" id="numeral" onclick="num(2)" value="2">2</button>
</div>
<div class="tres">
<button class="tres" id="numeral" onclick="num(3)" value="3">3</button>
</div>
<div class="adicao">
<button class="adicao" id="operador" onclick="oper('+')" value="+">+</button>
</div>
</section>
<section class="linha-5">
<div class="zero">
<button class="zero" id="numeral" onclick="num(0)" value="0">0</button>
</div>
<div class="virgula">
<button class="virgula" id="virgula" onclick="virgula()" value="virgula">,</button>
</div>
<div class="resultado">
<button class="resultado" id="resultado" onclick="resultado('=')" value="=">=</button>
</section>
</section>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Just use return at the end of your function oper, like this:
function oper(value) {
var operacao = document.getElementById("operador").value = value;
console.log(operacao);
return operacoa;
}

Primeira coisa e bem simples:
O que está retornando sua função 'oper'?
se não está retornando nada, a variável 'operador' fica vazia.
very simple: 'oper' function needs a return statement

In JavaScript there are a few ways to do this:
Method #1: Returning
Simply use the return keyword to make you function return a value when run:
function oper(value) {
var operacao = document.getElementById("operador").value = value;
return operacoa;
}
console.log(oper("value here"));//Outputs the value of the operacoa variable
Method #2: Global variables:
You can also use globally scoped variables, however, returning is a much cleaner solution:
//Declare the variable
var operacao;
function oper(value) {
operacao = document.getElementById("operador").value = value;
}
oper("value");
console.log(operacao); //Logs the output.

If you don't want to make the variable global you can try this method.
function a() {
var x = 10
b(x)
}
function b(arg1) {
console.log(arg1)
/** You can get the value of x even though it is from another function, but try not to use this method for recursive actions as you might hit the function recursion limit **/
}
a()

Getting to the next button chain

I'm trying to create a chain of buttons:
First options;
- Button 1
- Button 2
IF chosen Button 1:
- Button 1a
- Button 1b
IF chosen Button 1a:
- Button 1aa
- Button 1ab
IF chosen Button 1b:
- Button 1ba
- Button 1bb
And so on.. same goes for Button 2.
Thus far I got this but my .js is not working out for me.
I tried it in two ways.
WAY 1:
HTML (onclick="nextPush" is going to change in way 2)
<div class="buttons1-2">
<button id="btn1" class="btn btn1" onclick="buttonPushed(this)">Button 1</button>
<button id="btn2" class="btn btn2" onclick="buttonPushed(this)">Button 2</button>
</div>
<div class="buttons1a-b">
<button id="btn1a" class="btn btn1a" onclick="nextPush(this)">Button 1a</button>
<button id="btn1b" class="btn btn1b" onclick="nextPush(this)">Button 1b</button>
</div>
<div class="buttons2a-b">
<button id="btn2a" class="btn btn2a">Button 2a</button>
<button id="btn2b" class="btn btn2b">Button 2b</button>
</div>
<div class="buttons1aa-ab">
<button id="btn1aa" class="btn btn1a">Button 1aa</button>
<button id="btn1ab" class="btn btn1b">Button 1ab</button>
</div>
<div class="buttons1ba-bb">
<button id="btn1ba" class="btn btn2a">Button 1ba</button>
<button id="btn1bb" class="btn btn2b">Button 1bb</button>
</div>
WAY 1: .JS
function buttonPushed(btn) {
var replacewith = "buttons1a-b";
if (btn.id == "btn2") {
replacewith = "buttons2a-b";
}
function nextPush(btn) {
var replacewith = "buttons1aa-ab";
if (btn.id == "btn1b") {
replacewith = "buttons1ba-bb";
}
var allChildren = document.getElementsByClassName('buttons')[0].children;
for (var i = 0; i < allChildren.length; i++) {
var child = allChildren[i];
if (child.className != replacewith) {
child.style.display = "none";
} else {
child.style.display = "inline";
}
}
}
WAY 2: HTML (notice the onclick="nextPush" is gone)
<div class="buttons1-2">
<button id="btn1" class="btn btn1" onclick="buttonPushed(this)">Button 1</button>
<button id="btn2" class="btn btn2" onclick="buttonPushed(this)">Button 2</button>
</div>
<div class="buttons1a-b">
<button id="btn1a" class="btn btn1a" onclick="buttonPushed(this)">Button 1a</button>
<button id="btn1b" class="btn btn1b" onclick="buttonPushed(this)">Button 1b</button>
</div>
<div class="buttons2a-b">
<button id="btn2a" class="btn btn2a">Button 2a</button>
<button id="btn2b" class="btn btn2b">Button 2b</button>
</div>
<div class="buttons1aa-ab">
<button id="btn1aa" class="btn btn1a">Button 1aa</button>
<button id="btn1ab" class="btn btn1b">Button 1ab</button>
</div>
<div class="buttons1ba-bb">
<button id="btn1ba" class="btn btn2a">Button 1ba</button>
<button id="btn1bb" class="btn btn2b">Button 1bb</button>
</div>
WAY 2 .JS
function buttonPushed(btn) {
/* btn = Id: btn1, btn2, btn1a or btn1b */
let replacewith = "buttons1a-b";
if (btn.id == "btn2") {
replacewith = "buttons2a-b";
}
else if (btn.id == "btn1a") {
replacewith = "buttons1aa-ab";
}
else if (btn.id == "btn1b") {
replacewith = "buttons1ba-bb";
}
}
let allChildren = document.getElementsByClassName('buttons')[0].children;
for (let i = 0; i < allChildren.length; i++) {
let child = allChildren[i];
if (child.className != replacewith) {
child.style.display = "none";
} else {
child.style.display = "inline";
}
}
.CSS for BOTH WAYS:
.buttons1a-b {
display: none;
}
.buttons2a-b {
display: none;
}
.buttons1aa-ab {
display: none;
}
.buttons1ba-bb {
display: none;
}
Sorry for the long post, hope you can help me out :) If you know a better way to do this, please also do let me know.

Building on your example, and the one from Michael, you could also use another approach of declaring what div you want displayed by attaching an attribute to the button, and then add an event listener to all buttons with that attribute. This makes the HTML slightly smaller and more declarative, and makes it easier to switch what element you want to display next instead of relying on a particular schema of id's.
(function(document) {
// get all buttons that have the attribute data-next
const buttons = document.querySelectorAll('[data-next]');
for (const item of buttons) {
// get references to the parent item and next item to hide/show
const parentId = item.getAttribute('data-parent');
const parent = document.querySelector(`#${parentId}`);
const nextDivId = item.getAttribute('data-next');
const nextDiv = document.querySelector(`#${nextDivId}`);
if (!nextDiv) {
console.error('could not find next div for button ', item);
}
// attach an event listener for click that toggles visibility of the above elements
item.addEventListener('click', function() {
nextDiv.classList.toggle('hidden');
parent.classList.toggle('hidden');
});
}
})(document);
.hidden {
display: none;
}
<div id="base">
<button data-next="option-a" data-parent="base">Option A</button>
<button data-next="option-b" data-parent="base">Option B</button>
</div>
<div id="option-a" class="hidden">
<p>Option A</p>
</div>
<div id="option-b" class="hidden">
<p>Option B</p>
</div>
If you want to add new buttons dynamically (or change what your next items should be) you will need to attach the event listener when you create your other buttons. For instance, you can do something like the following:
(function(document) {
function onButtonClicked(event) {
const item = event.target;
// get references to the next item to show
const nextDivId = item.getAttribute('data-next');
const nextDiv = document.querySelector(`#${nextDivId}`);
if (!nextDiv) {
console.error('could not find next div for button ', item);
}
// The function toggle on classList either removes a class if it exists
// or adds it if it does not exist in the list of classes on the element
nextDiv.classList.toggle('hidden');
// check if container has an attribute for loading next buttons lazily
const lazyLoadLevel = nextDiv.getAttribute('data-level');
// if we found the attribute, load the contents
if (lazyLoadLevel) {
// cast lazyLoadedLevel to an integer (with +) since getAttribute returns a string
loadLevel(+lazyLoadLevel, nextDiv);
// since we have populated the container we can remove the attribute so that elements do not get added again
nextDiv.removeAttribute('data-level');
}
// get references to the parent item to hide
const parentId = item.getAttribute('data-parent');
const parent = document.querySelector(`#${parentId}`);
if (parent) {
parent.classList.toggle('hidden');
}
}
function addButton(parent, nextElementId, text) {
const newItem = document.createElement('button');
newItem.setAttribute('data-next', nextElementId);
newItem.setAttribute('data-parent', parent.getAttribute('id'));
newItem.textContent = text;
newItem.addEventListener('click', onButtonClicked);
parent.appendChild(newItem);
}
function loadLevel(level, container) {
switch (level) {
// depending on level you can define other buttons to add here
case 2:
{
addButton(container, 'option-a', 'Goto option a');
break;
}
}
}
// get all *existing* buttons that have the attribute data-next
// this is run once when the script loads, and will not attach listeners to dynamically created buttons
const buttons = document.querySelectorAll('[data-next]');
for (const item of buttons) {
// attach an event listener for click that toggles visibility of parent and next elements
// notice that we pass a reference to onButtonClicked. Even though it is a function we shouldn't call it *here*
item.addEventListener('click', onButtonClicked);
}
})(document);
.hidden {
display: none;
}
<div id="base">
<button data-next="option-a" data-parent="base">Option A</button>
<button data-next="option-b" data-parent="base">Option B</button>
</div>
<div id="option-a" class="hidden">
<p>Option A</p>
<button data-next="option-b" data-parent="option-a">Option B</button>
</div>
<div id="option-b" class="hidden" data-level="2">
<p>Option B. The contents of this div is loaded lazily based on the value of the attribute data-level</p>
</div>

At first, I was thinking this should be done entirely dynamically -- where the next container of buttons is created and inserted into the DOM when the button is clicked. But judging by your current attempts, it seems like you want to have all the buttons hardcoded into the source, hidden with CSS, and shown with DOM during the click event. Here is one way you can achieve that:
function handleButtonClick(button) {
const clickedID = button.id.substring(3);
const nextDiv = document.getElementById("buttons" + clickedID);
if (nextDiv) {
nextDiv.style.display = "block";
}
}
.hidden {
display: none;
}
<div id="buttons">
<button id="btn1" onclick="handleButtonClick(this)">Button 1</button>
<button id="btn2" onclick="handleButtonClick(this)">Button 2</button>
</div>
<div id="buttons1" class="hidden">
<button id="btn1a" onclick="handleButtonClick(this)">Button 1a</button>
<button id="btn1b" onclick="handleButtonClick(this)">Button 1b</button>
</div>
<div id="buttons2" class="hidden">
<button id="btn2a" onclick="handleButtonClick(this)">Button 2a</button>
<button id="btn2b" onclick="handleButtonClick(this)">Button 2b</button>
</div>
<div id="buttons1a" class="hidden">
<button id="btn1aa" onclick="handleButtonClick(this)">Button 1aa</button>
<button id="btn1ab" onclick="handleButtonClick(this)">Button 1ab</button>
</div>
<div id="buttons1b" class="hidden">
<button id="btn1ba" onclick="handleButtonClick(this)">Button 1ba</button>
<button id="btn1bb" onclick="handleButtonClick(this)">Button 1bb</button>
</div>
<div id="buttons2a" class="hidden">
<button id="btn2aa" onclick="handleButtonClick(this)">Button 2aa</button>
<button id="btn2ab" onclick="handleButtonClick(this)">Button 2ab</button>
</div>
<div id="buttons2b" class="hidden">
<button id="btn2ba" onclick="handleButtonClick(this)">Button 2ba</button>
<button id="btn2bb" onclick="handleButtonClick(this)">Button 21bb</button>
</div>
This just identifies which button was clicked, and uses that information to determine the next div to show, until there are no more divs that correspond to the one that was clicked.

How to add many functions in ONE ng-click?

I've be looking for how to execute this but I can't find anything related so far, :(
I could nest both functions yes but I'm just wondering if this is possible?
I'd like to do this literally:
<td><button class="btn" ng-click="edit($index) open()">Open me!</button></td>
My JS code at the moment:
$scope.open = function () {
$scope.shouldBeOpen = true;
};
$scope.edit = function(index){
var content_1, content_2;
content_1 = $scope.people[index].name;
content_2 = $scope.people[index].age;
console.log(content_1);
};
I'd like to call two functions with just one click, how can I do this in angularJS?
I thought it'd be straight forward like in CSS when you add multiple classes...but it's not :(

You have 2 options :
Create a third method that wrap both methods. Advantage here is that you put less logic in your template.
Otherwise if you want to add 2 calls in ng-click you can add ';' after edit($index) like this
ng-click="edit($index); open()"
See here : http://jsfiddle.net/laguiz/ehTy6/

You can call multiple functions with ';'
ng-click="edit($index); open()"

A lot of people use (click) option so I will share this too.
<button (click)="function1()" (click)="function2()">Button</button>

The standard way to add Multiple functions
<button (click)="removeAt(element.bookId); openDeleteDialog()"> Click Here</button>
or
<button (click)="removeAt(element.bookId)" (click)="openDeleteDialog()"> Click Here</button>

Try this:
Make a collection of functions
Make a function that loops through and executes all the functions in the collection.
Add the function to the html
array = [
function() {},
function() {},
function() {}
]
function loop() {
array.forEach(item) {
item()
}
}
ng - click = "loop()"

Follow the below
ng-click="anyFunction()"
anyFunction() {
// call another function here
anotherFunction();
}

<!-- Button trigger modal -->
<button type="button" (click)="open(content)" style="position: fixed; bottom: 0; right: 130px;"
class="btn col-sm-1 btn-Danger" >
Reject
</button>
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Profile update</h4>
<button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="bg-danger text-light" for="Reject">Reason For reject</label>
<textarea matInput placeholder=" Reject" [(ngModel)]="asset_note">{{note}}</textarea>
</div>
</div>
<div class="modal-footer">
<!-- -->
<button type="button" class="btn btn-outline-dark" (click)="reject();modal.close('Save click') ">Save</button>
</div>
</ng-template>
**.ts file**
open(content: any) {
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
close()
{
this.getDismissReason(ModalDismissReasons.ESC);
}

Which of the following is best practice (option1 or option2)
<button (click)="removeAt(element.bookId); openDeleteDialog()"> Click Here
<button (click)="removeAt(element.bookId)" (click)="openDeleteDialog()"> Click Here

ng-click "$watch(edit($index), open())"