CODEWITHSUNDEEP
javascriptecmascript-6angularangular2-directives
corntoole
corntoole

Reputation: 127

What is the correct syntax for declaring a Angular 2.0 Decorator in AtScript?

How do you create Decorator directives in Angular 2.x? I'm writing against alpha version of Angular, and was trying to reproduce the functionality found in the AngularJS (1.x) directive ngClass. Below is a snippet from my attempt at my own NgClass in Angular. What I would like to do is observe the value of some expression that may contain a hash of class names to boolean expressions. As those expressions change, names would be added or removed from the classList property on the element that the decorator has been applied.

What's wrong with this syntax? Is a Decorator not even the right template for the job, and maybe I should create a Template Directive? Even still, what's the syntax for declaring Directives with Angular? I'll accept answers in ES5, but I'd prefer ES6 and AtScript moreso.

For context, I was writing this as preparation for a talk I gave preview what's going to be like to write apps with Angular 2 and beyond.

@Decorator({
  selector: '[ng-class]',
  bind: {'NgClass': 'class'},
  observe: {'ngClass': 'ngClassChanged'}
})
export class NgClass {
  constructor(element:NgElement) {
    this.element = element;
  }

  ngClassChanged(newValue) { 
    let classNames = [];
    if(newValue){
      console.log(newValue);
      this.element.className = newValue;
    }
    else {
        this.element.className = "";
    }

  }
}

Upvotes: 4

Views: 584

Answers (1)

Carlo Bonamico
Carlo Bonamico

Reputation: 153

As of April 2015, the syntax in the reference documentation for Angular2 says

@Decorator({ selector: '[primary]'}) 
class Primary {                      
   const ructor(field:Field ) { ... }  
}

https://github.com/angular/angular/blob/master/modules/angular2/docs/core/02_directives.md

Upvotes: 1

Related Questions