In this article, I will share the creation and use of 2 attribute directives named appLink and appCapitalize in angular 13.
Directive appLink : has the task of displaying the corresponding background color of each card and checking if the value in the tag is a link, if it is valid, open the link to a new tab, if it is not, alert an error message.
Directive appCapitalize : is responsible for automatically capitalizing the first letter of each word when the user enters text from input or textarea.
- Create directive appLink
Run the command below to create the appLink directive
1 2 | ng generate directive link <span class="token operator">/</span> link |
After just running the above command, CLI will create 2 files src/app/link/link.directive.ts and src/app/link/link.directive.spec.ts and declare class LinkDirective in AppModule .
The default src/app/link/link.directive.ts code is as follows:
1 2 3 4 5 6 7 8 9 | <span class="token keyword">import</span> <span class="token punctuation">{</span> Directive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span> <span class="token punctuation">;</span> <span class="token decorator"><span class="token at operator">@</span> <span class="token function">Directive</span></span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> selector <span class="token operator">:</span> <span class="token string">'[appLink]'</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">LinkDirective</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Continue, update the logic code to src /app/link/link.directive.ts as below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <span class="token keyword">import</span> <span class="token punctuation">{</span> Directive <span class="token punctuation">,</span> ElementRef <span class="token punctuation">,</span> HostListener <span class="token punctuation">,</span> Input <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span> <span class="token punctuation">;</span> <span class="token decorator"><span class="token at operator">@</span> <span class="token function">Directive</span></span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> selector <span class="token operator">:</span> <span class="token string">'[appLink]'</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">LinkDirective</span> <span class="token punctuation">{</span> <span class="token decorator"><span class="token at operator">@</span> <span class="token function">Input</span></span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> appLink <span class="token operator">=</span> <span class="token string">''</span> <span class="token punctuation">;</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token keyword">private</span> el <span class="token operator">:</span> ElementRef <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token decorator"><span class="token at operator">@</span> <span class="token function">HostListener</span></span> <span class="token punctuation">(</span> <span class="token string">'mouseenter'</span> <span class="token punctuation">)</span> <span class="token function">onMouseEnter</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">highlight</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> appLink <span class="token operator">||</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> appLink <span class="token operator">||</span> <span class="token string">'red'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token decorator"><span class="token at operator">@</span> <span class="token function">HostListener</span></span> <span class="token punctuation">(</span> <span class="token string">'mouseleave'</span> <span class="token punctuation">)</span> <span class="token function">onMouseLeave</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">highlight</span> <span class="token punctuation">(</span> <span class="token string">''</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">private</span> <span class="token function">highlight</span> <span class="token punctuation">(</span> color <span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> el <span class="token punctuation">.</span> nativeElement <span class="token punctuation">.</span> style <span class="token punctuation">.</span> backgroundColor <span class="token operator">=</span> color <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> el <span class="token punctuation">.</span> nativeElement <span class="token punctuation">.</span> style <span class="token punctuation">.</span> cursor <span class="token operator">=</span> <span class="token string">'pointer'</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token decorator"><span class="token at operator">@</span> <span class="token function">HostListener</span></span> <span class="token punctuation">(</span> <span class="token string">'click'</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token string">'$event'</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token function">toogle</span> <span class="token punctuation">(</span> elem <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">isValidURL</span> <span class="token punctuation">(</span> elem <span class="token punctuation">.</span> target <span class="token punctuation">.</span> innerText <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> window <span class="token punctuation">.</span> <span class="token function">open</span> <span class="token punctuation">(</span> elem <span class="token punctuation">.</span> target <span class="token punctuation">.</span> innerText <span class="token punctuation">,</span> <span class="token string">"_blank"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token function">isValidURL</span> <span class="token punctuation">(</span> str <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> regex <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span> <span class="token regex-source language-regex">(?:https?)://(w+:?w*)?(S+)(:d+)?(/|/([w#!:.?+=&%!-/]))?</span> <span class="token regex-delimiter">/</span></span> <span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token operator">!</span> regex <span class="token punctuation">.</span> <span class="token function">test</span> <span class="token punctuation">(</span> str <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token string">"Please enter valid URL."</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token boolean">false</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token boolean">true</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
- ElementRef grants direct access to the DOM element through its nativeElement property.
- Add ElementRef in constructor() to refer to DOM element, which you apply in appLink .
Next update the code in src/app/app.component.html
Directive appLink is passed to the respective tags with and without the corresponding color parameter.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"container"</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"card"</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"card-header"</span> <span class="token operator">></span> Item check link <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"card-body"</span> <span class="token operator">></span> <span class="token operator"><</span> p appLink <span class="token operator">></span> https <span class="token operator">:</span> <span class="token operator">/</span> <span class="token operator">/</span> www <span class="token punctuation">.</span> facebook <span class="token punctuation">.</span> com <span class="token operator">/</span> <span class="token operator"><</span> <span class="token operator">/</span> p <span class="token operator">></span> <span class="token operator"><</span> h3 <span class="token punctuation">[</span> appLink <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">"'red'"</span> <span class="token operator">></span> angular <span class="token punctuation">.</span> iss <span class="token operator"><</span> <span class="token operator">/</span> h3 <span class="token operator">></span> <span class="token operator"><</span> a href <span class="token operator">=</span> <span class="token string">"#"</span> <span class="token punctuation">[</span> appLink <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">"'yellow'"</span> <span class="token operator">></span> https <span class="token operator">:</span> <span class="token operator">/</span> <span class="token operator">/</span> www <span class="token punctuation">.</span> google <span class="token punctuation">.</span> com <span class="token operator">/</span> <span class="token operator"><</span> <span class="token operator">/</span> a <span class="token operator">></span> <span class="token operator">&</span> nbsp <span class="token punctuation">;</span> <span class="token operator"><</span> span <span class="token punctuation">[</span> appLink <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">"'blue'"</span> <span class="token operator">></span> https <span class="token operator">:</span> <span class="token operator">/</span> <span class="token operator">/</span> www <span class="token punctuation">.</span> youtube <span class="token punctuation">.</span> com <span class="token operator"><</span> <span class="token operator">/</span> span <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> |
Ouput :
2.Create directive appCapitalize
- Run the following command to create the appCapitalize directive:
1 2 | ng generate directive capitalize/capitalize |
After just running the above comman, CLI will create 2 files src/app/capitalize/capitalize.directive.ts and src/app/capitalize/capitalize.directive.spec.ts and declare class CapitalizeDirective in AppModule .
The default src/app/capitalize/capitalize.directive.ts code is as follows:
1 2 3 4 5 6 7 8 9 | <span class="token keyword">import</span> <span class="token punctuation">{</span> Directive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span> <span class="token punctuation">;</span> <span class="token decorator"><span class="token at operator">@</span> <span class="token function">Directive</span></span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> selector <span class="token operator">:</span> <span class="token string">'[appCapitalize]'</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">CapitalizeDirective</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Continue, update the logic code to src/app/capitalize/capitalize.directive.ts as below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token keyword">import</span> <span class="token punctuation">{</span> Directive <span class="token punctuation">,</span> ElementRef <span class="token punctuation">,</span> HostListener <span class="token punctuation">,</span> Renderer2 <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span> <span class="token punctuation">;</span> <span class="token decorator"><span class="token at operator">@</span> <span class="token function">Directive</span></span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> selector <span class="token operator">:</span> <span class="token string">'[appCapitalize]'</span> <span class="token punctuation">,</span> host <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">'(input)'</span> <span class="token operator">:</span> <span class="token string">'onInputChange($event)'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">CapitalizeDirective</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token keyword">private</span> el <span class="token operator">:</span> ElementRef <span class="token punctuation">,</span> <span class="token keyword">private</span> render <span class="token operator">:</span> Renderer2 <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token function">onInputChange</span> <span class="token punctuation">(</span> event <span class="token operator">:</span> <span class="token builtin">any</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> result <span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">=</span> event <span class="token punctuation">.</span> target <span class="token punctuation">.</span> value <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> el <span class="token punctuation">.</span> nativeElement <span class="token punctuation">.</span> value <span class="token operator">=</span> result <span class="token punctuation">.</span> <span class="token function">replace</span> <span class="token punctuation">(</span> <span class="token regex"><span class="token regex-delimiter">/</span> <span class="token regex-source language-regex">wS*</span> <span class="token regex-delimiter">/</span> <span class="token regex-flags">g</span></span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> txt <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> txt <span class="token punctuation">.</span> <span class="token function">charAt</span> <span class="token punctuation">(</span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">toUpperCase</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">+</span> txt <span class="token punctuation">.</span> <span class="token function">substring</span> <span class="token punctuation">(</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">toLowerCase</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Next update the code in src/app/app.component.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"container"</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"card"</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"card-header"</span> <span class="token operator">></span> Item capitalize <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"card-body"</span> <span class="token operator">></span> <span class="token operator"><</span> p <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> p <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"form-group"</span> <span class="token operator">></span> <span class="token operator"><</span> input type <span class="token operator">=</span> <span class="token string">"text"</span> <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"form-control"</span> appCapitalize <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> p <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> p <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"form-group"</span> <span class="token operator">></span> <span class="token operator"><</span> textarea name <span class="token operator">=</span> <span class="token string">""</span> id <span class="token operator">=</span> <span class="token string">""</span> cols <span class="token operator">=</span> <span class="token string">"30"</span> rows <span class="token operator">=</span> <span class="token string">"10"</span> appCapitalize <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> textarea <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> |
Ouput :