I don't understand how data gets broken into key value pairs in Angular using a constructor per event.
Here's my code:
messageFromSocket: keywordList[] = [];
wsSubscription: Subscription;
status;
constructor(public webSocketService: WebSocketService) {
this.wsSubscription = this.webSocketService.createObservableSocket('ws://localhost:3000')
.subscribe(
messages => this.messageFromSocket.push(
messages
),
err => console.log('err'),
() => console.log('The observable stream is complete')
)
}
This is my component.ts minus a few things. Essentially, how I have it working now is that when a websocket event comes in, it pushes automatically to this messageFromSocket keywordList array.
The KeywordList array is actually its' own class in another file with a constructor inside of it.
name: string;
keyword: string;
constructor(name: string, keyword: string) {
this.name = name;
this.keyword = keyword;
}
}
It's being displayed on the front end but as it's own large array.
<ng-container class="keywordBox" *ngFor='let message of messageFromSocket'>
<li>
{{ message }}
</li>
</ng-container>
I can't seem to grasp the concept of how to manipulate the string data coming in from the websocket to create a key value pair of a name and a keyword (both are being sent each time by the websocket without fail), and then display it on the front end like in many of the examples. I would like this so I can better manipulate the data through out the application.
For example, right now it comes through to look like:
['George: Hello']
or
['George: Hello', 'Raul: World']
I'd like to use the KeywordList class to break them out.
Also, if you know how to add padding to just the first item in dynamic content, could you please help me as I feel like I've tried every CSS trick Angular has and I'm still missing something.
Try this changes:
export class KeywordList {
constructor(public name: string, public keyword: string) {}
}
constructor(public webSocketService: WebSocketService) {
this.wsSubscription = this.webSocketService.createObservableSocket('ws://localhost:3000')
.subscribe(
messages => {
messages.forEach(
(message)=> {
const arrayMessage = message.split(':');
const name = arrayMessage[0];
const keyword = arrayMessage[1].trim();
const keywordList: KeywordList = new KeywordList(name,keyword);
this.messageFromSocket.push(keywordList);
}),
err => console.log('err'),
() => console.log('The observable stream is complete')
);
}