0

so, i have a chat messenger app. i started with a simple array or strings to hold the chat messages in typescript chat.ts . This component has the template chat.html which shows the messages as:

chat.html

<div class="chat-container">
        <div *ngFor="let item of items">
            <p>item</p>
        </div>
</div>

chat.ts

@IonicPage()
@Component({
  selector: 'page-chat',
  templateUrl: 'chat.html'
})
export class ChatPage {
    items:string[] = []

   send(msg:string){ this.items.push(msg);}

}

This works fine as expected. However, the items array is pretty much confined within the Chat component. I wanted it to be accessible from other pages etc. So i decided to move it out of it and create a dedicated class to hold it as follows: message-queue.ts

export class MessageQueue{
     static items: Message[] = [];

     constructor(){ }
}

i replace all the this.items in the chat.ts to MessageQueue.items and this all seems fine. However, now I am stuck as how do i refer to this variable in the chat.html ?

replacing:

<div *ngFor="let item of items">

to 

<div *ngFor="let item of MessageQueue.items">

wont work

Vik
  • 8,721
  • 27
  • 83
  • 168
  • In your controller constructor: `this.items = MessageQueue.items;`. MessageQueue should be a service, though. And its items shouldn't be static. – JB Nizet Jun 20 '17 at 20:59
  • why it should be a service? sorry just asking to understand better. i m new to it. – Vik Jun 20 '17 at 21:00
  • 1
    In my opinion the best way would be to set up an angular 2 'service'. The data and methods in a service can be used and set by any component by simply doing a import of the service ts file. I'm sorry I can't go Into details as I'm typing on a phone but please look up what a angular service is on the angular.io api documentation and tutorial – Molik Miah Jun 20 '17 at 21:02
  • 1
    So that you can unit test the controller by mocking the service, for example. Also because that's how Angular apps are architected. – JB Nizet Jun 20 '17 at 21:03
  • 1
    check this link you will get some understanding https://stackoverflow.com/questions/36158848/what-is-the-best-way-to-declare-a-global-variable-in-angular-2-typescript – CharanRoot Jun 20 '17 at 21:04
  • so you are saying, instead of creating a static member as i did above. i should use a service with the same member defined as non-static. and then do things like add elements to it or remove etc ? – Vik Jun 20 '17 at 21:05
  • 1
    I agree with both [MolikMiah](https://stackoverflow.com/users/1876576/molik-miah) and [JBNizet](https://stackoverflow.com/users/571407/jb-nizet), it would make sense to use a static class if that would be a class with some helpers (for showing alerts or something like that), but if you want to share data between several pages, I think you should use a shared service instead – sebaferreras Jun 21 '17 at 06:32

1 Answers1

0

Although using a service would be the best practice in this case, but if you want to know how to access a static property in an angular template, it's like this:

In your .ts file:

public staticMessageQueue: typeof MessageQueue = MessageQueue;

And then in the html template:

<div *ngFor="let item of staticMessageQueue.items">
Akash Nigam
  • 417
  • 5
  • 13