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.
}

Answer 1

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

Answer 2

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); 
  } 
}