Edit page pop up is not working after button click in angular 6 when trying to edit

Question

I am working in CRUD in angular 6. My job is to click edit button in the table where data is populated and then popup window show and edit it and table gets updated using angular 6.

Please help, thanks in advance.

I tried adding button as below

popup show open but not

HTML Code:

<td class="tbl2"> 
  <button type="button" (click)="OnClickFunction(employee.id)" class="btn btn-info" matTooltip="Click Edit Button">
   Edit
  </button> 
</td>

TS Code:

OnClickFunction(employeeId: string) { 
  alert('move to Edit page'); 
  this.router.navigate(['/edit/'+employeeId]); 
}

Please explain the question well! Where is that Edit Component Code? What is Not working? What is current behavior? — Prashant Pimpale, Jun 19 '19 at 06:25
Hi, I have employee.component.html page where I have the button click and onclick() is there in ts file. now I have to click button and it should trigger popuup page to edit. — Rose1988, Jun 19 '19 at 06:27
I can help but first, you need to show the code of Employee Component and Edit Component — Prashant Pimpale, Jun 19 '19 at 06:30
I really unable to understand what you are trying. Can you share the anydesk Id? — Prashant Pimpale, Jun 19 '19 at 06:37
I just want new page or popup to open, when I click edit button. So i did not write any code.Provide watsup. I will share picture of page — Rose1988, Jun 19 '19 at 06:39
I need to see the code, share your screen! AnyDesk or TeamViewer — Prashant Pimpale, Jun 19 '19 at 06:41
I do not have any, Please let me know any example to do so, by which I can proceed. I can't share my desktop for security reasons — Rose1988, Jun 19 '19 at 06:43
Well! Here is the link:https://medium.com/@nacojohn/implement-angular-material-dialog-in-your-project-486c7c2f7f5d — Prashant Pimpale, Jun 19 '19 at 06:45
hey there is one dependency available for a popup, I think you have to use that rather manual cade and that package is ngx-smart-modal — Pavan Nagadiya, Jun 19 '19 at 07:45

score 0 · Answer 1 · answered Jun 19 '19 at 07:01

0

Component Code constructor(private data: DataService, public dialog: MatDialog){ }

openDialog(): void { const dialogRef = this.dialog.open(UserProfileComponent, { height: '500px', width: '400px', data: {UserInfo : this.authRslt } });

Html

<button (click)="openDialog()">Edit</button>
(You can pass particular id in click event)

answered Jun 19 '19 at 07:01

Vipul Handa

109
1
10

I will try and let you know, do I need to load any npm package to do this? any example with link is well appreciated, my friend. – Rose1988 Jun 19 '19 at 07:34
Did not work for me, it is just staying in same page. – Rose1988 Jun 19 '19 at 11:00

Edit page pop up is not working after button click in angular 6 when trying to edit

1 Answers1