Tips on joining property name in typescript

Attempting to pass values between components using inheritance but encountering difficulties. Is it possible to achieve this through a service? If so, how can I overcome this issue? Any assistance in finding the solution would be greatly appreciated.

bus.component.ts:

export class BusComponent extends CarComponent implements OnInit {
  constructor() {
    super();
    this.getValues('2', '5');
  }
  ngOnInit() {}
}

car.component.ts:

export class CarComponent implements OnInit {
  constructor() {}
  ngOnInit() {}
  getValues(a: any, b: any) {
    console.log(a + '===' + b);
  }
}

Demo : https://stackblitz.com/edit/angular-ivy-mb9wjg?file=src%2Fapp%2Fcar%2Fcar.component.ts

Answer №1

To ensure proper execution of your code, incorporating the BusComponent is essential. Failure to include this component will result in the constructor not being triggered. For example, you could insert <app-bus></app-bus> in app.component.html and observe the corresponding output in the console.

Click here for a live demonstration

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

Oops! The Element Type provided is not valid - it should be a string

I have a desire to transition from using Victory Native to Victory Native XL. However, I am encountering an error message saying Render Error Element type is invalid. import * as React from "react"; import { View } from "react-native"; ...

"I am having trouble calling the useStyles function in React with Typescript and Material-

There seems to be a problem with calling the useStyles function as it is throwing the following error message: This expression is not callable. Type 'never' has no call signatures.ts(2349) const useStyles: never Below is the complete code snip ...

Is it possible for Typescript to resolve a json file?

Is it possible to import a JSON file without specifying the extension in typescript? For instance, if I have a file named file.json, and this is my TypeScript code: import jsonData from './file'. However, I am encountering an error: [ts] Cannot ...

NextJS Typescript Player

Encountering an issue during the build process, specifically with the error in audioRef.current.play(). The error message indicates that there is no play function available. I attempted to use an interface but it seems to not accept boolean values. Could ...

Discover the process of accessing and setting values in Angular 8 to easily retrieve and manipulate data from any page!

Greetings! I am currently utilizing Angular 8 and I have a query regarding how to access the set value in any given page. Here is a snippet of my code: class.ts export class testClass { get test():string{ return this.sexe; } ...

Retrieve: Type 'string | undefined' does not match the parameter type 'RequestInfo'

When using the fetch function, I encountered an error with the "fetchUrl" argument: Error: Argument of type 'string | undefined' is not assignable to parameter of type 'RequestInfo'. This is the code snippet where the error occurred: ...

useEffect does not trigger a rerender on the primary parent component

I am facing an issue where the main parent component does not re-render when I change the state 'click button' in another component while using useEffect. Oddly enough, the main <App /> component only re-renders properly when I reload the p ...

Yep, identifying InferType optional attributes

Here's an example of a Yup schema I created to fetch entities known as Parcels: export const FindParcelsParamsSchema = Yup.object({ cursor: Yup.number().optional(), pageSize: Yup.number().positive().integer().optional(), }); All fields are option ...

Creating custom Moment.js plugins within an Ionic 2/Cordova project using TypeScript

In my Typescript Ionic 2 project, I am utilizing the moment.js library. To include it in my project, I use the following code snippet: import * as moment from 'moment'; Once imported, I can use moment in my component like so: let endDate = mom ...

Managing the activation and deactivation of a form based on value modifications

I have a formgroup with interconnected formcontrols where each control is enabled only if the previous one is filled. Additionally, if a control is cleared, all subsequent controls should also be cleared and disabled. To illustrate this use case, I create ...

Tips for transferring data between two pop-up windows in Angular2

My Angular2 project has a specific requirement that involves opening a first popup for users to enter some values. Upon a user event, like clicking a button, the first popup should close and a second popup should open with the values pre-populated from the ...

Error display in Elastic Apm Rum Angular implementation

Having some issues with incorporating the @elastic/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5948598d8878098d8949b9280999487b5c7dbc4dbc4">[email protected]</a> package into my project. Angular is throwing console ...

The anticipated data type is derived from the attribute 'value' defined within the 'IntrinsicAttributes & ProviderProps<IProductContext>' type

During the creation of an e-commerce website, I decided to use React Typescript. However, I encountered an issue with Contexts while trying to export my state in the Provider value. Thank you for any assistance provided. ERROR Type '{ products: IP ...

Test indicator: Display outcomes solely for successful tests

I am currently utilizing Angular with the Karma test runner, however, I am finding that there are an excessive number of logs being generated. https://i.sstatic.net/ea5FB.png Is there a way for me to display only the test results without any additional l ...

Updating a string's value in Angular based on user input

I am currently developing a custom offer letter template that will dynamically update key data points such as Name, Address, Role, Salary, etc based on the selected candidate from a list. The dynamic data points will be enclosed within <<>> in ...

The navigator.geolocation.watchPosition call did not return any available position information

I offer a service that monitors the position of devices: getLocation(opts): Observable<any> { return Observable.create(observer => { if (window.navigator && window.navigator.geolocation) { window.navigator.geolocat ...

Updating Angular 2 components using BaobabWould you like to learn how to

Exploring Baobab as a potential solution for developing Flux applications with Angular 2 has piqued my interest, but I have yet to come across any examples. My primary query revolves around the process of 'subscribing' an Angular Component to Ba ...

Using angular in combination with razor for implementing cookie-based authentication

Embarking on a new project with Angular 7, Asp.net core 2, Asp.net Identity, and IdentityServer4. In summary, the architecture of my project is structured as follows: A web API project (resource server) Data access layer project (C# project library) Ide ...

Organizing objects into arrays in Node.js

I have an array and I need to concatenate an object after the array. Here is my array: const users = [ {name: "Joe", age: 22}, {name: "Kevin", age: 24}, {name: "Peter", age: 21} ] And here is my object: ...

Eliminate apostrophes in a string by using regular expressions

Can someone help me with this word What is The Answer? I need to eliminate the space and apostrophe '. To remove spaces, should I use this method: data.text.replace(/ +/g, ""). But how can I remove the apostrophe? ...