Angular 2 is having trouble with object dot notation in Typescript and is expecting a semicolon

Hello, I am currently transitioning a project from Angular 1 to TypeScript and Angular 2. One issue I'm facing is getting some property definitions into the Angular 2 component.

Below are the property definitions causing trouble:

import { Component } from 'angular2/core';
@Component({
  selector: 'contact-detail',
  templateUrl: 'app/contacts/contact-detail.template.html',
  styleUrls: ['app/contacts/contact-detail.style.css']
})
export class ContactDetailComponent {
  contactFormOptions = {};
  contactFormOptions.initDateDefault = '';
  contactFormOptions.followUpDateDefault = '';
  contactBasicInfo: {};
  contactBasicInfo.bdMonth = '0';
  contactBasicInfo.bdDay = '0';
}

In Angular 1, defining object properties with dot notation (e.g., 

contactFormOptions.initDateDefault = '';
) worked fine. However, Typescript is throwing an error, expecting a semicolon instead of using dot notation for these properties. Can anyone shed light on why this is happening? What am I overlooking?

Thank you!

angularjstypescriptjavascript-objects

Answer №1

If you're using TypeScript and want to incorporate moment.js, you'll need a definition file for it. Luckily, this definition file comes with the moment.js package itself, so all you have to do is add the reference. You can find the necessary information at Definitely Typed here:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/moment/moment.d.ts

To clarify, what you'll need to include in your code is:

declare var moment: moment.MomentStatic;

Answer №2

Aha! My journey into the world of Object-Oriented Programming (OOP) has just begun. What I realized was that I needed to define the properties and their respective types, then set values for them within a constructor (or method).

export class ContactDetailComponent {
  contactFormOptions: any = {};
  contactBasicInfo: any = {};

  constructor ( ) {
    this.contactFormOptions.initDateDefault = moment();
    this.contactFormOptions.followUpDateDefault = moment().add(7, 'days');
    this.contactBasicInfo.bdMonth = '0';
    this.contactBasicInfo.bdDay = '0';
  }
}

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

Encountering a problem with ng-repeat when working with a JSON

Having a bit of trouble displaying the keys and values from a JSON object in an HTML table using ng-repeat. The JSON object is coming from the backend, but for some reason, it's not showing up on the frontend. I know there must be a simple mistake som ...

javascripthtmlangularjs

Trouble with updating a variable within a loop in Cypress

During my experience with writing Cypress tests, I came across an issue that is preventing me from updating a specific variable. The goal of my test is to run a loop and update the questionId variable within each iteration for making API queries. However, ...

javascripttypescriptiterationcypress

De-duplicating data in the ng-grid

After applying a cell template in my Ng-grid cell, I am getting data but with duplicated regionName values. <select ng-cell-input ng-options="l.RegionID as l.RegionName for l in regionActivities" ng-class="'colt' + $index" ng-model="C ...

asp.net-mvcangularjsng-grid

What is the best way to create a fixed array of unchangeable objects?

I am trying to create a class that requires an array of objects as one of its constructor parameters, with the condition that neither the array nor the objects in it can be modified. My current approach involves using the readonly modifier along with the g ...

typescript

Why does the "revalidate" field in Incremental Static Regeneration keep refreshing without considering the specified delay?

I am currently referencing the guidance provided at: https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration. My intention when setting the revalidate: 60 * 10 parameter is: To have the content remain consistent for at least ...

javascriptreactjstypescriptnext.js

Parsing improperly formatted JSON from an HTTP GET request can be done using either AngularJS or JQuery

Trying to decipher a poorly formatted JSON response from a remote server that looks something like this: //[ {},{} ] In my AngularJS code: $http.get('http://www.example.com/badjson') .success(function(data) { console.log(data); }) ...

javascriptjqueryajaxjsonangularjs

Populating datasets with relative indexing

I am working on a code where I need to fill the datasets with the property isProjected set to 1. There are 3 datasets - lower estimate, projected, and upper estimate. The goal is to fill the Lower Estimate and Upper Estimate with a background color of rgba ...

