Observable value is not updating

I am trying to use a service in Angular that holds the state of the application in a string variable. I am using RxJS to use BehaviorSubject, and then my components subscribe to an observable of the BehaviorSubject.

State.Service.ts

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


@Injectable()
export class StateService {

  private sourceState = new BehaviorSubject<string>('Default State');
  currentState = this.sourceState.asObservable();

  constructor() { }

  setState(state: string) {
    this.sourceState.next(state);
    console.log(this.currentState);
    }
}

My components all subscribe to this observable during the NgOnInit lifecycle.

Nav.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { StateService } from '../../services/state.service';
import { Router } from '@angular/router';
import 'rxjs/add/operator/filter';
import { Location } from '@angular/common';

@Component ({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss'],
  providers: [StateService]
})
export class NavComponent implements OnInit {
  currentState: string;

  constructor(
    private authService: AuthService,
    private router: Router,
    private stateService: StateService
  ) {}

  ngOnInit() {
    this.stateService.currentState.subscribe(
      state => (this.currentState = state)
    );
  }

  logout() {
    this.authService.logout();
  }

  changeState(state: string) {
    this.stateService.setState(state);
  }
}

Other components in my application will call the setState function in the state.service.ts file. I am binding the state value in my template just to watch the value so I can then use directives to change the experience based on application state.

The Problem

Values in the components are not changing even though when I console.log the observable I can see it is being set correctly.

Note

When I call the setState function within the nav component I do see the value of the string interpolation change but only in the nav.component.ts, other components will not change. It is almost like they are using clones of the observable.

nav.component.html

<nav class="navbar" [ngClass]="{red: currentState==='stove'}">
  <a  class="navbar-brand" routerLink="/app">
    <img src="../assets/img/app/back.svg" alt="">
  </a>
  <ul class="nav justify-content-end">
    <li class="nav-item">
      <a class="nav-link active" routerLink="/login" (click)="logout()">Logout
        <i class="fa fa-sign-out" aria-hidden="true"></i>
      </a>
    </li>
  </ul>
</nav>
{{ currentState }}

Display component by it’s selector or refference

container-component.ts

export class ContainerComponent{
    innerComponentRef; //We have this
    innerComponentSelector;//We have this
    }

However in container-component.html I don’t know how to append html with innerComponent tag. String interpolation – doesn’t work for sure. I also wonder if it’s not a kinda bad practice what I want to make.

angular material tab content c3js chart not showing

I want to show charts in an angular material tab. But the tab initialization seems to be asynchronous and so c3js can’t find the div #detailed-chart and my tab remains empty.

Template

<mat-card class="col-xs-12">
  <mat-card-title>
    Detailed Utilization
  </mat-card-title>

  <mat-tab-group>
    <mat-tab label="Chart">
      <div id="detailed-chart" style="height: 200px"></div>
    </mat-tab>
    <mat-tab label="Table">
    </mat-tab>
  </mat-tab-group>
</mat-card>

Component

export class UtilizationComponent implements OnInit {
  ngOnInit() {       
    this.detailedChart = c3.generate({
      bindto: '#detailed-chart',
      data: {
        x: 'date',
        columns: [
          ['date'],
          ['room'],
          ['desk'],
          ['office']
        ]
      },
      axis: {
        x: {
          type: 'timeseries',
          tick: {
            format: '%m.%Y'
          }
        },
        y: {
          tick: {
            format: d3.format('.1%')
          }
        }
      }
    });   
  }

}

I also tried to find the div manually and it seems not to exist.

const x = window.document.getElementById('detailed-chart');
console.log('foo', x);

Output

foo null

Question

What is the angluarish way to load dynamic elements here? Do I neet to create a separate componant for this tab?

Prevent multiple click event when clicking child element [duplicate]

This question already has an answer here:

I have a list of elements.

Each element have a global click event and a child icon which should also be clickable.

Example :

