How to push data and detect changes in angular 2 + version?

Question

In previous angular version we had $scope.apply to detect changes , So i below code i have data from detailService that is printed now i am pushing data to object its throwing error object property is undefined , what is correct approach in new angular version to push data to array and bind it to the dom ?

app.component.ts

  import { Component, OnInit,Pipe, PipeTransform, EventEmitter, Output } from '@angular/core';
import { DetailService } from '../detail.service';
import { StreamService } from '../stream.service';
import { MatTableDataSource } from '@angular/material';
import {GtConfig} from '@angular-generic-table/core';
import { GenericTableComponent} from '@angular-generic-table/core';
import * as io from 'socket.io-client';


export interface Element {
        ticketNum: number;
        ticketOpened: number;
        eventType: string;
        riskIndex: string;
        riskValue: number;
        severity: string;
        lastModifiedDate: number;
        assetID: string;
    }
    @Component({
      selector: 'app-detail',
      templateUrl: './detail.component.html',
      styleUrls: ['./detail.component.css'],

    })
export class DetailComponent{
  messageArray: any[];
    message1:Object = {};
   public secondConfigObject: GtConfig<any>;

    constructor(private detailService: DetailService) {
        this.secondConfigObject = {
            settings: this.getBaseSettings(),
            fields: this.getBaseFields(),
            data: []
        };
    };

    ngOnInit() {
        this.detailService.currentMessage1.subscribe(message1 => {
            console.log('eventINDetailComp',message1);
            this.secondConfigObject.data.push(message1);
        });
    }

}

app.component.html

<div class="table-responsive">
    <generic-table [gtClasses]="'table-hover'" #myCustomTable [gtSettings]="secondConfigObject.settings" [gtFields]="secondConfigObject.fields" [gtData]="secondConfigObject.data"></generic-table>
</div>

Do you use ChangeDetectionStrategy.OnPush? If so, you can try removing that option. Otherwise, you will find a few ways to force change detection in this answer. — Martin Parenteau
– Martin Parenteau, Commented Jan 19, 2018 at 15:24
@ConnorsFan changes are automatically detected within angular 2+ — mast3rd3mon
– mast3rd3mon, Commented Jan 19, 2018 at 15:26
@mast3rd3mon - Not always, especially with ChangeDetectionStrategy.OnPush. — Martin Parenteau
– Martin Parenteau, Commented Jan 19, 2018 at 15:28
@ConnorsFan unless running something outside the angular scope, it always does, thats the benefits of using angular over angularjs or other frameworks — mast3rd3mon
– mast3rd3mon, Commented Jan 19, 2018 at 15:29
@mast3rd3mon - I invite you to take a look at the cases illustrated in this document. — Martin Parenteau
– Martin Parenteau, Commented Jan 19, 2018 at 15:56

mast3rd3mon · Accepted Answer · 2018-01-19 15:21:19Z

2

You should move the code from the constructor to the start of the ngOnInit() function so the data gets set once the page has been created, not during.

As for data binding, variables on the screen/html will automatically update when they are changed in the code behind

answered Jan 19, 2018 at 15:21

mast3rd3mon

8,9153 gold badges25 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

hussain Over a year ago

it throws error at message1.prop is undefined if i move code inside ngOnInit not sure why this is invoking , this is row click event it should only invoke when we have data pass from detail service

mast3rd3mon Over a year ago

where do you use message1.prop? i cant see it in your code?

hussain Over a year ago

i am just giving you example so in subscribe i have message1 that is the object coming from service now properties are undefined on that because this.detailService.currentMessage1 invoked on application launch it should not

mast3rd3mon Over a year ago

if you put the subscribe in the ngOnInit, then it should be invoked when the application is launched

hussain Over a year ago

but i am passing the event when row is clicked in the table what will be correct approach in that case, basically passing data object from one table to another

|

Collectives™ on Stack Overflow

How to push data and detect changes in angular 2 + version?

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related