Skip to main content

Angular 2 - Alterar variável do Component pela variável do Service

Gostaria de alterar a minha variável do component através de um método realizado no service. A variável aparece de true para false como desejado no console.log, mais não é alterada na variável fixada no component. Variável a ser alterada: step0: boolean = true;

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

@Injectable()
export class StepsService {

    teste: string = 'texto de exemplo';
    step0: boolean;
    step1: boolean = true;

    constructor() {}

    proxStep1(): any {
        this.step0 = false;
        console.log(this.step0);
        return this.step0;
    }

    msgAlerta(): void {
        alert('Livro Angular 2 - Google - ' + this.teste);
    }
}    

//COMPONENT
import {
    Component,
    OnInit
} from '@angular/core';

import {
    StepsService
} from '../steps.service';

@Component({
    selector: 'app-step-0',
    templateUrl: './step-0.component.html',
    styleUrls: ['./step-0.component.css']
})
export class Step0Component implements OnInit {

    step0: boolean = true;

    constructor(public service: StepsService) {}

    ngOnInit() {}

    avancarStep1(): void {
        this.service.proxStep1();
    }

    enviarMsg(): void {
        this.service.msgAlerta();
    }
}

//TEMPLATE
<section class="step step0" *ngIf="step0 == true">
   <h2>Step-0 {{step0}}</h2>

   <button (click)="avancarStep1()">Avançar</button>
   <button (click)="enviarMsg()">Enviar Alerta</button>
</section>