Google News
logo
What is the difference between a Decorator and Directive in angular?


Decorator : A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. 
Decorators use the form @expression, where expression must evaluate to a function that will be called at runtime with information about the decorated declaration.
 
Here is an example decorator from the TypeScript docs called sealed:
function sealed(constructor: Function) { 
Object.seal(constructor); 
Object.seal(constructor.prototype); 
}
Directives: Angular Directive is basically a class with a @Directive decorator. A component is also a directive-with-a-template. A @Component decorator is actually a @Directive decorator extended with template-oriented features. Whenever Angular renders a directive, it changes the DOM according to the instructions given by the directive. The directive appears within an element tag similar to attributes.
 
The Angular Directive can be classified into two types: structural and attribute directives.
 
Structural directives alter layout by adding, removing, and replacing elements in DOM. Attribute directive alter the appearance or behavior of an existing element.
 
Notice how when defining an Angular component we use the @component directive?
@Component({
  selector: ‘main’,
  template: `<child-dir #c=”child”></child-dir>`
})
class MainComponent { .. }
LATEST ARTICLES