What is the correct way to initialize an object in Angular 5?

I am in the process of developing a dynamic questionnaire service that utilizes a dynamic form approach. The structure consists of a question base followed by various types of questions such as textboxes, dropdowns, etc.

My next step was to create a questionnaire object which includes an array of questions along with additional information like ID and the poster's details.

However, upon calling the add() function in question.service.ts, I encountered an error stating that 'questionnaireobj' is not defined. This made me wonder if I properly instantiated a 'questionnaireobj' instance in questionnaireObj.ts or if I referenced it incorrectly in question.service.ts.

Here are snippets of the code:

question-base.ts

export class QuestionBase<T>{
  // code here
}

question-textbox.ts

export class TextboxQuestion extends QuestionBase<string> {
  // code here
}

question.service.ts

// code here

questionnaireObj.ts

import { DropdownQuestion } from './question-dropdown';
import { QuestionBase }     from './question-base';
import { TextboxQuestion }  from './question-textbox';
import { Injectable }       from '@angular/core';

@Injectable()
export class QuestionnaireObj {
  // code here
}

Answer №1

codeReview.js

import {DropdownQuestion} from './question-dropdown';
import {QuestionBase} from './question-base';
import {TextboxQuestion} from './question-textbox';
import {Injectable} from '@angular/core';


@Injectable()
export class CodeReview {

  reviewId: number = 1;
  reviewList: QuestionBase<any>[] = [];

  constructor() {
  }

}

I am still puzzled by your request. You mentioned encountering the error "questionnaireobj is not defined" when calling the add() function in question.service.ts, but there appears to be no reference to questionnaireobj within that file.

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

In what scenarios would it be more advantageous to utilize ngStyle over creating a custom directive?

I had the need to dynamically change the width of a column, so I created a unique custom directive for that specific purpose: @Directive({ selector: '[rq-column-size]' }) export class ColumnSizeDirective { @Input('rq-column-size') ...

Troubleshooting typescript error in styled-components related to Material-UI component

When using typescript and trying to style Material UI components with styled-components, encountering a type error with StyledComponent displaying Type '{ children: string; }' is missing the following properties import React, { PureComponent } f ...

The argument labeled as 'Subscription' cannot be assigned to the parameter labeled as 'string' in Angular

I am utilizing my Subscription variables to retrieve the API from configuration settings. public ChannelsAPI=this._configservice.getConfiguration("ChannelAPI").subscribe((result) => console.log(result)); This is the method _Configservice.getC ...

Waiting for Angular's For loop to complete

Recently, I encountered a situation where I needed to format the parameters and submit them to an API using some code. The code involved iterating through performance criteria, performance indicators, and target details to create new objects and push them ...

When configuring Gatsby with Typescript, you may encounter the error message: "You cannot utilize JSX unless the '--jsx' flag is provided."

I am currently working on a Gatsby project and decided to implement Typescript into it. However, I encountered an error in my TSX files which reads: Cannot use JSX unless the '--jsx' flag is provided. What have I tried? I consulted the docume ...

When clicking, clear the selected items and avoid the function from repeatedly executing

I am currently facing issues with implementing mat-select-autocomplete in my project. Firstly, I have noticed that the function's (selectionChange)="getSelectedOptions($event)" is triggered every time I click on mat-select-autocomplete. Is there a wa ...

I'm curious if anyone has experimented with implementing TypeScript enums within AngularJS HTML pages

During my Typescript project, I defined an enum like this: enum Action { None = 0, Registering = 1, Authenticating = 2 }; In the controller, I declared a property named action as follows: class AuthService implements IAuthService { action: number; ...

Managing Scroll Behavior in Ionic

I'm in the process of developing a quiz application using Ionic and Angular. My goal is to display one card at a time, similar to how Instagram and Facebook do it. This means that as users scroll down the app, only one card should be visible on their ...

The Event Typing System

I am currently in the process of setting up a typed event system and have encountered an issue that I need help with: enum Event { ItemCreated = "item-created", UserUpdated = "user-updated", } export interface Events { [Event.Ite ...

Is there a way for me to retrieve a variable from the response of a service that was defined within the same class in Angular 4?

import {Component, OnInit} from '@angular/core'; import {LoginService} from "../../services/login.service"; import {LoginUser} from "../../services/model"; @Component({ selector: 'login-component', templateUrl: './login.component. ...

Exploring the power of nested components within Angular 2

I am encountering an issue with a module that contains several components, where Angular is unable to locate the component when using the directive syntax in the template. The error message I receive states: 'test-cell-map' is not a known elemen ...

What is the best way to ensure the hamburger menu stays perfectly centered?

My menu is currently aligned to the right and scrolls with the user profile. I want the menu to always be centered and the profile to stay on the right side. I am working with Angular 12 and Bootstrap 5 for this project. Here is the code I have been usin ...

Troubleshooting: Angular 6 issue - Unable to toggle visibility using ngIf

I am currently learning Angular and I'm working on the app.component.html as shown below: <app-login *ngIf="!loggedIn"></app-login> <section *ngIf="loggedIn" style="background:#EBF0F5;"> <div class="container"> ...

Avoiding useCallback from being called unnecessarily when in conjunction with useEffect (and ensuring compliance with eslint-plugin-react-hooks)

I encountered a scenario where a page needs to call the same fetch function on initial render and when a button is clicked. Here is a snippet of the code (reference: https://stackblitz.com/edit/stackoverflow-question-bink-62951987?file=index.tsx): import ...

Unable to retrieve the specific value associated with a key from JSON data

I am attempting to retrieve the value of "id" from a JSON response I received after making a POST request. { "callId": "87e90efd-eefb-456a-b77e-9cce2ed6e837", "commandId": "NONE", "content": [ { "scenarioId": "SCENARIO-1", "Channel": " ...

Exciting ngClass variation

I am facing a challenge of adding multiple classes to an element, with one of them being conditional. After referencing the documentation, I came across this method: <some-element [ngClass]="{'first': true, 'second': true, 'thi ...

Troubleshooting problems with styling in Angular Material's mat-select component

In my project, I am using Angular 8.0.0 along with Angular Material and the Fuse Theme as an admin panel. The issue I am facing is that every time I change the style of a mat-select component, it initially gets applied but after one or two refreshes, Angul ...

If the input matches any of the strings from the web request output, then return true

Can you help me modify this code to detect if the IP address (as a string) stored in the variable const ip_address is present in the output retrieved from the URL specified in const request? function getBlocklist() { const baseurl = "https://raw ...

group items into ranges based on property of objects

I've been grappling with this issue for far too long. Can anyone provide guidance on how to tackle the following scenario using JavaScript? The dataset consists of objects representing a date and a specific length. I need to transform this list into a ...

Using TypeScript generics with the `keyof` operator may result in rejection

I created a custom method using the RXJS library which looks like this : function Subject<T>(t: T):T { return t; } In addition, I defined an interface that specifies the structure of my application values. Additional keys can be added to this i ...