Angular 2 component without a view

Question

Is it possible to use Angular 2 without using a template or an @View?

I'm looking for a similar way like you did the following in example:

Angular 1

index.html

<div ng-controller="appcontroller">
<div ng-class="{active: isActive()}">
    .....
</div>
</div>

app.js

angular.module('app', []).controller('appcontroller', function(){
$scope.isActive = function(){
    return true;
}
});

I was guessing it would look something like this, if it was possible:

Angular 2

index.html

<app>
<div [ngclass]="{active: isActive()}">
    .....
</div>
</app>

app.ts

import {Component} from 'angular2/core';
@Component({
selector: 'app'
})
export class AppComponent { 
isActive(){
    return true;
}
}

But unfortunately I'm getting the error:

... must have either 'template', 'templateUrl', or '@View' set.

I don't really like putting html in Javascript, so I hope there some sort of workaround or way to do this.

Answer 1

In fact, you should implement the AppComponent like this:

import {Component} from 'angular2/core';

@Component({
  selector: 'app'
  template: `
    <div [ngClass]="{active: isActive()}">
      .....
    </div>
  `
})
export class AppComponent { 
  isActive(){
    return true;
  }
}

or using the templateUrl property:

import {Component} from 'angular2/core';

@Component({
  selector: 'app'
  templateUrl: 'component.html'
})
export class AppComponent { 
  isActive(){
    return true;
  }
}

and use the component like this:

<app></app>

If you put some HTML inside the app tag, this means that you want to provide some content to the component that can be included in the component template using ng-content. Here is a sample: Angular 2 Template Component.

Hope it helps you, Thierry