angulartypescript

The Angular filter does not seem to work as expected when combined with the ng-if

There seems to be a problem with filtering an ng-repeat using a search box. <li ng-if="searchTab"><input type="text" class="form-control" placeholder="Search" ng-model="search" > </li> and then in the ng-repeat <div dir-paginate= ...

javascriptangularjs

AngularJs - Show the response only upon verifying the correct answer

Let me provide an overview of what has been implemented so far: When a user selects an answer in radio buttons and clicks on "Check Answer", the system displays either "Correct" (in green) or "Incorrect" (in red) in the first answer field. Additionally, th ...

javascripthtmlcssangularjs

The ng-repeat directive seems to be malfunctioning with the options

I'm currently facing an issue in my project where I am trying to populate the options for a select element using AngularJS. Oddly enough, it seems to be working perfectly fine for the ul tag but not for the options tag. Here is the controller code sn ...

angularjs

Leverage the power of Angular and Node.js to dynamically generate and configure a new subdomain on an

Currently, I am tackling a project that involves generating sub domains dynamically based on the prefixes entered by users on my website. While everything is functioning properly on my localhost using diet.js and express-subdomain, errors are being encount ...

javascriptangularjsnode.jsamazon-web-servicessubdomain

"The act of initializing an EntryComponent in Angular results in the creation of a brand

In my main component, app.component.ts, I have integrated a new service into the providers[] array and initialized it in the constructor: @Component({ selector: 'app-main', templateUrl: './app.component.html', styleUrls: ['. ...

angulartypescriptangular-material

What are some strategies for distinguishing between callable and newable types?

I seem to be facing a challenge related to narrowing, specifically the differentiation between Fnc (callable) and Class (newable). The code snippet provided functions in Playground, but the autocomplete feature is lacking, as shown in the first image. My ...

typescript

Tips for maintaining the browser scroll bar at the top when switching routes in AngularJS

How can I ensure that the scrollbar is always at the top when a user is redirected to a different page after scrolling down on the home page? The autoscroll feature in the code below doesn't seem to be working. Any suggestions would be greatly appreci ...

javascriptangularjsbrowser

Issue with ngTable: Error retrieving data for server-side pagination

I am currently working on setting up a server-side table using ng-table. However, I am encountering some issues with the getData function. It keeps giving me errors such as $defer.resolve is not a function or params is not defined. I noticed that I can ac ...

javascriptangularjsngtable

There were no visible outputs displayed within the table's tbody section

import React from 'react'; export default class HelloWorld extends React.Component { public render(): JSX.Element { let elements = [{"id":1,"isActive":true,"object":"Communication","previ ...

javascriptreactjstypescript

Dynamically generating an Angular component and populating it with data

I am currently working with Angular 7/8 and I have some code that adds a new component dynamically. In the parent component, my .ts file includes the following: PARENT COMPONENT Within the .ts file: @ViewChild(InjectDirective) injectComp: InjectDirect ...

angulartypescriptangular7angular8

Is it possible to add an element to an array every time a particular function is executed?

Implementing infinite scroll involves using an array called hotels that receives data from the $http.get() method. Now, the goal is to populate a new array named hotelsNew[] with the values from the hotels array, while incrementing the values of m and j. ...

arraysangularjshttpionic-frameworkinfinite-scroll

Having trouble with your custom AngularJS directive not functioning correctly?

I am facing an issue with my custom directive implementation. I have a custom directive that contains a table which references a controller. The ProjectController part works fine when it is not included in the code, but as soon as I put everything into the ...

javascripthtmlangularjsangularjs-directive

Creating an array object in TypeScript is a straightforward process

Working on an Angular 4 project, I am attempting to declare an attribute in a component class that is an object containing multiple arrays, structured like this: history: { Movies: Array<Media>, Images: Array<Media>, Music: Array<Medi ...

javascriptarraysangulartypescript