Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
messages.tsx
import { Component, State } from '@stencil/core';
import { MessageService } from '../../services/message.service';
@Component({
tag: 'app-messages',
styleUrl: 'messages.css'
})
export class Messages {
private messageService: MessageService;
@State() private messages: string[];
constructor() {
this.messageService = MessageService.Instance;
}
componentWillLoad() {
this.getMessages();
}
getMessages(): void {
this.messageService.getMessages()
.subscribe(messages => {
this.messages = [];
this.messages = messages;
});
}
render() {
return (
<div class='app-messages'>
Messages:
{this.messages ?
(
<button class="clear"
onClick={() => this.messageService.clear()}>clear</button>
) : ( null )
}
{this.messages ?
(
this.messages.map((message) =>
<p>{message}</p>
)
) : ( null )
}
</div>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment