CODEWITHSUNDEEP
angular
miss_narjes
miss_narjes

Reputation: 3

Interaction between component by service

I have three components: the paginator component - the component of the app - and the table component. I used the material inside the table component and used it in the ts. Table for sorting and searching. In the app there is a table data component. In the paginator component. I used the material for layout. But there's a problem with the relationship between the components. So I can communicate with these components that contain every part of the code.

app.componenet.ts

 import { Component, OnInit, ViewChild, Output, Input } from '@angular/core'; 
 import { MatTableDataSource, PageEvent } from
     '@angular/material'; 
 import { MatTableModule } from
     '@angular/material/table'; 

 @Component({   selector: 'app-root',  
                templateUrl: './app.component.html',
                styleUrls:['./app.component.css'] 
 })
 export class AppComponent {   
    student:Stu[] = [{ name: 'ali', family: 'qolami', score: 16 }, ]; 
 } 
 export class Stu {   
    name: string;   
    family: string;   
    score: number; 
 }

app.component.html

   <app-table [student]="student"></app-table>

paginator.component.html

    <mat-paginator #paginator [length]="length" [pageSize]="pageSize"
     [pageSizeOptions]="pageSizeOptions"></mat-paginator>

paginator.component.ts

  import { Component, OnInit, Input, ViewChild, Output, EventEmitter } from '@angular/core'; 
  import { MatPaginator, PageEvent } from '@angular/material/paginator'; 
  import { MatTableDataSource } from '@angular/material';

  @Component({   
    selector: 'app-paginator',  
    templateUrl:'./paginator.component.html',   
    styleUrls: ['./paginator.component.css'] 
  }) 
  export class PaginatorComponent implements OnInit {   
     @Input() student;   
     length = 5;   
     pageSize = 10;
     pageSizeOptions: number[] = [5, 10, 15, 20];  
     @ViewChild(MatPaginator) paginator: MatPaginator;   
     dataSource;  
     @Output() pageChange = new EventEmitter<number>();   

     constructor() { }

     ngOnInit() {
         this.dataSource = new MatTableDataSource(this.student);
         this.dataSource.paginator = this.paginator;  
     } 
  }

table.component.ts

  export class TableComponent implements OnInit { 
      @Input() student;  
      @Input() length;  
      @Input() PageEvent;  
      @Input() pageSize;
      @Input() pageSizeOptions;   
      @ViewChild(MatSort) sort: MatSort;  
      dataSource;   
      p;  
      displayedColumns: string[] = ['name', 'family',
     'score'];   
      constructor() { }   
      ngOnInit() {
         this.dataSource = new MatTableDataSource(this.student);
         this.dataSource.sort = this.sort;   
      }  

      applyFilter(filterValue: string) {
         this.dataSource.filter = filterValue.trim().toLowerCase();   
      }
      Page($event) {
         this.PageEvent.emit(this.p);  
      } 
  }

Upvotes: 0

Views: 72

Answers (1)

Sebastian
Sebastian

Reputation: 470

If i understood you right, what you are looking for can be found at the official documentation LINK

A small summary here for convenience:

Service communication with subjects can be achieved the following way:

in your service class (MyService) you need to create a new Subject (can be Behaviour- or replay-Subject as well). 

private mySubject = new Subject<string>();

getMySubject() { return this.mySubject; }

updateMySubject(nextString: string) { this.mySubject.next(nextString) }

This Subject can be accessed in every component you import it (through constructor).

constructor(private myService: MyService) {}

ngOnInit() { 
   myService.getMySubject.subscribe(
      // do something with the value here
   });
}

So this will be called everytime you update the value of your service.

myService.updateMySubject("this is the new string");

Hope this is what you expected. For more information please refer to the official documentation i referenced above.

Upvotes: 1

Related Questions