Ways to invoke a function in an angular component from a separate component located in a different .ts file

File3.ts

export class3(){
      method1(x,y){
        ....
}
}

File4.ts

export class4(){ 
     a: string = "abc"
     b: string ="xyz"
     //How can I call method1 and pass parameters from file 3?   
     method1(x,y); 
}

I attempted the following in File4.ts, but it did not work as expected.

@ViewChild(class3, { static: false }) ClassVar: class3; this.ClassVar.method1(x,y)

Answer №1

To achieve inheritance, you can easily extend another class.

Check out this Stackblitz example: Demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Gatsby website failing to create slugs as anticipated

While trying to follow the Gatsby tutorial, I ran into an issue with generating slugs for MDX files in a subdirectory of src/pages. For instance, if I have a file like src/pages/projects/devmarks/index.md, the expected slug according to the tutorial should ...

The error message "Value property is not found on the FilterMetadata type in the PrimeNG table" indicates that there is an issue with accessing the 'value'

While transitioning a module from Primeng 7 to Primeng 11 in conjunction with Angular 11, everything seems to be running smoothly on ng serve with all functionalities working as expected. However, upon building the project, I encounter an unexpected error. ...

The Angular application has been successfully deployed on a Tomcat server as a war

I am planning to deploy a single page application (SPA) developed in Angular, along with various static files like *.css, .js, /assets/, all packed inside a war file on Tomcat. The issue I am facing is that whenever a user enters a path that does not corr ...

Tips for navigating back to the previous component in React:

Greetings! I'm currently working on a simple CRUD example using React.Js and TypeScript. In my project, I have set up the following component hierarchy: -FetchNaselje --Modal ---AddNaselje It's structured such that AddNaselje is a child of Moda ...

Ensuring that all observables within a for loop have completed before moving on to the next block of code

Here is a scenario where the following code snippet is used: getPersons().subscribe( persons => { for (const person of persons) { getAddress(person.id).subscribe( address => { person.addres ...

SVG is not incorporated in the Typescript build

I'm facing an issue where my build using tsc --project tsconfig.dist.json (refer to the file below) does not include the assets (.svg files) that are imported and used in the code. How can I make TypeScript include these assets in the build? Some con ...

How can you make sure that VS Code always utilizes relative paths for auto imports in TypeScript?

VS Code has been automatically importing everything using Node-like non-relative paths relative to baseUrl, which is not the desired behavior. Is there a way to instruct VS Code to import everything with relative paths, excluding Node modules? Removing t ...

What are some ways to enhance Rxjs syntax?

save(): void { combineLatest(this.selectedSorting$, this.selectedFilters$) .pipe( map((data) => { let obj = {}; if (data[0]) { obj['fil ...

Trouble encountered with uploading files using Multer

I am facing an issue with uploading images on a website that is built using React. The problem seems to be related to the backend Node.js code. Code: const multer = require("multer"); // Check if the directory exists, if not, create it const di ...

Discrepancy between code, output from ng build, and how the browser is

I am in the process of developing an Angular 13 library that includes two services and a group of models. These services consist of an authentication service and a client service. However, after building the library, I noticed some global variables missing ...

Looking for the location of the traceResolution output?

When I enable traceResolution in my tsconfig.json file, where can I expect to see the resulting output? { "compilerOptions": { "traceResolution": true, ... The --traceResolution flag enables reporting of module resolution log messages. You ...

Instructions for adding a method to a prototype of a generic class in TypeScript

My current challenge involves adding a method to a prototype of PromiseLike<T>. Adding a method to the prototype of String was straightforward: declare global { interface String { handle(): void; } } String.prototype.handle = functi ...

Deactivate the chosen tab by clicking the Mat-Tab button

I was trying to implement a way to disable the selected mat-tab and its elements when a button is clicked, //HTML <mat-tab-group #tabGroup> <mat-tab *ngFor="let subject of subjects" [label]="subject.name"> {{ subject.name }} ...

What are the steps to ensure a successful deeplink integration on iOS with Ionic?

Recently, I was working on a hybrid mobile app for Android/iOS using Nuxt 3, TypeScript, and Ionic. The main purpose of the app is to serve as an online store. One important feature involves redirecting users to the epay Halyk website during the payment pr ...

Utilizing Angular 2 for transforming JSON data into Angular classes

I have been working through the Angular2 getting started guide to kickstart my own application development. So far, I have managed to retrieve JSON objects from a local file and display them in angular2 templates. However, the challenge arises when the str ...

Using *ngFor alters the positioning of components

After implementing a flexbox container class to align my components horizontally, I noticed that when using input properties and a loop, they are displayed stacked vertically instead. <div class="flexbox-container" > <app-card></ ...

The Console.log function first displays an Object, and then changes to display an Array containing a single object when clicked

When I utilize MobX to call an observable within my React component, something peculiar happens. Upon console logging the observable, initially it appears as an Object. However, upon clicking on it, the object transforms into an Array for that one particul ...

Angular services do not hold onto data in memory

Working on an app with a date filter and encountering an issue: I am trying to store data in my service, but when I route, the array in the service keeps resetting itself. How can I maintain the data permanently in my service? Below is the code snippet: ...

Add information dynamically within an HTML <div> element in Angular version 6

I have a particular template structure: <div class='somedata'></div> My objective is to dynamically append a series of <div> elements one by one. The data is retrieved using a shared service through a Subject. For instance: ...

How can I update the image source using Angular?

<div class="float-right"> <span class="language dashboard" data-toggle="dropdown"> <img class="current" src="us-flag.png" /> </span> <div class="dropdown dashboar ...