Is there a way to trigger a method in one component that will in turn activate a method in a separate component?

Question

Is there a way to trigger a method in one component that will in turn activate a method in a separate component?

I am a beginner in the world of Angular, and I find the concept of component extension to be quite perplexing. Currently, I have two components - a header and a content component. In my header component, I have a method called filterChange() that needs to call another method in the content component. I have attempted using @Input and @Output, but unfortunately, I am unable to successfully call the methods using these decorators.

Below is an excerpt from my header component's HTML:

<mat-radio-group[(ngModel)]="visibility" (ngModelChange)="filterChange()">
  <mat-radio-button [value]=null>true</mat-radio-button>
  <mat-radio-button *ngFor="let visibility of jobVisibilities"
                        [value]="visibility">false</mat-radio-button>
</mat-radio-group>

Here is the implementation of the filterChange() method in the header component TypeScript file:

filterChange(){
 }

This is where I currently stand with my code. I have also explored using services, but I am unsure of how to proceed with them in order to achieve the desired functionality. Could someone please provide guidance on how to solve this issue?

typescript angular8

Answer 1

Answer №1

    Imagine you have two components called HeaderComponent.ts and ContentComponent.ts.
    You need to execute the test() function from the Header component, which is located in the Content component.
    
    * Begin by importing the Content component
    
    import {ContentClass} from ./../content.component.ts;
    
    * Set up dependency injection
    
    constructor(){ public content : ContentClass }
    
    filterChange(){
    
    /*You can now invoke any function from the Content component here*/
    
    let result = this.content.test()
    console.log(result)
    }

Answer 2

    Imagine you have two components called HeaderComponent.ts and ContentComponent.ts.
    You need to execute the test() function from the Header component, which is located in the Content component.
    
    * Begin by importing the Content component
    
    import {ContentClass} from ./../content.component.ts;
    
    * Set up dependency injection
    
    constructor(){ public content : ContentClass }
    
    filterChange(){
    
    /*You can now invoke any function from the Content component here*/
    
    let result = this.content.test()
    console.log(result)
    }

Is there a way to trigger a method in one component that will in turn activate a method in a separate component?

Answer №1

Similar questions

Can we specify a more specific type for an argument in Typescript based on another argument in a function?

Dynamic row generation with dropdown menu and data binding

Tips for narrowing down the type of SVG elements in a union

When all observables have finished, CombineLatest will only execute one time

Is there a way to defer a for loop in Angular?

Tips for creating a dynamic interface in TypeScript to eliminate repetitive code

When implementing Angular 6, using a shared module within individual lazy-loaded modules can lead to a malfunctioning app when changes are

Enhancing Angular2 authentication with Auth0 for enabling Cross-Origin Resource Sharing

The state array is rejecting the value from the other array, resulting in null data being returned

Loading an HTML file conditionally in an Angular 5 component

Updating a Parent entity in Prisma with the option to also update its associated Child entity in a

Angular 2's Dependency Injection injects functions instead of objects

I am trying to figure out how to send a One Signal notification from my Ionic app using the One Signal REST API. I have reviewed the documentation, but I am still unable to understand it

React TypeScript Context - problem with iterating through object

Convert JavaScript to TypeScript by combining prototype-based objects with class-based objects

Detecting changes in Excel columns or rows using Office.js

Calculating the sum of values in a JSON array using a specific parameter in Typescript

How to install a library from a Github repository in Angular 2

What is the best way to transfer a property-handling function to a container?

What is the method for storing a JSON object path in a variable for use in a template?