<div class="parent-element" (click)="clickParent()">
   <span class="button" (click)="childClick()">
   </span>
</div>

For now when I click on the span, both click are fired. How can I separate it from the parent click event ?

Trigger ngSubmit from (blur)

I have a form in Angular 2, where I’m trying to trigger the form’s (ngSubmit) event when one of the fields is blurred, but using the (blur) event to call the function doesn’t pass the model elements.

Here is the code:

  <form 
    #phoneForm="ngForm"
    (ngSubmit)="addPhone(phoneForm)"
    style="width:100%;">
      <ion-grid>
          <ion-row class="edit-field">
            <ion-col col-auto class="field-icon">
                <ion-icon name="md-remove-circle"></ion-icon>
            </ion-col>
            <ion-col col-auto class="field-type">
                <select
                  ngModel 
                  id="phoneType"
                  name="phoneType"
                  #phoneType="ngModel">
                    <option 
                    value="select"
                    ng-selected="true"
                    ng-disabled="true" > -- Select -- </option>
                    <option value="home" >home</option>
                    <option value="mobile" >mobile</option>
                    <option value="business" >business</option>
                    <option value="home fax" >home fax</option>
                    <option value="work fax" >work fax</option>
                    <option value="fax">fax</option>
                  </select>
            </ion-col>
            <ion-col class="field-input">
                <input 
                  type="text"
                  name="phoneNumber"
                  name="phoneNumber"
                  id="phoneNumber"
                  ngModel 
                  #phoneNumber="ngModel"
                  placeholder="Phone" 
                  ng-blur="addPhone()">
            </ion-col>
          </ion-row>
        </ion-grid>
  </form>

As a simple test, I have this function in the component:

  addPhone(data){
    console.log('Hit add phone', data.value);
  }

How do you submit a form on blur?

How to Add ElementRef into local dom?

I want to crate a layout component to arrange groups of items, like:

<garden-bed>
  <div #veg (click)="pluck()">carrot</div>
  <div #veg (click)="pluck()">cabbage</div>
  <div #veg (click)="pluck()">turnip</div>
</garden-bed>

The component so far looks like

@Component({
  selector: 'app-garden-bed',
  templateUrl: './garden-bed.component.html',
})
export class GardenBed  {

  @ContentChildren('veg') vegs: QueryList<ElementRef>;

  constructor() { }


  ngAfterViewInit() {
    console.log('this.vegs=' + JSON.stringify(this.vegs));
  }

}

but I can’t figure out how to plant them in the tamplate (garden-bed.component.html):

  <div *ngFor="let veg of vegs">
     <ng-content/ng-template  *something="veg"></ng-template>
     but this doesn't work.
     veg should appear here and all its binding should work!

  </div>

any help is highly appreciated!

How to align ion-inputs one by one in ion-list

I am new to Ionic framework – (Using Ionic framework 3)

<ion-row>
      <ion-col>
        <ion-list inset>
            <ion-item>
                <ion-input name="products" id="" type="text" required></ion-input><br>
                <ion-input name="products" id="" type="text" required></ion-input><br>
            </ion-item>
        </ion-list>
      </ion-col>
</ion-row>

Above ionic html code generating input fields side by side. But I want input fields one after the other

Please refer attachment that tells about my issue.

Please guide me through the correct way. Thank you. Issue image

How do I set a longer timeout for post request before retrying the request Angular 4

I am sending a post request to my server which in-turn sends a request to another 3rd party API .. and this API takes a hell lot of time to send a response….
the 3rd Party API sends an error if duplicate request is made.
Meanwhile.. after waiting for a while, angular retries the request and the duplicate error message pops up even when the first request I made is successful after some time.

I want to wait long enough before retrying the request and only retry when there is an error from the very first request.

I tried setting timeout to 1 hour and setting retry to 0, but none work.

Here is my code:

this.http.post(url,data)
    .timeout(3600000)
    .map(this.extractData)
    .retry(0)
    .catch(this.handleError);`enter code here`