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

What is the proper way to access the global `angular` variable in Angular and TypeScript when using AngularJS?

I'm currently integrating an Angular 4 component into a large monolithic AngularJS application. The challenge I face lies in the restrictions of the AngularJS project's build system, which limits me to only modifying the project's index.html ...

Angular 6: showcasing details of selected dropdown items seamlessly on the current page

I am completely new to Angular and I am facing a challenge in displaying another component on the same page. The concept is to select an option from a dropdown menu and then receive detailed information about it below the dropdown on the very same page. No ...

When transitioning from Angular5 to Angular6, it seems that the angular.json file has not been properly updated

I am looking to transition from Angular5 to Angular6, following the guidance provided in this answer My attempt to update .angular-cli.json to angular.json using three commands did not yield the expected results: npm install -g @angular/cli npm install @ ...

Angular input range slider that automatically rounds decimal values from the data bindings

I've implemented a range slider within an Angular form to capture and display recorded values. <input [formControlName]="object.id" [id]="object.id" type="range" [(ngModel)]="object.answer" [step]="objec ...

Issue encountered while trying to run `npm install` on an angular-cli

I recently moved my angular-cli project with node modules to a new directory. Upon running npm install, I encountered the following warnings: npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e2838c85978e8 ...

Utilizing TypeScript in conjunction with Vue and the property decorator to assign default values to props

Hey there! I'm currently dealing with a property that looks like this, but encountering a type error when trying to translate text using i18n @Prop({ default: function() { return [ { > text: this.$t('wawi_id'), align: ...

Unable to load Angular 2 Tour of Heroes application due to Typescript issue

My Angular 2 Tour of Heroes app seems to be stuck on the "Loading..." screen and I can't seem to figure out why. The angular-cli isn't showing any errors either. I'm currently at part five of the tutorial and it's becoming quite frustra ...

If the user clicks outside of the navigation menu, the menu is intended to close automatically, but unfortunately it

I have a nav file and a contextnav file. I've added code to the nav file to close the navigation when clicking outside of it, but it's not working. How can I ensure that the open navigation closes when clicking outside of it? Both files are in ts ...

Using Typescript for defining regular expressions as enum values

When making API calls from an API in typescript, I want to clarify how the response should look by using an interface. One particular value is a string that can only have specific values. Isn't this what enums are for? The possible values are: " ...

In Production mode, Angular automatically reloads the page every time my data request service is executed to fetch data from the API

The Issue at Hand I have developed an angular application that functions flawlessly on the development server. This application utilizes localStorage to store the user's JWT token, although I am aware that this may not be the most secure method. How ...

The Angular Material Tree component is not rendering properly in an Angular tutorial demonstration

Upon completing the installation of @angular/material, @angular/cdk, and @angular/animations through npm install --save, I attempted to reconstruct the flat tree example provided by Angular. Unfortunately, even after addressing the error message stating Co ...

The appearance of the Angular material component is altered once integrated into a new Angular application compared to its presentation in the provided example

After adding the Angular Material component "Toolbar" to my project, I noticed that it does not appear the same as it does in the example provided. Despite using the same styles, the outcome is different. Here is what the example looks like on the project ...

Issue with Angular and SCSS: Rgba function does not properly interpret HEX value

Attempting to retrieve the background color of the Angular theme, I encounter an issue where it is represented in HEX format and needs transparency added. This is how the variable is defined: :root { --opacity: .15; --primary: #4caf50; --accen ...

Getting permission for geoLocation service on iOS in Ionic: A step-by-step guide

I have recently developed a social media application that utilizes geoLocation services. The app is built with Ionic 4 and has a Firebase backend. While the GeoLocation services are functioning properly on Android devices, users of iOS are not being prompt ...

Working with an arbitrary number of arguments in TypeScript

Looking for a way to pass an arbitrary number of arguments with different types into a function and utilize those types, similar to the following: function f<A>(a: A): A; function f<A, B>(a: A, b: B): A & B; function f<A, B, C>(a: A, ...

I am unable to invoke this function: TypeError: this.fetchData is not a function

Whenever I try to execute this.fetchData();, I encounter the error "TypeError: this.fetchData is not a function". Initially, I suspected that the context of 'this' was lost so I attempted using bind and arrow functions without success. How can I ...

Is there a way to ensure my custom tslint rule is compatible with the exact version of the TypeScript module being used by tslint?

I seem to be missing something crucial, but I can't pinpoint the issue. Within my custom rule, I am utilizing the SyntaxKind of a Node for controlling my flow, as shown below: import * as ts from "typescript" function processPropertyName(pn: ts.Pro ...

Troubleshooting: Fixing the "@angular/core" module not found error in Visual Studio 2019

As I embark on my Asp.Net Core Project with Angular template, I encounter an issue with every import row that includes '@angular/...'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-bro ...

Display the new data from an array that has been created following a subscription to Angular Firestore

I am struggling to access the content of a variable that holds an array from a Firebase subscription. The issue I am facing is that I am unable to retrieve or access the value I created within the subscription. It seems like I can only use the created valu ...

What is the best way to specify types for a collection of objects that all inherit from a common class?

I am new to typescript and may be asking a beginner question. In my scenario, I have an array containing objects that all extend the same class. Here is an example: class Body{ // implementation } class Rectangle extends Body{ // implementation } class ...