Components and Services

ng-metadata lets us write code in an Angular style. Components written in this style are prime candidates for an eventual upgrade using ng-upgrade.


Components use @Component from ng-metadata. Lifecycle hooks similar to those in Angular should work with ng-metadata.

import { Component, Inject, Input, Output, EventEmitter, OnInit } from 'ng-metadata/core';
import { HeroService } from './hero.service';

  selector: 'hero',
  templateUrl: './hero.component.html'
export class HeroComponent implements OnInit {
  @Input() name: string;
  @Output() call = new EventEmitter<void>();

  // Services can be included using `@Inject` or by their class literal
    @Inject('$log') private $log: ng.ILogService,
    private heroSvc: HeroService

  ngOnInit() {
    console.log('Component initialized');


Services use @Injectable from ng-metadata. This decorator is written preceding a TypeScript class. Angular 1 services can be added by using the @Inject decorator in the service constructor.

import { Injectable, Inject } from 'ng-metadata/core';

export class HeroService {
  constructor(@Inject('$http') private $http: ng.IHttpService){

    return this.$http.get('/api/heroes');

results matching ""

    No results matching ""