1

I've created a class for the default settings of my app. But I have no idea how to get the data from that class and use it in my html. I tried an observable but that's not really working.

My class looks like this:

export class Instellingen {
  urenTotBehandeling: number = 4;
  toonNaam: boolean = true;
  toonTijd: boolean = true;
  toonType: boolean = true;
  toonSanitair: boolean = true;
  toonKinder: boolean = true;
  toonSalon: boolean = true;
  toonKamerNummer: boolean = true;
  uren = [
    {value: 1, label: '1 uur'},
    {value: 2, label: '2 uren'},
    {value: 3, label: '3 uren'},
    {value: 4, label: '4 uren'}         ];
  hulpKleur:string= "red";
  behandelKleur:string = "orange";
  volKleur:string="green";
  leegKleur:string="white";    }
2
  • e.g. export class OtherClass { constructor(){ let a = new Instellingen(); a.toonKamerNummer; } }
    – moohkooh
    Jun 7, 2017 at 12:40
  • I don't want to export it to another class. I want to use it in my html.
    – Claire
    Jun 7, 2017 at 12:50

3 Answers 3

4

The best approach to get the default settings from a class in application will be:

  1. Create a service and add it to the Provider in your AppModule/module
  2. Import that service and inject it in your component's constructor
  3. Use it in your code.
1
  • Yes, I've been trying to create a service for this. But I'm having issues with how to do it exactly. I can fetch data from a json file with a service, and this is probably easier so I feel a bit silly :)
    – Claire
    Jun 7, 2017 at 12:49
3

here is an example how you can use it :

let i: Instellingen=new Instellingen();
console.log(i.urenTotBehandeling); // 4

Hope it helps :)

5
  • Thank you but i'm trying to create a service or something so I can easely use it in my html :)
    – Claire
    Jun 7, 2017 at 12:54
  • 1
    @KlaartjeDeBacker you can create a variable that u can use it directly in html without creating class : let Instellingen ={ "urenTotBehandeling": 4, "toonNaam":true, "toonTijd": = true, //... "uren" : [ {value: 1, label: '1 uur'}, {value: 2, label: '2 uren'}, {value: 3, label: '3 uren'}, {value: 4, label: '4 uren'} ], //.. } in ur html : <span> {{Instellingen.urenTotBehandeling}} </span> Jun 7, 2017 at 13:00
  • I tried this approach but when I type {{Instellingen.urenBehandeling}} I get Cannot read property 'urenBehandeling' of undefined
    – Claire
    Jun 7, 2017 at 13:38
  • 1
    have you defined Instellingen in your typescript file? can you show me a part of your code ? Jun 7, 2017 at 13:51
  • Nevermind, I was able to solve it by just typing in {{urenTotBehandeling}}
    – Claire
    Jun 7, 2017 at 14:01
0
import { Component } from '@angular/core'    
import { NgForm } from '@angular/forms'    
@Component({
selector :'ang-model',
template :`
Model :<input [(ngModel)] ='name' /> // Data Binding 
       {{name }} // string interpolation`
})
export class AngModelComponent{
       name : string = "Practice ";
}

Try the above approach of data binding and string interpolation

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.