Issues arise when trying to implement Angular class and it does

I'm currently facing some challenges using classes in Angular to simplify my coding process. So far, I haven't been able to get it to work properly. Below is the code snippet I'm working with and the error message that pops up:

import { WizardData } from '../models/wizard-data';

export class WizardPage {
    private type: String;
    private data: WizardData;

    public getType(){
        return this.type;
    }

    public setType(type: String){
        this.type = type;
    }

    public getData(){
        return this.data;
    }

    public setData(data: WizardData){
        this.data = data;
    }
}

and

import { Component, OnInit } from '@angular/core';
import { WizardPage } from '../../shared/models/wizard-page';

@Component({
  selector: 'app-wizard-base',
  templateUrl: './wizard-base.component.html',
  styleUrls: ['./wizard-base.component.scss']
})

export class WizardBaseComponent implements OnInit {
  wizardPage: WizardPage = new WizardPage();
  wizardPage.setType("address");

  constructor() { }

  ngOnInit() {}

}

This line causes an error:

wizardPage.setType("address");

The error messages are as follows (CLI):

ERROR in src/app/wizard/wizard-base/wizard-base.component.ts(14,13): error TS1005: ';' expected.
src/app/wizard/wizard-base/wizard-base.component.ts(14,22): error TS1003: Identifier expected.

In Visual Studio Code, the notifications are:

[ts] Duplicate identifier 'wizardPage'.
[ts] Subsequent property declarations must have the same type.  Property 'wizardPage' must be of type 'WizardPage', but here has type 'any'.
(property) WizardBaseComponent.wizardPage: WizardPage

If anyone knows what could be causing this issue, I would greatly appreciate your input!

Thank you!

Answer №1

When it comes to declaring members of a class inside another class, you can do so directly but accessing them directly may not be possible. Essentially, you can access a variable within any method of a class, and it will belong to the context of "this". In this case, you should invoke the ngOnit lifecycle hook.

ngOnInit() {
   this.wizardPage.setType("address");
}

Regarding specifying the accessibility of variables in a child or inherited class, you can use access specifiers such as public, protected, or private. These access specifiers function similarly to those in object-oriented programming languages like C#, Java, etc. Many thanks to @Florian for pointing this out in the comments.

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

Designing personalized plugins with Typescript in Nuxt

In my Nuxt project, I have implemented a custom plugin file that contains an object with settings called /helpers/settings: export const settings = { baseURL: 'https://my-site.com', ... }; This file is then imported and registered in /plugi ...

Merging Type-GraphQL and Typegoose through a Variety of Decorators

Using a combination of Type-GraphQl and Typegoose, I aim to streamline my data definitions by consolidating them into one source for both GraphQL schemas and Mongoose queries. Is it feasible to merge the two libraries in a way that allows me to describe bo ...

Update the data in a table using Angular

I am currently displaying an array in a table, but I need to make edits to all the values in one specific column of the table. Here is an excerpt from my code: <tr *ngFor="let line of invoice.lines; let index = index"> <td> {{line. ...

Utilizing generic union types for type narrowing

I am currently attempting to define two distinct types that exhibit the following structure: type A<T> = { message: string, data: T }; type B<T> = { age: number, properties: T }; type C<T> = A<T> | B<T>; const x = {} as unkn ...

Deploying an Angular application on Heroku platform

Recently, I followed this helpful guide to deploy my app: Angular CLI Deployment: Host Your Angular 2 App on Heroku However, today when attempting to deploy another app, the build was successful but the ng build did not run or execute as expected. D ...

When using multiple select tags with *ngFor in Angular, modifying the value of the first select tag will have an

<table id="DataTable" border="1" ALIGN="center"> <tr ALIGN="center"> <th>name</th> <th>address</th> <th>number</th> <th>type</th> </tr> <tr class="tcat" *ngFor ...

"Troubleshooting Typecscript and Angular: Dealing with mismatched argument

How can I resolve this Angular error: (response: HttpResponse<User>) => { which results in the following error message: Argument of type '(response: HttpResponse<User>) => void' is not assignable to parameter of type '(val ...

Incorporating Kekule.js into a TypeScript-based React application

Greetings, community! I've created a React app designed to help individuals in the field of chemistry share their work. To facilitate this, I came across a library called Kekule.js Here is the link Utilizing TypeScript poses a challenge as it requir ...

Error: 'process' is not defined in this TypeScript environment

Encountering a typescript error while setting up a new project with express+ typescript - unable to find the name 'process'https://i.stack.imgur.com/gyIq0.png package.json "dependencies": { "express": "^4.16.4", "nodemon": "^1.18.7", ...

Enhance the glowing spinner in a react typescript application

Recently, I transformed an html/css spinner into a react component. However, it seems to be slowing down other client-side processes significantly. You can see the original design on the left and the spinning version on the right in the image below: This ...

What is the correct way to utilize window.scrollY effectively in my code?

Is it possible to have a fixed header that only appears when the user scrolls up, instead of being fixed at the top by default? I've tried using the "fixed" property but it ends up blocking the white stick at the top. Adjusting the z-index doesn&apos ...

Discover the most helpful keyboard shortcuts for Next.js 13!

If you're working with a standard Next.js 13 app that doesn't have the experimental app directory, setting up keyboard shortcuts can be done like this: import { useCallback, useEffect } from 'react'; export default function App() { c ...

Having trouble with React state not updating?

Hello, I am a beginner in the world of React and currently working on fetching an array of endpoints. My goal is to update the API's status every 15 seconds. Here is the code snippet for the array of endpoints: export const endpoints: string[] = [ " ...

The data type 'string | boolean | null' cannot be assigned to type 'boolean'. Specifically, the type 'null' cannot be assigned to type 'boolean'

Can you spot the issue in this code snippet? isAuthenticated(): boolean { var token = localStorage.getItem(ACCESS_TOKEN_KEY); return token && !this.jwtHelper.isTokenExpired(token); } Error: The variable is returning a type of 'string | bo ...

Tips for using an ArrayBuffer to stream media in Angular

Currently, I am facing an issue while transferring data from my backend with nodeJS to Angular. Everything seems to be working fine except for one problem - my media files are not functioning properly in my code. To resolve this, I have implemented Blob fi ...

Encountering an Error When Trying to Run Npm Install in React-Native

I encountered an issue while trying to perform an npm install on my project, so I deleted the node modules folder in order to reinstall it. However, even after running npm install in the appropriate directory, I continued to face numerous errors in my term ...

Creating types for React.ComponentType<P> in Material-UI using TypeScript

I am currently working with Typescript and incorporating Material-UI into my project. I am trying to define the component type for a variable as shown below: import MoreVert from '@material-ui/icons/MoreVert' import { SvgIconProps } from '@ ...

Enhancing view with Typescript progressions

My current view only displays a loader.gif and a message to the user. I am looking to enhance the user experience by adding a progress indicator, such as "Processing 1 of 50", during the data update process. The ts class interacts with a data service layer ...

"Pairing Angular's loader with RxJS combineLatest for seamless data

Hey there! Currently, I'm working on enhancing my Angular application by implementing a global loader feature. This loader should be displayed whenever data is being fetched from my API. To achieve this, I am utilizing ngrx actions such as fetchDataAc ...

Angular - developing a custom web element to enhance the project

Is there a way to convert a single module into a web component and integrate it within the same project? Specifically, I have 3 modules in my project and I am looking to transform only module1 into a web component and incorporate it seamlessly. Thank you! ...