Skip to main content

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;step0: boolean = true;

//SERVICE
import { 
 Injectable   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   OnInit
} from '@angular/core';

import { 
 StepsService   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>

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>

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>
Fonte Link

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>