Lightstreamer client implementation with Angular 2

Alessandro.Carioni

Hello,

You should look at the Angular Demo. It subscribes to an item in COMMAND mode to display a table of stock prices.

Alessandro.Carioni

Hello,

You should look at the Angular Demo and the Portfolio Demo . The first demo shows the integration between the Lightstreamer client and Angular, while the second demo shows an example of item subscriptions in COMMAND mode.

rvkvino

Hello,
I have working code in angular for MERGE subscription. This is working fine in angular.
I have implemented this by using

this.subscription = new Subscription("MERGE", this.itemNames, this.fieldNames);

In this itemNames and fieldNames already I know so given statically, there is no issue on this.
In COMMAND subscription I have used this in using HTML it's working fine without any issue. But when I use in angular 2 this not working same which I have done in HTML.
I did below code in my javascript file when I use HTML,

var liverateGrid = new DynaGrid("lsliverates",true);
liverateGrid.setNodeTypes(["div","span","img","a"]);
liverateGrid.setAutoCleanBehavior(true,false);
liverateGrid.addListener({
onVisualUpdate: function(key,info) {
console.log(info);
if (info == null) {
return;
}
liverateGrid.setSort("order", false, true);
var liverateSubscription = new Subscription("COMMAND",liverateId,fieldList);
liverateSubscription.setDataAdapter(lsdata.provider);
liverateSubscription.setRequestedSnapshot("yes");

liverateSubscription.addListener(liverateGrid);
lsClient.subscribe(liverateSubscription);

And my template looks like,

<tbody>
<tr id="lsliverates" class="liverate-body" data-source="lightstreamer" >
<td><div data-source="lightstreamer" data-field="desc"></div></td>
<td class='table_data'><div data-source="lightstreamer" data-field="bid"></div></td>
<td class='table_data'><div data-source="lightstreamer" data-field="ask"></div></td>
<td class='table_data'><div data-source="lightstreamer" data-field="delivery"></div></td>
<td style="display:none;"><div data-source="lightstreamer" data-field="order"></div></td>
</tr>
</tbody>

But same I have tried in angular 2 for COMMAND mode, (For MERGE I know the itemNames and fieldNames list so that I have did this success by using the link (https://github.com/Lightstreamer/Lightstreamer-example-StockList-client-angular2)

This below code I have tried in angular but not working,

let lsData = JSON.parse(localStorage.getItem('WLLSData'));
this.lsClient = new LightstreamerClient("http://url:8080", lsData.adapter);
this.lsClient.connectionSharing.enableSharing("WLCommonConnection", "ATTACH", "CREATE");
this.lsClient.connectionOptions.setHttpExtraHeaders({ "username": lsData.username });
this.lsClient.connect();

this.dynasubscription = new Subscription("COMMAND", "lmxtrade" , this.dynafieldNames);
this.dynasubscription.setDataAdapter(lsData.provider);
this.dynasubscription.setRequestedSnapshot("yes");
var liverateGrid = new DynaGrid("liverates",true);
liverateGrid.setNodeTypes(["div","span","img","a"]);
liverateGrid.setAutoCleanBehavior(true,false);

liverateGrid.addListener({
onVisualUpdate: function(key, info, domNode) {
console.log(info);
},
onItemUpdate: (updateObject) => {
var itemName = updateObject.getItemName();
console.log(itemName);
}
});
console.log(liverateGrid);
this.lsClient.subscribe(this.dynasubscription);

Template looks like,

<div id="liverates" data-source="lightstreamer">

<div style="border-right: 1px solid rgb(27, 104, 94);" class="com-name" data-source="lightstreamer" data-field="desc"></div>
<div class="comm_bod" data-source="lightstreamer" data-field="bid"></div>
<div class="comm_bod" data-source="lightstreamer" data-field="ask" ></div>

</div>

Alessandro.Carioni

Hello,

Can you explain what the problem is exactly?
For example, if you try to embed the last code snippet in a straight Html page without Angular, does it work as expected?

rvkvino

Yes it's working in normal html, only issue on Angular. Is this possible to use same method used in html and javascript in Angular application also.

Alessandro.Carioni

Hello,

Lightstreamer widgets work best in straight Html pages.
If you want to implement an Angular app, you should rely on Angular components only.

rvkvino

Hello,
I need some help how to write code for COMMAND mode subscription in Angular components. I have implemented MERGE subscription it's working fine. There is no issue on Angular service and components. Only issue on COMMAND mode subscription.

Alessandro.Carioni

Hello,

You should install the listener onItemUpdate on your subscription object and then update, add or remove rows of your table component according to the values of the fields key and command.

For example,

sub.addListener({
    onItemUpdate: function(update) {
        var cmd = update.getValue('command');
        var key = update.getValue('key');
        switch (cmd) {
        case 'UPDATE':
            // update row identified by key
            update.forEachChangedField(function(name, pos, value) {
                // update field of the row
            });
            break;
        case 'ADD':
            // add a new row identified by key
            break;
        case 'DELETE':
            // delete the row identified by key
            break;
        }
    }
});

In the snippets above, you should replace the comments with Angular code.
Unfortunately we are not Angular experts, so we cannot help with this last point, which depends on the specific Angular widgets you want to use.

rvkvino

Hello,
Is there a way subscription update after dynamically binding rows using MERGE subscription. For example I have 4 rows of data to show the stock market rate, admin having option to change the given set of data-item on that time ajax method used to update the table and dynamically recreate the subscribed items. Now I need to update subscription after alter the table row using ajax. Is this possible?

Alessandro.Carioni

I’m sorry, but it is not possible to change the items bound to a Subscription object while the subscription is active.
You should unsubscribe from the old items and subscribes to the new ones.

kate

Hi, is lightstreamer-client-web or lightstreamer-client applicable for angular 10 and it's Ivy renderer?

Thanks in advance

Alessandro.Carioni

Hello,

Lightstreamer Web Client library is compatible with any version of Angular.
You can download it from here.

kate Hi, is lightstreamer-client-web or lightstreamer-client applicable for angular 10 and it's Ivy renderer?

Thanks in advance

kate

Alessandro.Carioni Hello,

Lightstreamer Web Client library is compatible with any version of Angular.
You can download it from here.

What about deprecated lightstreamer-client library?

Alessandro.Carioni

For new developments we recommend to use the package lightstreamer-client-web because it contains a lot of improvements and bugfixes.
The other package lightstreamer-client is for users who have to maintain legacy code.
You can find a detailed changelog with all the differences between lightstreamer-client-web(which encompasses versions 8.x or above) and lightstreamer-client (which encompasses versions 7.x or below) here.

« Previous Page