A guide on how to bring a TypeScript class into another TypeScript class

I find myself struggling more than necessary with this task.

Working with Ionic 3/Angular, I began creating a component and realized it wasn't exactly what I needed. Essentially, the class simply triggers an Ionic popup and, if the user clicks 'yes', calls a service.

import { AlertController, NavController } from 'ionic-angular';
import { WSService } from './ws.service';

export class confirmPopup {


  constructor(private wsService: WSService ,
              private alertCtrl: AlertController,
              private navCtrl: NavController) { }

showPopup(){

let popup = this.alertCtrl.create({
title: "Show Popup",
      message: "Are you okay today?",
      buttons: [
        {
          text: 'No',
          role: 'cancel',
          handler: () => {
            //Do nothing
          }
        },
        {
          text: 'Yes',
          handler: () => {
            this.wsService.register()
            .then( response => {

            this.navCtrl.setRoot(AnotherPage);
            })
          }
        }
      ]
    })

    popup .present();
}

Now, I am attempting to implement this class in two other components.

After importing it and adding it to the constructor, I encountered the error "Can't resolve all parameters for..."

I'm unsure of what specific steps Angular requires to properly import the class. Any insights?

Answer №1

It is important to decorate your class with the @Injectable() decorator in order to properly handle dependencies within your service. Without this decorator, the service's dependencies may not be resolved correctly before injection into other classes.

import { Injectable } from '@angular/core'

@Injectable()
    export class confirmPopup {


      constructor(private wsService: WSService ,
                  private alertCtrl: AlertController,
                  private navCtrl: NavController) { }

    .......

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

How can an array be generated functionally using properties from an array of objects?

Here's the current implementation that is functioning as expected: let newList: any[] = []; for (let stuff of this.Stuff) { newList = newList.concat(stuff.food); } The "Stuff" array consists of objects where each ...

I aim to display interconnected information from various APIs in a cohesive manner

I am working with two APIs: component.ts ngOnInit(): void { this.getQueryCountriesList().subscribe(arg => { this.countryDatas = arg; }); this.getQueryNights().subscribe(obj => { this.nightDatas = obj; }); ...

Adding and Removing Classes from Dynamically Added DOM Elements in Angular 2/4

I'm currently working on creating a unique list, similar to the notification system seen on platforms like Facebook. The list is pulled in via JSON and displayed on the UI using ngFor. Each item in the list has a default CSS class called "unread", whi ...

Is there a way to display the text that has been selected?

I would like to display the text of a clicked link in an empty div element. Can someone help me achieve this? Thank you. <div></div> <span>link one</span> <span>link two</span> <span>link three</span> ...

What does ngModel look like without the use of square brackets and parenthesis?

Can you explain the usage of ngModel without brackets and parentheses in Angular? <input name="name" ngModel> I am familiar with [ngModel] for one-way binding and [(ngModel)] for two-way binding, but I am unsure what it means when ngModel ...

NextJS API routes consistently provide a status code of 200 upon execution

I am new to the concepts of Next.js, and I recently encountered an issue while attempting to fetch data from an API. The API is designed to check if a user session exists (i.e., if the user is logged in) and then returns a JSON response through a GET reque ...

Strategies for successfully passing mock dates as event values when unit testing in Angular

I have a function that requires date data from a datepicker event. I am using matdatepicker for selecting a date from the UI. I need help passing the date event value to my onDateSelected() function. Could someone assist me in passing the date event valu ...

React Native Async Storage: displaying a blank page issue

I am facing an issue while attempting to save my data locally using AsyncStorage, specifically with the getData method. const storeData = async (value: string) => { //storing data to local storage of the device try { await AsyncStorage.setItem(& ...

I find myself hindered by TypeScript when trying to specify the accurate constraints for getUserMedia

I'm having difficulty getting a screen to stream within my Angular 5 Electron application. I am utilizing the desktopCapturer feature provided by Electron. Below is an excerpt of my code: loadCurrentScreensource() { desktopCapturer.getSources({ ...

Issue with Rest API causing Phonegap Ionic app to be unresponsive on device

Currently, I am attempting to initiate a login call to an Express REST API using Passport Basic Strategy. Interestingly, everything seems to be functioning properly when accessing the API from a browser, but encounters issues when accessed from a device th ...

Transform the date format from Google Forms to TypeScript

I am currently facing an issue with a Google Form connected to a Google Spreadsheet. The date format in the spreadsheet appears as follows when a response is received: 20/02/2023 18:58:59 I am seeking guidance on how to convert this date format using Type ...

Is there a way to trigger validation with a disabled property?

My form element is set up like this: <input type="text" id="country" formControlName="Country" /> The form group looks like this: this.myForm = this.formbuilder.group({ 'Country': [{ value: this.user.Country, disabled: this.SomeProperty= ...

I am interested in transforming an Angular 2 observable into a custom class

Having recently delved into the world of angular2, I've spent countless hours trying to tackle a particular challenge without success. My goal is to convert an observable from an HTTP call and store it in a class. Below are the key components involve ...

Typedoc Error: Attempted to assign a value to an undefined option (mode)

After installing typedoc with the command npm install typedoc --save-dev, I proceeded to add typedocOptions to tsconfig.json: { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", // ...some lin ...

Exchange information between two components and a service in a continuous loop

My Angular application retrieves a JSON object from an API, and I want to accomplish this through a service. The app has a search component that queries the service, which in turn fetches the data. View example diagram Next, the second component needs t ...

Calculating the total of all values in a table

For my ngFor loop, the invoice total is calculated based on price and hours, but I also want to calculate the totals of all invoices in the end. <tr *ngFor="let invoice of invoiceItem.rows"> <td>{{ invoice.rowName }}</td> <td& ...

Backdrop styling for Material-UI dialogs/modals

Is there a way to customize the semi-transparent overlay of a material-ui dialog or modal? I am currently using material-ui with React and Typescript. https://i.stack.imgur.com/ODQvN.png Instead of a dark transparent overlay, I would like it to be transp ...

The Ngrx selector fails to activate when the reducer modifies the portion

In my Angular 2 application, I heavily utilize Ngrx stores which have proven to be extremely beneficial. I have a well-structured system in place for my stores where I use selectors to retrieve specific parts of the state. Normally, all the selectors work ...

The SideNav SpyOn feature failed to locate the specified method

In the test project I am working on, there is a side navigation menu. I need to create a simple test to verify that when I click the button, the sidenav opens or closes. The AppComponent interacts with the sidebar through its dependency, sidenavbar. it(&a ...

Angular 2: Enhancing User Experience with Pop-up Dialogs

Looking to implement a popup dialog that requests user input and returns the value. The popup component is included in the root component, positioned above the app's router outlet. Within the popup component, there is an open() method that toggles a ...