Sending input object to MatTableDataSource in Angular Material table

Is there a way to properly pass the object received in the @Input() data (Child Component) to the dataSource? The current method I'm using doesn't seem to work as expected. An example of my approach can be found at this link:


  @Input() data:PeriodicElement[];
  dataSource = new MatTableDataSource<PeriodicElement>(this.data);

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

  constructor() { }

  ngOnInit() {
    this.dataSource.paginator = this.paginator;

    // console.log(this.dataSource)
  }

Answer №1

Explain how to define and initialize the dataSource in the ngOnInit method

@Input() data:PeriodicElement[];
dataSource = new MatTableDataSource<PeriodicElement>();

 @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

constructor() { }

ngOnInit() {
  this.dataSource = new MatTableDataSource<PeriodicElement>(this.data);
  this.dataSource.paginator = this.paginator;

  // console.log(this.dataSource)
}

Answer №2

To optimize the input, it is recommended to utilize the set property with input, for instance:

@Input() set information(value) {}

For a demonstration, check out this live example on Stackbitz

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

JS implementing a listener to modify a Google Map from a separate class

Currently, I am in the process of migrating my Google Map functionality from ionic-native to JavaScript. I am facing an issue while attempting to modify the click listener of my map from a separate class. The problem seems to be related to property errors. ...

Issue with Figma React plugin's PostMessage functionality not behaving as anticipated

I am currently working on developing a plugin for Figma, following the react example provided on their GitHub page: https://github.com/figma/plugin-samples/tree/master/react One of the functionalities I have implemented is a button that triggers a specifi ...

How do I retrieve a template variable or reference from typescript in Angular?

Within my Angular project, I am attempting to retrieve the value from <td [innerHTML]='rupee.replaceHTML' #term></td> and assign it to the variable newdata. Exploring further into the functionality, there are 2 buttons named change a ...

typescript persist zustand: typing your store

Running a simple store interface CartState { cart: { [id: string]: CartDto }; addItem: ({ id, image, name, price }: Omit<CartDto, "quantity">) => void; removeItem: (id: string) => void; reset: () => void; } export const use ...

Setting the value of a Mat-Select in Angular 5 using Angular Material

My current challenge involves testing numerous Angular Material mat-select drop-downs. While I have successfully set the value for regular select drop-downs using productsSelectEl.nativeElement.value = 1; I am curious if there is a way to achieve this w ...

The issue of updating a GLSL uniform variable during an animation in three.js using TypeScript remains unresolved

Running a three.js TypeScript application, I developed custom GLSL shaders using the THREE.ShaderMaterial() class. Now, I aim to enhance my code by switching to the THREE.MeshStandardMaterial class. This is an entirely new experience for me, and despite e ...

Exploring the use of a customizable decorator in Typescript for improved typing

Currently, I am in the process of creating TypeScript typings for a JavaScript library. One specific requirement is to define an optional callable decorator: @model class User {} @model() class User {} @model('User') class User {} I attempted ...

Next.js is displaying an error message indicating that the page cannot be properly

Building a Development Environment next.js Typescript Styled-components Steps taken to set up next.js environment yarn create next-app yarn add --dev typescript @types/react @types/node yarn add styled-components yarn add -D @types/styled-c ...

What is the best way to transmit UTF-8 Arrow &#8594; from typescript to html and showcase it effectively?

When working with HTML, I often find myself creating a div with a tooltip that is connected to a function. Here's an example of what I typically use: <div *ngFor="let user of users"> <div class="myClass" [matToolt ...

Dynamically set the value of a form in <mat-select> using binding

In my 'div' element, I have implemented a "mat-select" feature that contains a dropdown of country lists in a multi-select format. I am looking to automate the process of populating the countries within the "mat-select" when a button is clicked. ...

Guide on organizing the Object into a precise structure in Angular

I am looking to transform the current API response object into a more structured format. Current Output let temp = [ { "imagePath": "", "imageDescription": [ { "language": "en ...

Angular 6: Prevented Loading Resource Due to Content Security Policy: A script from self was blocked from being loaded on the page

Currently, I am developing a project in Angular 6 and everything seems to be running smoothly. Running the command ng --serve and building it using ng build results in no errors when deploying it on my local Tomcat Server. However, when attemptin ...

Tips for streamlining a conditional statement with three parameters

Looking to streamline this function with binary inputs: export const handleStepCompletion = (userSave: number, concur: number, signature: number) => { if (userSave === 0 && concur === 0 && signature === 0) { return {complet ...

The @Input parameter is populated during an HTTP call

Within my app.component.ts, I am invoking a function from a service that returns the result of an HTTP request: questions: QuestionBase<any>[]; constructor(service: QuestionService) { this.questions = service.getQuestions().subscribe(val => c ...

.Net Core Angular app showing a 404 error for all API requests hosted on the server

I encountered an issue with my Angular 4.0 app utilizing a .Net Core backend. During development, I used npm start which included the following call: "concurrently \"webpack-dev-server --inline --hot --progress --port 8080\" \"dotnet run&bso ...

Tips for avoiding Union types in TypeScript from anticipating unnecessary keys?

My function getRespectiveConfig() returns a Union type that includes all the necessary types: interface AlphaConfig { title: string; } interface BetaConfig { id: string; } export interface EncompassingConfig { alphaConfig?: AlphaConfig; b ...

Using TypeScript to asynchronously combine multiple Promises with the await keyword

In my code, I have a variable that combines multiple promises using async/await and concatenates them into a single object const traversals = (await traverseSchemas({filename:"my-validation-schema.json"}).concat([ _.zipObject( [&quo ...

Error Encountered: Unable to access property 'cars' as it is undefined in Angular Material Table

I'm encountering an issue with the Angular Material Table (Angular Material Table) After using ng generate @angular/material:material-table --name=car-table to create the default angular table, everything works fine. However, when I attempt to injec ...

Is there a performance downside to employing a boolean-returning function in ngIf directives?

Here's what I'm trying to convey: // my.component.ts // ... public isVisible() { myObject.nested.prop > 27 && otherObj.foo === 'lala' } Now, in the template: // my.component.html <div *ngIf="isVisible()"> ...

Tips for structuring TypeScript with MobX in a ReactJS project

I created a MobX store as shown below. I defined the types of actions in store.js import { action, observable } from 'mobx'; export class SignStore { @observable UserInformation: { email: ''; password: ''; ...