CODEWITHSUNDEEP
javascriptangulartypescript
LadyT
LadyT

Reputation: 659

Angular 2: Update service variables and the view

I have a service called ValueService that holds a value of 0. Then I have a nav component and a heading component. The value in valueService, doesn't update the heading view on click. I am new to angular 2 stuff, so I am not sure how to get this working. Here is what I have so far. Thanks for your help.

Value Service

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class ValueService {
value:number;

 constructor() {
   this.value = 0;
 }

  goTo(value){
   this.value = value;
   console.log('value in service', this.value);
  }

Nav Component Template

<button *ngFor="let d of array | keys; let i = index" (click)="valueService.goTo(i)"> {{ i }} </button>

Heading Component Template

The issue is here. I only want to show the h3 that is selected by the button's index from nav component, but for whatever reason, it stays set to the default value of 0 and doesn't update the value.

<h3 *ngIf="i==valueService.value" *ngFor="let d of array | keys; let i = index"> {{ text here }} </h1>

Upvotes: 0

Views: 704

Answers (2)

LadyT
LadyT

Reputation: 659

I ended up setting a global variable in my json file, and I updated that value. It also updated the value inside my sibling components too.

Upvotes: 0

Matthias247
Matthias247

Reputation: 10396

Your service and nav component look fine.

You might have the problem that in your heading component you have 2 bindings, and the i in the ngIf is not defined or not bound to the for loop. I would make the order explicit and see if this helps.

<template ngFor let-d [ngForOf]="array" let-i="index">
    <h3 *ngIf="i==valueService.value">
        {{ text here }}
    </h3>
</template>

You also have an error that your h3 tag is closed with an h1, so actually angular shouldn't even compile this and complain about it in the console.

Upvotes: 2

Related Questions