CODEWITHSUNDEEP
angular
Mateut Alin
Mateut Alin

Reputation: 1295

Angular: What is a directive property? But a method?

I'm studying the Angular documentation and I saw that some directives have some properties and methods.

For example the routerLinkActive has a property named isActive: boolean and a method ngOnChanges(changes: SimpleChanges): void.

Can I use the isActive property and the ngOnChanges method? If the answer is positive, can you give me an example of how to use isActive and ngOnChanges?

Upvotes: 1

Views: 108

Answers (1)

user4676340
user4676340

Reputation:

Following my comments, I'm going to explain the documentation to you.

The documentation for routerLinkActive starts with a little chip on the top of the page :

routerLinkActive component type

This chip means that routerLinkActive is a directive. After extensive reading of the documentation, you will see that there is two types of directives : attribute and structural. After reading both, you will understand that routerLinkActive is an attribute directive.

This means that you must use this directive on HTML elements, through its selector.

RouterLinkActive selector

This is a CSS selector that tells you how to use the directive.

By writing

<div routerLinkActive="XXX"></div>

You will create an instance of the directive on that element (which is explained in the documentation I have provided earlier).

Built-in directives (a.k.a. directives provided directly by the framework) are usually straight-forward : their usage is very simple.

On this one, we can read

Lets you add a CSS class to an element when the link's route becomes active.

Under the description fragment, you will see examples of how to use the directive.

Now, for the methods and variables : at the tpo of the page, you will see a link to the source code :

enter image description here

This will redirect you to the source code of the directive.

In it, you will see what you have asked for : what the variables are, what they represent, all the declared functions, and what they do.

As you may or may not know, ngOn functions are lifecycle hooks : they are functions that are called at certain points in a feature's life.

In that case, you have ngOnChanges, which is called everytime the change detection is triggered on the @Inputs.

Usually, you don't call those hooks : they call functions themselves, but they aren't called.

Now, for the isActive flag : you can use it.

To use it, you will have to read the decorator of the directive : 

@Directive({
  selector: '[routerLinkActive]',
  exportAs: 'routerLinkActive',
})

What is interesting is the second property, exportAs.

This property, as explained in the explanation of a directive does the following :

The name or names that can be used in the template to assign this directive to a variable. For multiple names, use a comma-separated string.

Without going too deep under the hood, (you can find examples of it throughout all the documentation), it allows you to associate a directive instance to a variable, through your template.

The notation for it is 

<div #myTemplateVariable="exportAsValue"></div>

In the case of the routerLinkActive directive, it would give

<div #RLO="routerLinkActive"></div>

But, exportAs don't create directives. Directives are created through their selector, remember ? And here, our selector is [routerLinkActive] : that means

Every HTML element that has a routerLinkActive attribute.

So you will need to add that selector : 

<div routerLinkActive #RLO="routerLinkActive"></div>

From there, you now have an instance of RouterLinkActive in your RLO variable.

This means you can now do 

<div *ngIf="RLO.isActive">This is displayed only if the router link of the element is active</div>

From now on, your div will only be displayed when the router link from your element is active.

I thinks I have explained the biggest part ...

... I hope this bunch of text helped you, and if you have any question, feel free to ask me and I'll answer you.

Upvotes: 4

Related Questions