"Discover the versatility of implementing a single ag grid across various components, all while dynamically adjusting its style

I am facing an issue where I have an angular grid ag-grid in component1, which is being used in some other component2. Now, I need to use the same component1 in component3 but with a different class for ag-grid, specifically 'ag-grid-theme-dark'. How can I pass the configuration class to the component?

Here is the code for component1:

<ag-grid-angular class="ag-theme-balham" [gridOptions]="gridOptions"
    [rowData]="gridSource" [columnDefs]="columnDefs" [rowClassRules]="rowClassRules"
    (gridReady)="onGridReady($event)">
  </ag-grid-angular>

 this.gridOptions = {
      rowData: this.gridSource
    };

And here is the code for component3:

On click of a button icon, a popup will open displaying the ag-grid, but we want it to have the 'ag-grid-theme-dark' class.

 private dialogRef: MatDialogRef<component3>;
 dataValues() {
    this.dialogRef = this.openDialog.open(component3, {
      width: '100%',
      height: '100%',
      data: {
        context: this, dataTable: this.comingData, Col: this.column
      }
    });
  }
}

Answer №1

A customized wrapper component can be created to enclose your grid with default settings or by passing them as parameters.

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

@Component({
  selector: 'wrapper-component',
  templateUrl: './wrapper.component.html',
  styleUrls: [ './wrapper.component.scss' ]
})
export class WrapperComponent  {
    @Input() columnDefs: Array<any>;
    @Input() rowData: Array<any>;
}

The HTML template would be:

<ag-grid-angular
    class="ag-theme-alpine"
    [rowData]="rowData"
    [columnDefs]="columnDefs">
</ag-grid-angular>

To make it more versatile, you can design it to be generic and utilize it in various parts of your application by adjusting the inputs for different views, which is the recommended approach.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Identify whether the page is being accessed through the Samsung stock browser or as an independent web application

Hey there! I am on a mission to determine whether my webpage is being accessed through Samsung's default browser or as a standalone web app saved on the homescreen. Unfortunately, the javascript codes I have come across only seem to work for Safari an ...

What is the reason why the show() function in JQuery only applies to one specific element, rather than all elements selected with the same selector?

JSFiddle. This example code features a nested <table> within another <table>. The main issue concerns the click listener for the #add button. Specifically, the final if/else statement in the function. When you execute this code and click the ...

Updates to the Tailwind file are not appearing on the page after reopening the file

Every time I reopen the project, the file tailwind properties do not get rebuilt and if I add new properties like text-color, they are also not reflected. Any suggestions on how to solve this issue? I need the project to update and take in new properties ...

How can I incorporate my styles into a separate css file for use in a React project?

Although it may seem simple, I am interested in incorporating SCSS into my React application for styling purposes. I understand that React will interpret all of my styles and render them in separate <style> tags within the <head> section. I hav ...

You cannot assign an array of 'Contact' objects to a single 'Contact' parameter

During the development process, I encountered an error while trying to add a new contact. The error message states: Error: src/app/contacts/contacts.component.ts:32:28 - error TS2345: Argument of type 'Contact[]' is not assignable to parameter o ...

Routing with nested modules in Angular 2 can be achieved by using the same

Encountering a common issue within a backend application. Various resources can be accessed through the following routes: reports/view/:id campains/view/:id suts/view/:id certifications/view/:id Note that all routes end with the same part: /view/:id. ...

Show two choices in a select box next to each other

I've been attempting to display a select box with two options side by side in a list format. Struggling to find any libraries that can achieve this functionality. Here is an example: <select> <option x><option y> <optio ...

Encountering "SyntaxError:" due to an unexpected token in the JSON data at the beginning while trying to parse with JSON.parse

Encountering a "SyntaxError:" Unexpected token in JSON at position 0 when fetching compressed data from backend Spring Boot in Angular 7 On the backend, I am compressing a list of objects using the following structure: ArticleObj.java public class Articl ...

Tips for ensuring the page remains functional with the signOut feature even after a refresh

I am facing an issue with my website. On the home page, I have a sign-in and sign-out column. Then, on the user page, there is a sign-up form. When I sign out, it works fine but upon refreshing the page, it still shows as if the user is not signed out. Can ...

able to move through the content without displaying the scrollbar

I am looking to keep my content able to scroll, but I don't want the scrollbar to be visible. I have written my CSS like this: #content-three{ width:100%; height:100%; position:relative; overflow:hidden; } .block_s{ width:90%; ...

Validate that a string is a correct file name and path in Angular without using regular expressions

Currently, I am using regex to determine if a string is a valid file name and path. However, when the string length becomes longer, it ends up consuming a significant amount of CPU, resulting in browser performance issues. public static readonly INVALID_F ...

Send an API request using an Angular interceptor before making another call

Within my application, there are multiple forms that generate JSON objects with varying structures, including nested objects and arrays at different levels. These forms also support file uploads, storing URLs for downloading, names, and other information w ...

arrange a div inside another div

I'm struggling to grasp the concept of how divs function in HTML. Below is a snippet of my HTML code: <div id="user_p"> <img src="img/pp/djbaptou.jpg"> <div class="followings"> djbaptou </br> Baptiste Arnaud </br> ...

What is the method by which the Angular compiler handles instances of multiple template reference variables sharing the same name

I am eager to start contributing to Angular and have a unique idea for a feature. My proposal is to enhance the template compiler so that it issues a warning if a template contains two variables with identical names. I believe I am on the right track by ...

What is the meaning of this CSS acronym?

div[id^=picture]:target{ /*applying various styles here*/ } I stumbled upon the snippet of code shown above on a website discussing CSS image galleries. Can anyone clarify what this code accomplishes? Appreciate it. ...

TranslateY animation glitching

I need help with expanding a box to 100% height after click, then collapsing and sticking to the bottom. I created a function in Vue framework to handle the animation, but it's not working smoothly. How can I make it less buggy? Check out the demo her ...

Properly conducting Angular mat-checkbox testing

I'm trying to determine the proper method for testing when the checkbox is checked and its bound value is changed. Below is my HTML code: <div> <mat-checkbox class="col-md-9 text-right" id="checkid" name="check ...

Retrieve information from the API following a change in language with Ngx-Translate

I am working on a web app using Angular 12 that supports 3 languages. To manage the languages, I have utilized Ngx-Translate. Overall, everything is functioning correctly, but I have encountered a small issue. I am using the onLangChange event emitter to ...

Fetching an item from Local Storage in Angular 8

In my local storage, I have some data stored in a unique format. When I try to retrieve the data using localStorage.getItem('id');, it returns undefined. The issue lies in the way the data is stored within localStorage - it's structured as a ...

Checking for empty inputs using Html, JavaScript, and CSS

I need help with a form that has 6 input fields. I want to ensure all fields are filled out, and if not, display an alert message. Any suggestions on how to achieve this? Additionally, I'm experiencing difficulties implementing different font styles. ...