CODEWITHSUNDEEP
angulartypescriptrxjsobservableangular7
Henry
Henry

Reputation: 145

Interaction between 2 components angular 6/7 using service not working

HI I am new to angular and started learning. Q: I have 2 components and one is having select dropdown from angular material and another component which is having table from angular material.so when I do the selection from dropdown I want to see that selected value in the table component. here is my code. Somehow when I do the selection at that time service is invoking the method and listening but after that I am expecting another method to execute that subscribes to listen to the change. (Apology if I have not use the correct terminology)

Following is the structure of the components.

navbarparent.component.html (These are 2 main components)
<div>
   <app-mr-navbar> <!-- navbar.component.html --> </app-mr-navbar>
   <app-player-overview> <!-- Tablecomponent.html --> </app-player-overview>
</div>

Selection componenet is a child component of component. is having dropdown.

navbar.component.html

<div class="nav-header ">
<mat-grid-list cols="7">
<div>
  <mat-grid-tile>
    <app-eyefilter-navbar> <!--  selectbox.component.html --> </app-eyefilter-navbar>
  </mat-grid-tile>
</div>
</mat-grid-list>
</div>

This is selectbox.component.html

<div class="eyefilter-dd inline-style eachSelect">
<mat-form-field>
<mat-select (selectionChange)="selectionChange($event.value)" placeholder="EyeFilter" [formControl]="eyefilters" multiple id="eyeFilter">
  <mat-option  *ngFor="let filter of filterList" [value]="filter" class="custom-font-size">{{filter}}</mat-option>
</mat-select>
</mat-form-field>
</div>

This is my common service file.

commonservice.ts

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Observable} from 'rxjs/index';
import { BehaviorSubject, Subject} from 'rxjs/index';


@Injectable()
export class PlayerSkillsService {
 private subject = new Subject<any>();
 onChangeSelect(val: string) {
 this.subject.next(val);
 }

 getSelectedDropdown(): Observable<any> {
  return this.subject.asObservable();
 }
}

This is selectbox component ts file.

selectbox.component.ts

import {PlayersService} from '../../services/playerskills.service';
@Component({
 selector: 'app-eyefilter-navbar',
 templateUrl: './eyefilter.component.html',
 styleUrls: ['eyefilter.component.scss'],
 encapsulation: ViewEncapsulation.None
})


export class EyefilterComponent {
eyefilters = new FormControl();
filterList: string[] = ['Height', 'age', 'Show Power' , 'Finishing', 'Agility'];

constructor(private playerservice: PlayerSkillsService) {}
selectionChange(selectedVal): void { // This is executing
this.playerservice.onChangeSelect(selectedVal[0]);
}
}

This is table component ts file.

import {Component, OnInit, ViewChild, ViewEncapsulation, Input, OnChanges, SimpleChanges} from '@angular/core';
import {Subscription} from 'rxjs/index';
import {PlayerSkillsService} from '../../services/playerskills.service';

export class PlayersDataComponent implements OnInit {
  selectedDropdownVal: any;
  subcription: Subscription;
  constructor(private playerservice: PlayerSkillsService) {
   this.subcription = this.playerservice.getSelectedDropdown().subscribe(selectedDropdownVal => this.selectedDropdownVal = selectedDropdownVal);
   // expecting selectedDropdownVal value to be set when you change the selection from selectbox. 
   // THIS IS NOT WORKING.
  }
  ngOnInit() {
    this.subcription = this.playerservice.getSelectedDropdown().subscribe(selectedDropdownVal => this.selectedDropdownVal = selectedDropdownVal);
  }
}

I am not sure what I am missing here. Can anybody help? Let me know if more information needed. Thanks

Upvotes: 3

Views: 180

Answers (2)

Henry
Henry

Reputation: 145

Thank @Ionut Tepus. It helps. I was missing this single line function to catch the selected dropdown value in playertable component.

this.data.currentMessage.subscribe(message => {
  this.message = message;
  this.filterBasedonSelection();
  console.log('message', message);
});

Upvotes: 0

Ionut Tepus
Ionut Tepus

Reputation: 71

You have to use EventEmitter in the component where you have the dropdown: https://angular.io/api/core/EventEmitter

Then on the other component you have to catch the $event. Here's a full example: https://www.infragistics.com/community/blogs/b/infragistics/posts/understanding-output-and-eventemitter-in-angular

Upvotes: 1

Related Questions