Is there a way to transfer the value of a variable from Component1 to a variable in Component2 without using any template binding?
I have two components, Header and Footer. In the Header component, there is a boolean variable called test that I need to pass the value from test to TEST2 in the Footer component.
I tried using @Input but couldn't find a solution without using template bindings like [test]="test"
In simple terms, I just want to pass a value from one .ts file to another .ts file.
I referred to this example: Pass data to nth level child component in Angular 4
However, the variable is still not being passed to the component.
HeaderService.ts
import { Injectable } from '@angular/core';
@Injectable()
export class HeaderService {
getTheme: boolean;
}HeaderComponent.ts
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { SideBarService } from '../sidebar/sidebar.service';
import { googleMapConfig } from '../content/google-map/config.service';
import { HeaderService } from './header.service';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
encapsulation: ViewEncapsulation.None,
})
export class HeaderComponent implements OnInit {
Name = 'Menučkáreň';
Navigation = 'Navigácia';
nightTheme;
icons = ['favorites','notification_important'];
tooltip = ['Obľúbené položky','Zoznam zmien'];
constructor(
public sideBarService: SideBarService,
public mapService: googleMapConfig,
private headerService: HeaderService
) { }
public toggle() {
this.sideBarService.toggle.emit();
}
public changeDark() {
this.nightTheme = true;
this.headerService.getTheme = true;
this.mapService.changeDark.emit();
}
public changeLight() {
this.nightTheme = false;
this.headerService.getTheme = false;
this.mapService.changeLight.emit();
}
ngOnInit() { }
}FooterComponent
import { Component } from '@angular/core';
import { HeaderService } from '../header/header.service';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss'],
providers: [HeaderService]
})
export class FooterComponent {
Copyright = 'Copyright 2018 | Vytvoril Patrik Spišák';
Version = '0.0.1';
nightTheme: boolean;
constructor(private headerService: HeaderService) {
this.nightTheme = this.headerService.getTheme;
}
}When I call my function changeDark() from HeaderComponent.html, it doesn't set this.headerService.getTheme = true;
<mat-grid-tile>
<button (click)="this.changeDark($event)" mat-icon-button>
<mat-icon aria-label="Nočný režim">brightness_3</mat-icon>
</button>
</mat-grid-tile>UPDATE
Finally, I was able to achieve the desired outcome with this code: The issue was with the providers declared in FooterComponent. When the providers were declared in FooterComponent, I was getting undefined. Once I removed them and kept the providers only in app.modules.ts, the variable was set and read correctly.
HeaderService.ts
import { Injectable } from '@angular/core';
@Injectable()
export class HeaderService {
nightTheme:boolean;
get data():boolean{
return this.nightTheme;
}
set data(value:boolean){
this.nightTheme = value;
}
constructor(){}
}Header Component
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { SideBarService } from '../sidebar/sidebar.service';
import { googleMapConfig } from '../content/google-map/config.service';
import { HeaderService } from './header.service';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
encapsulation: ViewEncapsulation.None,
})
export class HeaderComponent implements OnInit {
Name = 'Menučkáreň';
Navigation = 'Navigácia';
icons = ['favorites','notification_important'];
tooltip = ['Obľúbené položky','Zoznam zmien'];
constructor(
public sideBarService: SideBarService,
public mapService: googleMapConfig,
private headerService: HeaderService
) {}
public toggle() {
this.sideBarService.toggle.emit();
}
public changeDark() {
this.headerService.nightTheme = true;
console.log(this.headerService.nightTheme);
this.mapService.changeDark.emit();
}
public changeLight() {
this.headerService.nightTheme = false;
console.log(this.headerService.nightTheme);
this.mapService.changeLight.emit();
}
ngOnInit() { }
}Footer Component
import { Component, OnInit } from '@angular/core';
import { HeaderService } from '../header/header.service';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss'],
})
export class FooterComponent {
Copyright = 'Copyright 2018 | Vytvoril Patrik Spišák';
Version = '0.0.1';
constructor(private headerService: HeaderService) { }
ngOnInit() {
console.log('FOOTER:'+this.headerService.nightTheme);
}
}