CODEWITHSUNDEEP
angulartypescript
Pulkit Aggarwal
Pulkit Aggarwal

Reputation: 2672

How to import class in another component in angular 2?

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.

Upvotes: 2

Views: 40677

Answers (5)

Anjan Kumar GJ
Anjan Kumar GJ

Reputation: 81

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..

Upvotes: 0

Niraj Rajbhandari
Niraj Rajbhandari

Reputation: 1

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.

Upvotes: 0

Martin
Martin

Reputation: 16292

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 }}

Upvotes: 1

Paul A. Trzyna
Paul A. Trzyna

Reputation: 300

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() {
    }
}

Upvotes: 0

Pardeep Jain
Pardeep Jain

Reputation: 86740

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

Upvotes: 4

Related Questions