Tạo và sử dụng một attribute directive trong Angular 13

Thứ Ba, 04/10/2022

Tram Ho

Trong bài viết này mình sẽ chia sẻ các tạo và sử dụng 2 attribute directive với tên là appLink và appCapitalize trong angular 13.
Directive appLink: có nhiệm vụ hiện thị màu background tương ứng của từng thẻ và check xem giá trị trong thẻ có phải là một link hay không, nếu hợp lệ thì mở link sang tab mới, không hợp lệ thì alert thông báo lỗi.
Directive appCapitalize: có nhiệm vụ tự động viết hoa chữ cái đầu tiên của mỗi từ khi người dụng nhập text vào from input hoặc textarea.

Tạo directive appLink

Chạy command bên dưới để tạo directive appLink

ng generate directive link<span class="token operator">/</span>link

1 2	ng generate directive link<span class="token operator">/</span>link

Sau chi chạy command trên, CLI sẽ tạo 2 file src/app/link/link.directive.ts và src/app/link/link.directive.spec.ts và khai báo class LinkDirective trong AppModule.
Code src/app/link/link.directive.ts mặc định như sau:

<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>

import { Directive } from '@angular/core';

@Directive({

selector: '[appLink]'

})

export class LinkDirective {

constructor() { }

}

Tiếp tục, cập nhật logic code vào src /app/link/link.directive.ts như dưới:

<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#!:.?+=&amp;%!-/]))?</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>

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

selector: '[appLink]'

})

export class LinkDirective {

@Input() appLink = '';

@HostListener('mouseenter') onMouseEnter() {

this.highlight(this.appLink || this.appLink || 'red');

}

@HostListener('mouseleave') onMouseLeave() {

}

private highlight(color: string) {

}

@HostListener('click', ['$event']) toogle(elem){

if (this.isValidURL(elem.target.innerText)) {

window.open(elem.target.innerText, "_blank");

}

isValidURL(str) {

var regex = /(?:https?)://(w+:?w*)?(S+)(:d+)?(/|/([w#!:.?+=&%!-/]))?/;

if(!regex .test(str)) {

alert("Please enter valid URL.");

return false;

} else {

return true;

}

ElementRef cấp quyền truy cập trực tiếp vào phần tử DOM thông qua thuộc tính nativeElement của nó.
Thêm ElementRef trong constructor() để tham chiếu đến phần tử DOM , phần tử mà bạn áp dụng trong appLink.

Tiếp theo cập nhật code trong src/app/app.component.html
Directive appLink được truyền vào các thẻ tương ứng bao gồm có tham số và không có tham số màu tương ứng.

<span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"container"</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card"</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card-header"</span><span class="token operator">&gt;</span>
          Item check link
        <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card-body"</span><span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>p appLink<span class="token operator">&gt;</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">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</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">&gt;</span>angular<span class="token punctuation">.</span>iss<span class="token operator">&lt;</span><span class="token operator">/</span>h3<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</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">&gt;</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">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span><span class="token operator">&amp;</span>nbsp<span class="token punctuation">;</span>
            <span class="token operator">&lt;</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">&gt;</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">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

Item check link

</div>

<p appLink>https://www.facebook.com/</p>

<h3 [appLink]="'red'">angular.iss</h3>

<a href="#" [appLink]="'yellow'">https://www.google.com/</a>&nbsp;

<span [appLink]="'blue'">https://www.youtube.com</span>

</div>

Ouput:

Bây giờ các bạn hãy dê chuột và click vào từng thẻ để xem kết quả nhé

2.Tạo directive appCapitalize

Chạy command sau để tạo directive appCapitalize:

ng generate directive capitalize/capitalize

1 2	ng generate directive capitalize/capitalize

Sau chi chạy comman trên, CLI sẽ tạo 2 file src/app/capitalize/capitalize.directive.ts và src/app/capitalize/capitalize.directive.spec.ts và khai báo class CapitalizeDirective trong AppModule.
Code src/app/capitalize/capitalize.directive.ts mặc định như sau:

<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>

selector: '[appCapitalize]'

})

export class CapitalizeDirective {

}

Tiếp tục, cập nhật logic code vào src/app/capitalize/capitalize.directive.ts như dưới:

<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>

import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';

selector: '[appCapitalize]',

host: {

'(input)' : 'onInputChange($event)'

}

})

export class CapitalizeDirective {

constructor(private el: ElementRef, private render: Renderer2) { }

onInputChange(event: any) {

let result: string = event.target.value;

this.el.nativeElement.value = result.replace(/wS*/g, function(txt){

return txt.charAt(0).toUpperCase() + txt.substring(1).toLowerCase();

})

}

Tiếp theo cập nhật code trong src/app/app.component.html

<span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"container"</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card"</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card-header"</span><span class="token operator">&gt;</span>
          Item capitalize
        <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card-body"</span><span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>p<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"form-group"</span><span class="token operator">&gt;</span>
                <span class="token operator">&lt;</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">&gt;</span>
            <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
            
            <span class="token operator">&lt;</span>p<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"form-group"</span><span class="token operator">&gt;</span>
                <span class="token operator">&lt;</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">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>textarea<span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>

Item capitalize

</div>

<p></p>

</div>

<p></p>

</div>

Ouput:

Như các bạn thấy, từ đầu tiên của mỗi từ trong input sẽ tự động viết hoa khi chúng ta nhập giá trị vào input hoặc textarea vào nhé!

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Tạo và sử dụng một attribute directive trong Angular 13

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript