Use boolean variable in another component

Question

I'm starting under TypeScript, I have a boolean displayReport variable in the component home.component.ts. I want to get the value of this variable in another component series-list.component.ts.

public displayReport: boolean = false;

public viewReport(): void {
console.log(this.displayReport);
this.displayReport = !this.displayReport;

}

Is it possible ?

///////////////////////////////EDIT ///////////////////////:

Here is what I did:

in the home.component.ts component:

constructor(
private studyService: StudyService

) { }

public viewReport(): void {
console.log('displayReport : ' + this.studyService.displayReport);
this.studyService.displayReport = !this.studyService.displayReport;

}

in the series-list.component.ts component:

constructor (private studyService: StudyService) { }

in the service study.service.ts:

public displayReport: boolean = false;

But when I do this in series-list.component.html :

<div *ngIf="this.studyService.displayReport"> </div>

I do not get the value of this.studyService.displayReport variable. I have this error : Unresolved variable studyService

How should I do ?

If these components are not related, use a service: https://stackoverflow.com/a/40539061/6294072 — AT82, Nov 07 '17 at 09:45
Your code should work fine (just tried it), make sure that the service is provided only in the app module level, not in component providers array — AT82, Nov 07 '17 at 10:24
@AJT_82 I tried .. when I am in the html series-list.component.html, he does not know this service. Yet in series-list.component.ts I initialize it like this: `import {StudyService} from "../study/study.service"; export class SeriesListComponent { constructor (private studyService: StudyService) { } }` — Floriane, Nov 07 '17 at 10:54
I reopened the question. Please provide just enough code to reproduce this issue, best would be if you could create a demo. — AT82, Nov 07 '17 at 10:57
We need more code to figure out the problem source. Can you please detail a little more your post ? — Boulboulouboule, Nov 09 '17 at 09:41

score 0 · Answer 1 · answered Nov 07 '17 at 09:41

To share values or method between components, you need to create a service, for example, a report.service.ts that share the report to display and spread it in the components where it is injected.

Here's the official documentation about angular services : https://angular.io/tutorial/toh-pt4

score 0 · Answer 2 · answered Nov 07 '17 at 11:37

if your component is child you could pass it using @Input() Just declare @Input variable in your child Component and pass it while you calling it.
else you can use service as middle ware and declare your service in the providers of the module, and it will be working as singleton object

score 0 · Accepted Answer · answered Nov 07 '17 at 13:05

0

To answer your question after the EDIT portion. get rid of the "this." in your html. You may need to make service public too in order to reference it from html (not sure though).

answered Nov 07 '17 at 13:05

Jason

1,316
13
25

Use boolean variable in another component

3 Answers3