1

how can I use a boolean variable initialized in a component in other components ? Let me explain : I have a boolean variable 'flash' that I initialize in my component 'chat-threads'.

<div class="flash-signal">
  Signal visuel :
  <input type="radio" name="flashsignal" id="flashsignal1" checked="checked" (click)="flashSignal()">
  <label for="flashsignal1">Oui</label>
  <input type="radio" name="flashsignal" id="flashsignal2" (click)="notFlashSignal()">
  <label for="flashsignal2">Non</label>
</div>

Other code :

export class ChatThreadsComponent implements OnInit {

flash = true;

constructor(public threadsService: ThreadsService,
          public messagesService: MessagesService,
          public boxService: BoxService) {
  this.threads = threadsService.orderedThreads;
}

ngOnInit(): void {
   this.flash = true;
}

notFlashSignal(): void {
  this.flash = false;
}

flashSignal(): void {
    this.flash = true;
}
}

I would like to be able to read the value of this variable in another component 'chat-window' in order to be able to display a visual signal or not.

<div [ngClass]="{'notification-message-unread' : !box.thread.lastMessage.isRead && flash}">

Do I have to implement this variable in my component?

EDIT :

export class Box {
id: string;
thread: Thread;
discussion: Observable<Message[]>;
flash: boolean;

constructor(id?: string,
            thread?: Thread,
            messages?: Observable<Message[]>,
            flash?: boolean
) {
    this.id = id || uuid();
    this.thread = thread || null;
    this.discussion = messages;
    this.flash = flash || true;
}

}

Component :

<div [ngClass]="{'notification-message-unread' : !box.thread.lastMessage.isRead && !box.flash}">
2
  • 2
    Whenever it comes to sharing of data, using service is the way to go.
    – CozyAzure
    Jul 27, 2017 at 8:44
  • @CozyAzure I published my post. Do you advise me to do this?
    – user8326108
    Jul 27, 2017 at 8:53

2 Answers 2

7

When two components are not having any parent child relationship, the best way is a shared service injected into the constructors of A and B.

component A:

constructor(private sharingService: SharingService) { }

component B:

constructor(private sharingService: SharingService) { }

Service:

import { Injectable, } from '@angular/core';

@Injectable()

flash: boolean = true;

constructor() {}

You can use it in components using this.sharingService.flash. For complete reference see this.

2
  • OK, thanks. I published my post. Is that what must be done? How do I initialize this variable to true by default ?
    – user8326108
    Jul 27, 2017 at 9:02
  • Yes, this is the right way to share a variable between two independent components. By default value you can give in the service like I have mentioned in my example.
    – monica
    Jul 27, 2017 at 9:07
1

Use @Input decorator to move your values to child component or pass it through services. In child:

@Input() name: any; 

then in parent component

<child [name]="farrukh"></child>

More can be read about services:

2
  • Yes but in my case, both components have no inheritance
    – user8326108
    Jul 27, 2017 at 9:04
  • Then service is a better solution for you Jul 27, 2017 at 9:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.