How to import class in another component in angular 2?

Question

I am new to Angular 2 and TypeScript and I'm trying to following code in which I want to use the variable of Test class in my another component viz header.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}
export class Test{
static var1:number=10;
}

var1 is static because I want to use it without making test instance.

Code in the another component viz header

import { Component, OnInit } from '@angular/core';
import {Test} from '../app.component';
@Component({
  selector: 'app-header',
  Template;`<h1> Hello</h1>
            <h1>{{Test.var1}}</h1>`
})
export class HeaderComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }

}

This code showing only hello not "10" which is a static variable.

Thank you in advance.

score 4 · Answer 1 · answered Apr 12 '17 at 10:33

4

import { Component, OnInit } from '@angular/core';
import {Test} from '../app.component';
@Component({
  selector: 'app-header',
  Template:`<h1> Hello</h1>
            <h1>{{test.var1}}</h1>`
})
export class HeaderComponent implements OnInit {
  constructor(private test: Test) { }

  ngOnInit() {
  }

}

Mistakes

use template not Template
use : not ; after template
make instance in the constructor

answered Apr 12 '17 at 10:33

Pardeep Jain

84,110
37
165
215

I make object obj as obj = new Test(); and
obj.var1
is used in template But not showing me 10 as a output – Pulkit Aggarwal Apr 12 '17 at 10:47
have you tried using `constructor(private test: Test) { }` ? – Pardeep Jain Apr 12 '17 at 10:49
No. I simply add these statement in export class HeaderComponent implements OnInit {} – Pulkit Aggarwal Apr 12 '17 at 10:53
please try this by adding same as stated in answer – Pardeep Jain Apr 12 '17 at 10:53
I use this constructor(private test: Test) { obj = new Test(); } But it showing me an error Cannot find name 'obj' – Pulkit Aggarwal Apr 12 '17 at 10:55
no need to use `obj = new Test()` when you declare this into constructor – Pardeep Jain Apr 12 '17 at 11:02
use constructor(private test: Test) { } how to print 10 – Pulkit Aggarwal Apr 12 '17 at 11:12

score 1 · Answer 2 · answered Apr 13 '17 at 06:00

So even though you do not want to instantiate instances of Test, you will still need to use instance properties of your component.

Within your component simply bind the class Test to a an instance property, and access that property in the template.

test = Test;

Access this in the template with:

{{ test.var1 }}

score 0 · Answer 3 · answered Apr 12 '17 at 16:05

0

Here is another way:

import { Component, OnInit } from '@angular/core';
import { Test } from './app.component';
@Component({
    selector: 'app-header',
    template: `<h1> Hello</h1><h1>{{var1}}</h1>`
})
export class HeaderComponent implements OnInit {
    var1 = Test.var1; // place static var into local var
    ngOnInit() {
    }
}

answered Apr 12 '17 at 16:05

Paul A. Trzyna

194
12

This is working but why we can't access it directly. – Pulkit Aggarwal Apr 13 '17 at 04:50
Please see the following answer: http://stackoverflow.com/a/39193573 It appears that the template is scoped to the component instance and therefore it has no access to global or static variables. In my opinion this is a good thing. Global state should usually be avoided. – Paul A. Trzyna Apr 13 '17 at 12:11

score 0 · Answer 4 · edited Jul 27 '17 at 19:36

0

You had set the variable as public. you have initialized Test as a private property. Hence it's scope is just inside the component and not on the template.

edited Jul 27 '17 at 19:36

sds

58,617
29
161
278

answered Jul 27 '17 at 18:58

Niraj Rajbhandari

1

score 0 · Answer 5 · edited Oct 27 '18 at 20:48

import { Component } from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'] 
})

export class AppComponent {
}

@Injectable()
export class Test{
  static var1:number = 10;
}


import {Test} from '../app.component';
@Component({
  selector: 'app-header',
  Template;`<h1> Hello</h1>
  <h1>{{Test.var1}}</h1>`
})

export class HeaderComponent implements OnInit {
   constructor(test:Test) { }
   ngOnInit() {
   }
}

Here using @Injectable() decorator before test class, And use the Test in providers[] of app.module.ts, I hope it works..

How to import class in another component in angular 2?

5 Answers5

obj.var1