angular 2 typescript create singletone

Question

im new to typescript and angular 2 and what im trying to do is to create singletone to be used where ever is needed, but im getting this error:

Unexpected value 'ViewHelperComponent' declared by the module 'AppModule'

in the browser log, what am i doing wrong?

this is the class:

export class ViewHelperComponent {

static instance : ViewHelperComponent;

constructor() {}

public static getInstance(){
  if(ViewHelperComponent.instance == null)
     ViewHelperComponent.instance = new ViewHelperComponent();
  return ViewHelperComponent.instance;
}

check(){
  console.log("working");
}
}

and im calling it from this component:

import { Component} from '@angular/core';
import { ViewHelperComponent } from '../view-helper/view-helper';
@Component({
  selector: 'app-input-parent',
  templateUrl: './input-parent.component.html',
  styleUrls: ['./input-parent.component.css']
})
export class InputParentComponent implements OnInit {

temp : ViewHelperComponent;

constructor() {
  this.temp = ViewHelperComponent.getInstance()
}
}

Yakov Fain · Accepted Answer · 2016-12-11 22:24:21Z

1

There is no need to program a singleton manually. You need a singleton service, not a component, and Angular will do it for you if you'll just declare the provider for this service in the module. For example, you can create the following class:

class ViewHelper {

   check(){
      console.log("working");
  }
}

Declare it in the providers property of @NgModule:

@NgModule({ ...
   providers: [ViewHelper]
})

Now you can use it in any component:

@Component({
  selector: 'app-input-parent',
  templateUrl: './input-parent.component.html',
  styleUrls: ['./input-parent.component.css']
})
export class InputParentComponent implements OnInit {

 constructor(private viewHelper: ViewHelper) {
  this.viewHelper.check();
 }
}

If you declare the provider in @NgModule, Angular will create a singleton instance of it.

answered Dec 11, 2016 at 22:24

Yakov Fain

12.4k5 gold badges35 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JoxieMedina · Accepted Answer · 2016-12-11 21:53:01Z

0

Commonly In the app.module.ts file you need to bootstraping the 'ViewHelperComponent' in the @NgModule, for example:

@NgModule({ bootstrap: [ AppComponent ],
   declarations: [
         AppComponent,
         ViewHelperComponent]...

Greetings!

answered Dec 11, 2016 at 21:53

JoxieMedina

1,0331 gold badge16 silver badges24 bronze badges

Collectives™ on Stack Overflow

angular 2 typescript create singletone

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related