angular 6: making button works to display data
1
My table includes an 'Acknowledge' button at the end of each row, that is supposed for the user to click and there will be output 'by (whoever clicks the button)'.
my problem is that my button did not work since there is no error in console. Below as attach is my table in html and the js. Please note, im very new in angular 6 and I already tried several ways but did not work.
import { Component, OnInit } from '@angular/core';
import { PagesService } from "../pages.service";
declare var $: any;
@Component({
selector: 'app-alert',
templateUrl: './alert.component.html',
styleUrls: ['./alert.component.scss']
})
export class AlertComponent implements OnInit {
data$:object;
constructor(private data: PagesService) { }
ngOnInit() {
this.data.getAlert().subscribe(data => this.data$ = data);
$('#example').DataTable({
"pagingType": "full_numbers",
"scrollX": true
});
$('#example').find('button').click(function () {
console.log($(this).after());
$(this).next().remove();
$('<p>By ABC</p>').insertAfter($(this));
});
}
}
<html>
<table class="table" id="example" style="width:100%;">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Device Type</th>
<th scope="col">Map Type</th>
<th scope="col">Name</th>
<th scope="col">Latitude</th>
<th scope="col">Longitude</th>
<th scope="col">Result</th>
<th scope="col">Last Updated</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody *ngFor="let data of data$">
<tr>
<td>{{data.id}}</td>
<td>{{data.deviceType}}</td>
<td>{{data.mapType}}</td>
<td>{{data.name}}</td>
<td>{{data.lat}}</td>
<td>{{data.lng}}</td>
<td>{{data.result}}</td>
<td>{{data.lastUpdate}}</td>
<td><button class="btn btn-block btn-primary">Acknowledge</button></td>
<td><button class="btn btn-block btn-primary">View</button></td>
</tr>
</tbody>
</table>
</html>
angular html-table angular6 edited Nov 15 '18 at 11:03
Brian Tompsett - 汤莱恩
4,2331338101
asked Nov 15 '18 at 6:32
Nurfarahin NadhirahNurfarahin Nadhirah
61
add a comment |
1
My table includes an 'Acknowledge' button at the end of each row, that is supposed for the user to click and there will be output 'by (whoever clicks the button)'.
my problem is that my button did not work since there is no error in console. Below as attach is my table in html and the js. Please note, im very new in angular 6 and I already tried several ways but did not work.
import { Component, OnInit } from '@angular/core';
import { PagesService } from "../pages.service";
declare var $: any;
@Component({
selector: 'app-alert',
templateUrl: './alert.component.html',
styleUrls: ['./alert.component.scss']
})
export class AlertComponent implements OnInit {
data$:object;
constructor(private data: PagesService) { }
ngOnInit() {
this.data.getAlert().subscribe(data => this.data$ = data);
$('#example').DataTable({
"pagingType": "full_numbers",
"scrollX": true
});
$('#example').find('button').click(function () {
console.log($(this).after());
$(this).next().remove();
$('<p>By ABC</p>').insertAfter($(this));
});
}
}
<html>
<table class="table" id="example" style="width:100%;">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Device Type</th>
<th scope="col">Map Type</th>
<th scope="col">Name</th>
<th scope="col">Latitude</th>
<th scope="col">Longitude</th>
<th scope="col">Result</th>
<th scope="col">Last Updated</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody *ngFor="let data of data$">
<tr>
<td>{{data.id}}</td>
<td>{{data.deviceType}}</td>
<td>{{data.mapType}}</td>
<td>{{data.name}}</td>
<td>{{data.lat}}</td>
<td>{{data.lng}}</td>
<td>{{data.result}}</td>
<td>{{data.lastUpdate}}</td>
<td><button class="btn btn-block btn-primary">Acknowledge</button></td>
<td><button class="btn btn-block btn-primary">View</button></td>
</tr>
</tbody>
</table>
</html>
edited Nov 15 '18 at 11:03
Brian Tompsett - 汤莱恩
4,2331338101
asked Nov 15 '18 at 6:32
Nurfarahin NadhirahNurfarahin Nadhirah
61
1
Angular does give you the solution to bind events on the elements. There is no need to use jQuery for the same.
– Jai
Nov 15 '18 at 6:35
add a comment |
1
1
1
My table includes an 'Acknowledge' button at the end of each row, that is supposed for the user to click and there will be output 'by (whoever clicks the button)'.
my problem is that my button did not work since there is no error in console. Below as attach is my table in html and the js. Please note, im very new in angular 6 and I already tried several ways but did not work.
import { Component, OnInit } from '@angular/core';
import { PagesService } from "../pages.service";
declare var $: any;
@Component({
selector: 'app-alert',
templateUrl: './alert.component.html',
styleUrls: ['./alert.component.scss']
})
export class AlertComponent implements OnInit {
data$:object;
constructor(private data: PagesService) { }
ngOnInit() {
this.data.getAlert().subscribe(data => this.data$ = data);
$('#example').DataTable({
"pagingType": "full_numbers",
"scrollX": true
});
$('#example').find('button').click(function () {
console.log($(this).after());
$(this).next().remove();
$('<p>By ABC</p>').insertAfter($(this));
});
}
}
<html>
<table class="table" id="example" style="width:100%;">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Device Type</th>
<th scope="col">Map Type</th>
<th scope="col">Name</th>
<th scope="col">Latitude</th>
<th scope="col">Longitude</th>
<th scope="col">Result</th>
<th scope="col">Last Updated</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody *ngFor="let data of data$">
<tr>
<td>{{data.id}}</td>
<td>{{data.deviceType}}</td>
<td>{{data.mapType}}</td>
<td>{{data.name}}</td>
<td>{{data.lat}}</td>
<td>{{data.lng}}</td>
<td>{{data.result}}</td>
<td>{{data.lastUpdate}}</td>
<td><button class="btn btn-block btn-primary">Acknowledge</button></td>
<td><button class="btn btn-block btn-primary">View</button></td>
</tr>
</tbody>
</table>
</html>
edited Nov 15 '18 at 11:03
Brian Tompsett - 汤莱恩
4,2331338101
asked Nov 15 '18 at 6:32
Nurfarahin NadhirahNurfarahin Nadhirah
61
My table includes an 'Acknowledge' button at the end of each row, that is supposed for the user to click and there will be output 'by (whoever clicks the button)'.
my problem is that my button did not work since there is no error in console. Below as attach is my table in html and the js. Please note, im very new in angular 6 and I already tried several ways but did not work.
import { Component, OnInit } from '@angular/core';
import { PagesService } from "../pages.service";
declare var $: any;
@Component({
selector: 'app-alert',
templateUrl: './alert.component.html',
styleUrls: ['./alert.component.scss']
})
export class AlertComponent implements OnInit {
data$:object;
constructor(private data: PagesService) { }
ngOnInit() {
this.data.getAlert().subscribe(data => this.data$ = data);
$('#example').DataTable({
"pagingType": "full_numbers",
"scrollX": true
});
$('#example').find('button').click(function () {
console.log($(this).after());
$(this).next().remove();
$('<p>By ABC</p>').insertAfter($(this));
});
}
}
<html>
<table class="table" id="example" style="width:100%;">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Device Type</th>
<th scope="col">Map Type</th>
<th scope="col">Name</th>
<th scope="col">Latitude</th>
<th scope="col">Longitude</th>
<th scope="col">Result</th>
<th scope="col">Last Updated</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody *ngFor="let data of data$">
<tr>
<td>{{data.id}}</td>
<td>{{data.deviceType}}</td>
<td>{{data.mapType}}</td>
<td>{{data.name}}</td>
<td>{{data.lat}}</td>
<td>{{data.lng}}</td>
<td>{{data.result}}</td>
<td>{{data.lastUpdate}}</td>
<td><button class="btn btn-block btn-primary">Acknowledge</button></td>
<td><button class="btn btn-block btn-primary">View</button></td>
</tr>
</tbody>
</table>
</html>
edited Nov 15 '18 at 11:03
Brian Tompsett - 汤莱恩
4,2331338101
asked Nov 15 '18 at 6:32
Nurfarahin NadhirahNurfarahin Nadhirah
61
edited Nov 15 '18 at 11:03
Brian Tompsett - 汤莱恩
4,2331338101
asked Nov 15 '18 at 6:32
Nurfarahin NadhirahNurfarahin Nadhirah
61
edited Nov 15 '18 at 11:03
Brian Tompsett - 汤莱恩
4,2331338101
edited Nov 15 '18 at 11:03
Brian Tompsett - 汤莱恩
4,2331338101
edited Nov 15 '18 at 11:03
Brian Tompsett - 汤莱恩
4,2331338101
4,2331338101
asked Nov 15 '18 at 6:32
Nurfarahin NadhirahNurfarahin Nadhirah
61
asked Nov 15 '18 at 6:32
Nurfarahin NadhirahNurfarahin Nadhirah
61
asked Nov 15 '18 at 6:32
Nurfarahin NadhirahNurfarahin Nadhirah
61
61
1
Angular does give you the solution to bind events on the elements. There is no need to use jQuery for the same.
– Jai
Nov 15 '18 at 6:35
add a comment |
1
Angular does give you the solution to bind events on the elements. There is no need to use jQuery for the same.
– Jai
Nov 15 '18 at 6:35
1
1
Angular does give you the solution to bind events on the elements. There is no need to use jQuery for the same.
– Jai
Nov 15 '18 at 6:35
Angular does give you the solution to bind events on the elements. There is no need to use jQuery for the same.
– Jai
Nov 15 '18 at 6:35
add a comment |
3 Answers
3
active
oldest
votes
0
You can make use of click event handler.
<button class="btn btn-block btn-primary" (click)="clickMe()">Acknowledge</button>
Component:
@Component({
selector: 'app-alert',
templateUrl: './alert.component.html',
styleUrls: ['./alert.component.scss']
})
export class AlertComponent implements OnInit {
data$:object;
constructor(private data: PagesService) { }
ngOnInit() {
}
clickMe(){
// Your logic
}
}
More Info is available here.
answered Nov 15 '18 at 6:40
Krishna MohanKrishna Mohan
4251616
unfortunately i already did this solution, even before i put the question on stackoverflow. do u have any other solution that i might can follow, sir?
– Nurfarahin Nadhirah
Nov 18 '18 at 1:13
add a comment |
0
In your HTML.
<td><button class="btn btn-block btn-primary" (click)="btnClick()">Acknowledge</button></td>
And In your component.ts file. Under the constructor code.
btnClick(){
alert("It works... ");
}
answered Nov 15 '18 at 6:58
Sachin ShahSachin Shah
1,6901515
@Nurfarahin Nadhirah Can you please update your status ?
– Sachin Shah
Nov 24 '18 at 18:46
add a comment |
0
Add a click attribute to your button like so:
(click)="console.log('Hello World!')"
You can replace the console.log() with a function like: onCLickedAcknowledge() and have it declared in your component.
answered Nov 15 '18 at 7:26
Cold CerberusCold Cerberus
400112
already did this way but it didnt work :/
– Nurfarahin Nadhirah
Nov 18 '18 at 1:12
Can you show me your button tag?
– Cold Cerberus
Nov 19 '18 at 5:21
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53313676%2fangular-6-making-button-works-to-display-data%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You can make use of click event handler.
<button class="btn btn-block btn-primary" (click)="clickMe()">Acknowledge</button>
Component:
@Component({
selector: 'app-alert',
templateUrl: './alert.component.html',
styleUrls: ['./alert.component.scss']
})
export class AlertComponent implements OnInit {
data$:object;
constructor(private data: PagesService) { }
ngOnInit() {
}
clickMe(){
// Your logic
}
}
More Info is available here.
answered Nov 15 '18 at 6:40
Krishna MohanKrishna Mohan
4251616
unfortunately i already did this solution, even before i put the question on stackoverflow. do u have any other solution that i might can follow, sir?
– Nurfarahin Nadhirah
Nov 18 '18 at 1:13
add a comment |
0
You can make use of click event handler.
<button class="btn btn-block btn-primary" (click)="clickMe()">Acknowledge</button>
Component:
@Component({
selector: 'app-alert',
templateUrl: './alert.component.html',
styleUrls: ['./alert.component.scss']
})
export class AlertComponent implements OnInit {
data$:object;
constructor(private data: PagesService) { }
ngOnInit() {
}
clickMe(){
// Your logic
}
}
More Info is available here.
answered Nov 15 '18 at 6:40
Krishna MohanKrishna Mohan
4251616
unfortunately i already did this solution, even before i put the question on stackoverflow. do u have any other solution that i might can follow, sir?
– Nurfarahin Nadhirah
Nov 18 '18 at 1:13
add a comment |
0
0
0
You can make use of click event handler.
<button class="btn btn-block btn-primary" (click)="clickMe()">Acknowledge</button>
Component:
@Component({
selector: 'app-alert',
templateUrl: './alert.component.html',
styleUrls: ['./alert.component.scss']
})
export class AlertComponent implements OnInit {
data$:object;
constructor(private data: PagesService) { }
ngOnInit() {
}
clickMe(){
// Your logic
}
}
More Info is available here.
answered Nov 15 '18 at 6:40
Krishna MohanKrishna Mohan
4251616
You can make use of click event handler.
<button class="btn btn-block btn-primary" (click)="clickMe()">Acknowledge</button>
Component:
@Component({
selector: 'app-alert',
templateUrl: './alert.component.html',
styleUrls: ['./alert.component.scss']
})
export class AlertComponent implements OnInit {
data$:object;
constructor(private data: PagesService) { }
ngOnInit() {
}
clickMe(){
// Your logic
}
}
More Info is available here.
answered Nov 15 '18 at 6:40
Krishna MohanKrishna Mohan
4251616
answered Nov 15 '18 at 6:40
Krishna MohanKrishna Mohan
4251616
answered Nov 15 '18 at 6:40
Krishna MohanKrishna Mohan
4251616
answered Nov 15 '18 at 6:40
Krishna MohanKrishna Mohan
4251616
4251616
unfortunately i already did this solution, even before i put the question on stackoverflow. do u have any other solution that i might can follow, sir?
– Nurfarahin Nadhirah
Nov 18 '18 at 1:13
add a comment |
unfortunately i already did this solution, even before i put the question on stackoverflow. do u have any other solution that i might can follow, sir?
– Nurfarahin Nadhirah
Nov 18 '18 at 1:13
unfortunately i already did this solution, even before i put the question on stackoverflow. do u have any other solution that i might can follow, sir?
– Nurfarahin Nadhirah
Nov 18 '18 at 1:13
unfortunately i already did this solution, even before i put the question on stackoverflow. do u have any other solution that i might can follow, sir?
– Nurfarahin Nadhirah
Nov 18 '18 at 1:13
add a comment |
0
In your HTML.
<td><button class="btn btn-block btn-primary" (click)="btnClick()">Acknowledge</button></td>
And In your component.ts file. Under the constructor code.
btnClick(){
alert("It works... ");
}
answered Nov 15 '18 at 6:58
Sachin ShahSachin Shah
1,6901515
@Nurfarahin Nadhirah Can you please update your status ?
– Sachin Shah
Nov 24 '18 at 18:46
add a comment |
0
In your HTML.
<td><button class="btn btn-block btn-primary" (click)="btnClick()">Acknowledge</button></td>
And In your component.ts file. Under the constructor code.
btnClick(){
alert("It works... ");
}
answered Nov 15 '18 at 6:58
Sachin ShahSachin Shah
1,6901515
@Nurfarahin Nadhirah Can you please update your status ?
– Sachin Shah
Nov 24 '18 at 18:46
add a comment |
0
0
0
In your HTML.
<td><button class="btn btn-block btn-primary" (click)="btnClick()">Acknowledge</button></td>
And In your component.ts file. Under the constructor code.
btnClick(){
alert("It works... ");
}
answered Nov 15 '18 at 6:58
Sachin ShahSachin Shah
1,6901515
In your HTML.
<td><button class="btn btn-block btn-primary" (click)="btnClick()">Acknowledge</button></td>
And In your component.ts file. Under the constructor code.
btnClick(){
alert("It works... ");
}
answered Nov 15 '18 at 6:58
Sachin ShahSachin Shah
1,6901515
answered Nov 15 '18 at 6:58
Sachin ShahSachin Shah
1,6901515
answered Nov 15 '18 at 6:58
Sachin ShahSachin Shah
1,6901515
answered Nov 15 '18 at 6:58
Sachin ShahSachin Shah
1,6901515
1,6901515
@Nurfarahin Nadhirah Can you please update your status ?
– Sachin Shah
Nov 24 '18 at 18:46
add a comment |
@Nurfarahin Nadhirah Can you please update your status ?
– Sachin Shah
Nov 24 '18 at 18:46
@Nurfarahin Nadhirah Can you please update your status ?
– Sachin Shah
Nov 24 '18 at 18:46
@Nurfarahin Nadhirah Can you please update your status ?
– Sachin Shah
Nov 24 '18 at 18:46
add a comment |
0
Add a click attribute to your button like so:
(click)="console.log('Hello World!')"
You can replace the console.log() with a function like: onCLickedAcknowledge() and have it declared in your component.
answered Nov 15 '18 at 7:26
Cold CerberusCold Cerberus
400112
already did this way but it didnt work :/
– Nurfarahin Nadhirah
Nov 18 '18 at 1:12
Can you show me your button tag?
– Cold Cerberus
Nov 19 '18 at 5:21
add a comment |
0
Add a click attribute to your button like so:
(click)="console.log('Hello World!')"
You can replace the console.log() with a function like: onCLickedAcknowledge() and have it declared in your component.
answered Nov 15 '18 at 7:26
Cold CerberusCold Cerberus
400112
already did this way but it didnt work :/
– Nurfarahin Nadhirah
Nov 18 '18 at 1:12
Can you show me your button tag?
– Cold Cerberus
Nov 19 '18 at 5:21
add a comment |
0
0
0
Add a click attribute to your button like so:
(click)="console.log('Hello World!')"
You can replace the console.log() with a function like: onCLickedAcknowledge() and have it declared in your component.
answered Nov 15 '18 at 7:26
Cold CerberusCold Cerberus
400112
Add a click attribute to your button like so:
(click)="console.log('Hello World!')"
You can replace the console.log() with a function like: onCLickedAcknowledge() and have it declared in your component.
answered Nov 15 '18 at 7:26
Cold CerberusCold Cerberus
400112
answered Nov 15 '18 at 7:26
Cold CerberusCold Cerberus
400112
answered Nov 15 '18 at 7:26
Cold CerberusCold Cerberus
400112
answered Nov 15 '18 at 7:26
Cold CerberusCold Cerberus
400112
400112
already did this way but it didnt work :/
– Nurfarahin Nadhirah
Nov 18 '18 at 1:12
Can you show me your button tag?
– Cold Cerberus
Nov 19 '18 at 5:21
add a comment |
already did this way but it didnt work :/
– Nurfarahin Nadhirah
Nov 18 '18 at 1:12
Can you show me your button tag?
– Cold Cerberus
Nov 19 '18 at 5:21
already did this way but it didnt work :/
– Nurfarahin Nadhirah
Nov 18 '18 at 1:12
already did this way but it didnt work :/
– Nurfarahin Nadhirah
Nov 18 '18 at 1:12
Can you show me your button tag?
– Cold Cerberus
Nov 19 '18 at 5:21
Can you show me your button tag?
– Cold Cerberus
Nov 19 '18 at 5:21
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53313676%2fangular-6-making-button-works-to-display-data%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Angular does give you the solution to bind events on the elements. There is no need to use jQuery for the same.
– Jai
Nov 15 '18 at 6:35