Sharing data between two Angular components without using HTML

Question

Sharing data between two Angular components without using HTML

In my file structure, I have: 1. a topbar folder - with html(1) and ts(1) for the topbar 2. a page folder - containing html(2) and ts(2) for the page

But now, there's a BUTTON in html(1)

<button (click)="refresh()" class="navbar-btn btn btn-success btn-md refresh">
    <span class="glyphicon glyphicon-refresh"></span> Refresh
</button>

And there's a function in ts(1)

refresh()
{
console.log("this is topbar html and ts");
}

Next, there's a function in html(2)

I don't need to do anything here!

Also, there's a function in ts(2)

refreshEvent(){
console.log("i want use this function in html(1) BUT HOW??")
}

So, when I click the button, it should call refreshEvent()

angular typescript components

Answer 1

Answer №1

Utilizing the Subject feature from rxjs is a viable option,

import { Observable, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class MyService {
    private subject = new Subject<any>();
    refresh() {
        this.subject.next();
    }
    onRefresh(): Observable<any> {
        return this.subject.asObservable();
    }
}

In Component B:

  constractor(private myService: MyService){}
  this.$subscription = this.myService.onRefresh().subscribe(() => this.refreshEvent() );
  ngOnDestroy() {
        this.$subscription .unsubscribe();
    }

For Component A:

constractor(private myService: MyService){}

refresh()
{
  //console.log("this is topbar html and ts");
 this.myService.refresh();
}

If there exists a child-parent relationship, output events can be employed, refer to the documentation for further details: https://angular.io/guide/component-interaction

Answer 2

Utilizing the Subject feature from rxjs is a viable option,

import { Observable, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class MyService {
    private subject = new Subject<any>();
    refresh() {
        this.subject.next();
    }
    onRefresh(): Observable<any> {
        return this.subject.asObservable();
    }
}

In Component B:

  constractor(private myService: MyService){}
  this.$subscription = this.myService.onRefresh().subscribe(() => this.refreshEvent() );
  ngOnDestroy() {
        this.$subscription .unsubscribe();
    }

For Component A:

constractor(private myService: MyService){}

refresh()
{
  //console.log("this is topbar html and ts");
 this.myService.refresh();
}

If there exists a child-parent relationship, output events can be employed, refer to the documentation for further details: https://angular.io/guide/component-interaction

Sharing data between two Angular components without using HTML

Answer №1

Similar questions

In the function ngOnChange, the SimpleChange currentValue is supposed to be defined, but for some reason, the

Having trouble installing the generator-angular2

When the observable is subscribed to, the data is not immediately available

Error: Unable to access the 'invalid' property of a null object - Issue with Angular Reactive Forms

Exploring a specified set of numbers with PrimeNG's input number spinner for looping

Guide on expanding the capabilities of IterableIterator in TypeScript

Best practices for utilizing React.Provider in Typescript to manage and refresh user context

A deep dive into TypeScript: enhancing a type by adding mandatory and optional fields

The issue with collapsible elements not functioning properly in an Angular application involving CSS and JS

Angular2 CLI express server.ts encountered an unexpected import token

Tips for efficiently loading data in a sequence using rxjs: within each sequence, there could be multiple calls made

Obtaining the current date and time of the user's browser within a server-rendered file

Connect store variables to components using Angular's ngrx

Dynamically apply classes in Angular using ngClass

Tips for predefining an array of React Elements in TypeScript

The KeyValuePair<string, Date> type in Typescript cannot be assigned to the KeyValuePair<number, string> type

What is the process for converting BitmapData from Flash into HTML canvas?

String Compression - Number of Elements

Using ReactJS to activate child components from a parent component

How about: "Are you utilizing the recoil selector for sorting through component