videoTitle$ Angular 2 – communication between two sibling components

ByAnurag batra September 19, 2022September 6, 2022

Because you are working with Observers and Observables in your service, 
you don't need to communicate both components because you can directly
 connect the service with the component template. This should be the code:

Service:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Subject }    from 'rxjs/Subject';
import 'rxjs/add/operator/map';

@Injectable()
export class AppService {
  private apiURL = "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet,contentDetails,status&maxResults=10&playlistId=PLSi28iDfECJPJYFA4wjlF5KUucFvc0qbQ&key=AIzaSyCuv_16onZRx3qHDStC-FUp__A6si-fStw&pretty=true";

  //Observable string sources
  private thisVideoTitle = new Subject();
  //Observable string streams
  videoTitle$ = this.thisVideoTitle.asObservable();
  constructor(private http:Http) { }

  getData() {
    return this.http.get(this.apiURL)
      .map((res:Response)=> res.json())
      .subscribe(nameTitle => this.thisVideoTitle.next(nameTitle))
  }
}

part ii
Then if you want to use this into your component template it should be something like:

Here is what the above code is Doing:
1. The service is getting the data from the API and then it is using the Subject to emit the data.
2. The component is subscribing to the Subject and then it is using the async pipe to display the data.

make a component update every second react

Javascript Examples

make a component update every second react

ByAnurag batra September 27, 2022September 6, 2022

import React, { Component } from ‘react’; class TimeComponent extends Component { constructor(props){ super(props); this.state = { time: Date.now() }; } render(){ return( { this.state.time } ); } componentDidMount() { console.log(“TimeComponent Mounted…”) } } export default TimeComponent; Here is what the above code is Doing: 1. We create a class called TimeComponent that extends the…

Javascript Examples

js random string from array

ByAnurag batra July 23, 2022June 30, 2022

var textArray = [ ‘song1.ogg’, ‘song2.ogg’ ]; var randomNumber = Math.floor(Math.random()*textArray.length); Here is what the above code is Doing: 1. We create an array called textArray. 2. We create a variable called randomNumber and set it equal to the result of a random number between 0 and the length of the textArray. 3. We create…

flutter json serialization command with conflict resolve

Javascript Examples

flutter json serialization command with conflict resolve

ByAnurag batra September 26, 2022September 6, 2022

flutter packages pub run build_runner build –delete-conflicting-outputs Here is what the above code is Doing: 1. We’re importing the json_annotation package. 2. We’re creating a part file that will hold all the generated code for this tutorial. 3. We’re creating a User class with three properties: id, name, and email. 4. We’re using the @JsonSerializable()…

Javascript Examples

javascript prevent space from scrolling

ByAnurag batra October 6, 2022September 6, 2022

window.addEventListener(‘keydown’, function(e) { if(e.keyCode == 32 && e.target == document.body) { e.preventDefault(); } }); Here is what the above code is Doing: 1. It’s adding an event listener to the window object. 2. It’s listening for the keydown event. 3. It’s checking if the key that was pressed was the spacebar (keyCode 32) and if…

Javascript Examples

clear element children js

ByAnurag batra August 2, 2022June 30, 2022

const myNode = document.getElementById(“foo”); myNode.textContent = ”; Here is what the above code is Doing: 1. We’re creating a variable called myNode and assigning it to the result of document.getElementById(“foo”). 2. We’re using the textContent property to set the text of the element to an empty string.

javascript open new window and pass data

Javascript Examples

javascript open new window and pass data

ByAnurag batra July 31, 2022June 30, 2022

// Store the return of the `open` command in a variable var newWindow = window.open(‘http://www.mydomain.com’); // Access it using its variable newWindow.my_childs_special_setting = “Hello World”; //In the child (popup) window, you could access a parent variable like this: window.opener.my_parents_special_setting Here is what the above code is Doing: 1. The parent window opens a new window…

Similar Posts