How to dynamically load a component in Angular 7 with the click of a button

Question

How to dynamically load a component in Angular 7 with the click of a button

I am looking to implement a feature where clicking on a row in my table will load a specific component. In order to test this functionality, I have created a simple alert that pops up when a row is clicked displaying the message THIS ROW HAS CLICKED. This confirms that row clicking is functioning correctly.

However, my ultimate goal is to display the details of the clicked row by opening a separate component. You can view an example of what I'm aiming for in the mockup image below:

https://i.sstatic.net/E67hG.png

The table implementation shown below is used within the 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`);

    }
}

To achieve the desired functionality of loading the relevant component when a row is clicked, I need to make some modifications within the onCustomAction function:

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

angular typescript

Answer 1

Answer №1

If you want to achieve this, you'll need to utilize routing. Follow these steps to implement it:

Start by setting up the routing in your application.

$ ng g module app-routing

Here is a sample routing setup with a default Home component and an Element component for 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 } // <-- for debugging purposes 
    ) // other imports here 
  ], 
  ... 
}) 
export class AppModule { }

Next, update the app.module.ts file to include the reference to the routing

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

imports: [ BrowserModule, NgbModule, AppRoutingModule, ]

In the main component, make sure to add the routing component inside app.component.html

<router-outlet></router-outlet>

Finally, link the Angular component (e.g., HomeComponent.ts) to the routing

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

Answer 2

If you want to achieve this, you'll need to utilize routing. Follow these steps to implement it:

Start by setting up the routing in your application.

$ ng g module app-routing

Here is a sample routing setup with a default Home component and an Element component for 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 } // <-- for debugging purposes 
    ) // other imports here 
  ], 
  ... 
}) 
export class AppModule { }

Next, update the app.module.ts file to include the reference to the routing

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

imports: [ BrowserModule, NgbModule, AppRoutingModule, ]

In the main component, make sure to add the routing component inside app.component.html

<router-outlet></router-outlet>

Finally, link the Angular component (e.g., HomeComponent.ts) to the routing

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

Answer 3

Answer №2

If you prefer displaying row details on the same page without utilizing routing, consider using angular material modal. Check out this link for more information:

Answer 4

If you prefer displaying row details on the same page without utilizing routing, consider using angular material modal. Check out this link for more information:

How to dynamically load a component in Angular 7 with the click of a button

Answer №1

Answer №2

Similar questions

The term 'Employee' is typically used as a classification, but in this context, it is being treated as a specific value

The 'npm update' command seems to be failing when attempting to update dependencies within Angular2

Patience is key when waiting for one observable to respond before triggering another in Angular's async environment

From milliseconds to hours: a straightforward conversion

Encountered an error stating 'name' property is undefined while using @input in Angular 2

Unexpected behavior: Angular4/Javascript Date object alters when timezone is specified in Date constructor

Transferring data from an Angular 2 component to a service

Angular 4, Trouble: Unable to resolve parameters for StateObservable: (?)

When a class decorator is returned as a higher-order function, it is unable to access static values

Tips on toggling the visibility of an element in Angular 4

Troubleshooting a pair of distinct software programs: Angular and a web API

Navigating in Angular with parameters without modifying the URL address

`How can we efficiently transfer style props to child components?`

Learning to integrate Socket.io into your FeathersJS service

The image map library functions seamlessly with React but encounters issues when integrated with Next.js

What is the proper way to structure a React component class without any props?

Availability of variables and declaration of functions

A single pledge fulfilled in two distinct ways

Combining Bootstrap admin template with SCSS styling in Angular 2

Tips for effectively passing query string parameters in Angular