I am new to Angular and I have this error:
"openClose is not defined at HTMLButtonElement.onclick (index:13)"
I searched up every possible answer to this, but the thing is that the error is in the index page and not in any of the app files. I will paste my code here in hope that someone knows what to do.
appponent.html
<button id="btn1" class="btn1" onclick="openClose(this, 'bg-modal')">Click me </button>
<div class="bg-modal" id="bg-modal">
<div class="modal-content">
<div class="col-12">
<div class="close" id="close">+</div>
<h2>Modal</h2>
<hr>
</div>
<div class="col-12">
<div class="contents">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="confirm" id="confirm">OK</div>
</div>
</div>
appponent.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './appponent.html',
styleUrls: ['./appponent.css',
'./video-style.css']
})
export class AppComponent {}
function openClose(btn1, bgmodal){
document.getElementById('.btn1').addEventListener('click', function(){
document.getElementById('.bg-modal').style.display='flex';
});
}
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Modal</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
</body>
</html>
I have tried:
putting the code in appponent.ts in between the brackets of export class AppComponent {}
in the index.html leaving only
putting the code of the click in tags in index.html and then it works with 0 errors
Can anyone help?
I am new to Angular and I have this error:
"openClose is not defined at HTMLButtonElement.onclick (index:13)"
I searched up every possible answer to this, but the thing is that the error is in the index page and not in any of the app files. I will paste my code here in hope that someone knows what to do.
app.ponent.html
<button id="btn1" class="btn1" onclick="openClose(this, 'bg-modal')">Click me </button>
<div class="bg-modal" id="bg-modal">
<div class="modal-content">
<div class="col-12">
<div class="close" id="close">+</div>
<h2>Modal</h2>
<hr>
</div>
<div class="col-12">
<div class="contents">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="confirm" id="confirm">OK</div>
</div>
</div>
app.ponent.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.ponent.html',
styleUrls: ['./app.ponent.css',
'./video-style.css']
})
export class AppComponent {}
function openClose(btn1, bgmodal){
document.getElementById('.btn1').addEventListener('click', function(){
document.getElementById('.bg-modal').style.display='flex';
});
}
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Modal</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
</body>
</html>
I have tried:
putting the code in app.ponent.ts in between the brackets of export class AppComponent {}
in the index.html leaving only
putting the code of the click in tags in index.html and then it works with 0 errors
Can anyone help?
Share Improve this question asked Mar 26, 2020 at 9:20 kaja111kaja111 592 silver badges9 bronze badges 03 Answers
Reset to default 8This is how it should be. :
<button id="btn1" class="btn1" (click)="openClose($event, 'bg-modal')">Click me </button>
In Component.ts file. :
public openClose(event, bgmodal){
.... rest of code
}
Note that : Direct accessing of DOM element is not remended in Angular.
Just to make your scenario working adding a Stackblitz demo : Demo
onclick at button can not call function of ponent, it must call with javascript code, eg: onclick="console.log('sss')"
If u want to call to function of ponent:
.html:
<button id="btn1" class="btn1" (click)="openClose(this, 'bg-modal')">Click me </button>
.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.ponent.html',
styleUrls: ['./app.ponent.css',
'./video-style.css']
})
export class AppComponent {
openClose(btn1, bgmodal){
document.getElementById('.btn1').addEventListener('click', function(){
document.getElementById('.bg-modal').style.display='flex';
});
}
}
If you are using angular you should mention which event you want to use. If you want to use click event then you should use like this :
<button (click)="onSave()">Save</button>
because angular doesn't have any event like
onclick