Ways to get into the Directive class

Question

Ways to get into the Directive class

@Directive({
  selector: '[myHighlight]'
})
export class HighlightDirective {
  static test: number = 5;
  constructor(private el: ElementRef) { }

  highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

In relation to the provided code snippet, I am curious about the scenario where there is no myHighlight attribute present to trigger Angular to instantiate an object of the HighlightDirective class. In such a case, my assumption is that the HighlightDirective class itself (without instantiation) will be created. Is my understanding correct? If so, what would be the method to access the class?

angular typescript

Answer 1

Answer №1

The concept of "creating a class" may seem perplexing at first glance. When your code is transpiled to EcmaScript5, it takes on a structure similar to the following (simplified):

var HighlightDirective = (function() {
  function HighlightDirective(el) {
    this.el = el;
  }
  HighlightDirective.test = 5;
  HighlightDirective.prototype.highlight = function() {
    this.el.nativeElement.style.backgroundColor = color;
  };
  return HighlightDirective;
)();

In essence, creating a class in this context is not much different from defining a function.

When you import a file containing this class, the function is generated during JavaScript runtime.

At this stage, Angular has not yet played a role.

While I am not an Angular developer, my understanding is that the framework does not instantiate the directive class until it is needed.

Regarding how Angular links a directive on an element to a specific class, one would need to reference the angular source code for further insights. The question of "how" is too extensive for the format of Stack Overflow.

Answer 2

The concept of "creating a class" may seem perplexing at first glance. When your code is transpiled to EcmaScript5, it takes on a structure similar to the following (simplified):

var HighlightDirective = (function() {
  function HighlightDirective(el) {
    this.el = el;
  }
  HighlightDirective.test = 5;
  HighlightDirective.prototype.highlight = function() {
    this.el.nativeElement.style.backgroundColor = color;
  };
  return HighlightDirective;
)();

In essence, creating a class in this context is not much different from defining a function.

When you import a file containing this class, the function is generated during JavaScript runtime.

At this stage, Angular has not yet played a role.

While I am not an Angular developer, my understanding is that the framework does not instantiate the directive class until it is needed.

Regarding how Angular links a directive on an element to a specific class, one would need to reference the angular source code for further insights. The question of "how" is too extensive for the format of Stack Overflow.

Ways to get into the Directive class

Answer №1

Similar questions

Having trouble getting Angular2 tutorial animations to work in IE11?

The unknown number of arguments in a Typescript generic type

Guide on altering an element's attribute in Angular 2

Dynamic Angular component loading with lazy loading

steps to activate button once the form is validated

Display the dynamic change of minutes and seconds every second on an Ionic HTML page

Instructions for obtaining the most recent event using the `fromEvent` function

Is it possible to implement multiple Datepickers in Angular Material?

Establish a global variable within a TypeScript file

What is the syntax for declaring a function type with an optional parameter in Typescript?

The error "Property 'user' does not exist on type 'Session'." occurred while attempting to pass session data using express-session and accessing req.session.user

Discover the use of dot notation for accessing nested properties

What are the steps to integrate TypeScript into JavaScript code?

Utilizing ElementRef to create collapsible elements in Angular

What is the best way to access the data stored within a Promise object in a React application?

Trouble encountered with the implementation of setValue on placeholder

Tips for sorting the mat table dataSource by inputting two columns and selecting the search button

Encountering issues when trying to combine Sequelize with TypeScript

Leveraging server.ts for Development with Angular 5 Universal

Reacting to shared routes across various layouts