Initialize a variable object in Angular2 / Javascript

Question

I'm coming from Angular 1 where I'd just do this:

var options = {};
options.location = "test";
options.time = "today";

I just want to do the same thing with Angular 2 to sorta "group" my variables by adding them to objects and using interpolation to reference them in the HTML

<input [(ngModel)]="options.location" />

Now I already figured I could do this:

export class Options {
  location: string;
}

options: Options = {
  location: 'test'
};

My question: Is there a simpler way like

options: {location: string};

Thanks!

Answer 1

Typescript can be considered as extended JavaScript. Any valid JavaScript code is valid Typescript code.

The code you wrote in your question :

var options = {};
options.location = "test";
options.time = "today";

...is perfectly legal (but not optimal).

The thing is that simply declaring options the way you do in the component won't make it visible from the template. options must be a public member of the Component class. Your Component class should look like

@Component({
  template: `
<input [(ngModel)]="options.location" />
`})
export class FormsPage {
  options = {location :"test", time : "today" }
}

Note that if I were you, I would read Typescript documentation (and even JavaScript one) in addition to Angular2's one. It would help you to better understand how handle it.

Answer 2

Found it myself -

this.options = {location: "test"};

instead of

this.options.location = "test"

Not sure why the second version does not work. If you have insight please share in the comments!

Answer 3

You can do it this way:

options: Options = {
  location: 'test'
} as Options;

Answer 4

To initialize a ngModel value in angular , Create a class Options like this:

Options.ts

export class Options {
  location: string;
  time: string;
  constructor(location: string, time: string) {

  }
}

Or

export class Options {
  location: string;
  time: string;
  constructor(location: string, time: string) {
    this.location = location;
    this.time = time;
  }
}

HTML:

<input type="text" name="location" [(ngModel)]="options.location" #location="ngModel" required/>

<input type="text" name="time" [(ngModel)]="options.time" #time="ngModel" required/>

And in your component initialize options like this:

options = new Options('','');

NOTE: if you create Options class like this:

   export class Options {
      constructor(location: string, time: string) {

      }
    }

It will work with ng serve but NOT with ng build --prod as AOT(Ahead-of-Time) compilation gives error:

ERROR in ng:/xxxx/x.component.html (67,74): Property 'location' does not exist on type 'Options'.
ERROR in ng:/xxxx/x.component.html (72,72): Property 'time' does not exist on type 'Options'.

If you initialize options in component in this way

options={};

will also gives same error.