How load a component by click a button in Angular 7

Question

I want to load a component when click a row of my table. you can see my table. I had made this table as if a row clicked alert will show as THIS ROW HAS CLICKED. I used it for check weather row clicking is working or not. Hence now I can say It is working.

But actually I want to display the details of relevant row which was clicked, by open a component and inside it.

My code as follow, I using this table in finished component.

finishing.component.ts

import { Component, OnInit } from '@angular/core';
import { Finished } from './finished.model';
import { FinishedService } from './finished.service';

@Component({
selector: 'ngx-finished',
styles: [],
template: `
    <ng2-smart-table
    [settings]="settings"
    (userRowSelect)="onCustomAction($event)"
    [source]="list"
    ></ng2-smart-table>
`
})
export class FinishedComponent implements OnInit {
    list: Finished[] = [];
    constructor(private service: FinishedService) {}

    ngOnInit() {
        this.service.getPatients().subscribe(actionArray => {
        let patients_data = actionArray.payload.get('data');
        if (patients_data) {
            this.list = patients_data;
        }
        });
    }

    settings = {
        add: {
            addButtonContent: '<i class="nb-plus"></i>',
            createButtonContent: '<i class="nb-checkmark"></i>',
            cancelButtonContent: '<i class="nb-close"></i>',
            confirmCreate: true
        },
        edit: {
            editButtonContent: '<i class="nb-edit"></i>',
            saveButtonContent: '<i class="nb-checkmark"></i>',
            cancelButtonContent: '<i class="nb-close"></i>',
            confirmSave: true
        },
        delete: {
            deleteButtonContent: '<i class="nb-trash"></i>',
            confirmDelete: true
        },
        view: {
            viewButtonContent: ''
        },

        columns: {
            nic: {
                title: 'NIC'
            },
            name: {
                title: 'Name'
            },
            address: {
                title: 'Address'
            },
            email: {
                title: 'Email'
            },
            haircolor: {
                title: 'Hair Color'
            }
        }
    };


    onCustomAction(event) {
        alert(`THIS ROW HAS CLICKED`);

    }
}

I want to invoke the above mentioned component inside onCustomAction function.

onCustomAction(event) {
    I want to invoke the above mentioned component in here.
}

define "invoke a component". Do you want to navigate to another page of your application, displaying another component? Then read the guide about routing? Do you know to display a modal dialog like in your screenshot? Then pick a library that has a modal component and read its documentation. Do you want to display another component the template of your finishing component template (below the table for example), then add the selector of that component in your template, and use ngIf to display it or not depending on whether you've clicked on a row or not. — JB Nizet
– JB Nizet, Commented Apr 25, 2019 at 6:38
what is above mentioned component? is it new component to display just info? — Niraj
– Niraj, Commented Apr 25, 2019 at 6:40
Look at this: material.angular.io/components/dialog/overview — hetious
– hetious, Commented Apr 25, 2019 at 6:50

Drunkpunk Men · Accepted Answer · 2019-04-25 08:13:53Z

To do that you must use routing. To do this, you must follow these steps.

First, generate the routing in the application.

$ ng g module app-routing

This is an example of a routing, with a Home component by default and an Element component if you use the route /element

import { HomeComponent,ElementComponent} from './components';


const appRoutes: Routes = [ 
  { path: 'element', component: ElementComponent }, 
  { path: 'home',  component: HomeComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];
@NgModule({ 
  imports: [ 
    RouterModule.forRoot( 
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only 
    ) // other imports here 
  ], 
  ... 
}) 
export class AppModule { }

Now we modify the app.module.ts file to add the reference to the routing

import { AppRoutingModule } from './app-routing/app-routing.module'; 

imports: [ BrowserModule, NgbModule, AppRoutingModule, ]

In the main component we must call the routing component inside app.component.html

<router-outlet></router-outlet>

Now we only have to link with the Angular component (in HomeComponent.ts for example)

import { Component } from '@angular/core'; 
import { Router } from '@angular/router';

export class HomeComponent { 
  constructor( private router: Router ) {} 

  onCustomAction(event) { 
    this.router.navigate(['/element'])
      .then(success => console.log('navigation success?' , success))
      .catch(console.error); 
  } 
}

noob_coder · Accepted Answer · 2020-06-06 16:56:23Z

0

You can also use angular material modal if you want to display row details on same page without using routing. Here is the link - https://v8.material.angular.io/components/dialog/overview

answered Jun 6, 2020 at 16:56

noob_coder

91 bronze badge

2 Comments

Jeremy Caney Over a year ago

This would be a more useful answer if it additionally included a code example. Providing a link is nice, but the answer should stand on its own even if, later, the page the link points to is removed or renamed (as often happens). Would you mind updating this with an example of using the Angular Material modal in this way?

Tom Cockram Over a year ago

This is a half baked answer. As Jeremy pointed out, it should stand on it's own.

Collectives™ on Stack Overflow

How load a component by click a button in Angular 7

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related