Angular/文章内の文字列にリンクを付加する

Angular-Materialの<mat-form-field> 

<mat-form-field>は、いくつかのAngular Materialコンポーネントをラップし、下線、フローティングラベル、ヒントメッセージなどの一般的なテキストフィールドスタイルを適用するために使用されるコンポーネントです。<mat-form-field>がラップしているコンポーネント
　<input matNativeControl>
　<textarea matNativeControl>
　<select matNativeControl>
　<mat-select>
　<mat-chip-list>

フォームフィールドにネイティブの<input>または<textarea>要素が含まれている場合は、それにmatInputディレクティブを追加し、MatInputModuleをインポートしていることを確認してください。フォームフィールドコントロールとして機能できるその他のコンポーネントには、<mat-select>、<mat-chip-list>、および作成したカスタムフォームフィールドコントロールが含まれます。matInputは、ネイティブの<input>要素と<textarea>要素が<mat-form-field>と連携できるようにするディレクティブです。
<input>および<textarea>属性
通常の<input>要素と<textarea>要素で使用できるすべての属性は、<mat-form-field>内の要素でも使用できます。これには、ngModelやformControlなどのAngularディレクティブが含まれます。（type属性は1つのみ）

: テキストエリア要素 - HTML: ハイパーテキストマークアップ言語 | MDN

ディレクティブ（プログラミングにおける指示）

Angular には2種類の組み込みディレクティブがあります。属性 ディレクティブと構造 ディレクティブです。

属性ディレクティブ

他の HTML 要素、属性、プロパティ、コンポーネントの 動作をリッスンして変更します。 それらは通常、HTML の属性であるかのように要素に適用されます。 NgModule では独自の属性ディレクティブを定義しています。

NgClass - CSS クラスを追加および削除
NgStyle - HTML スタイルを追加および削除
NgModel - HTML の form 要素への双方向データバインディング

構造ディレクティブ

 HTML レイアウトを担当します。 ホスト要素に対する追加、削除、加工といった、 DOM 構造の形成、または再形成を行います。

NgIf—条件に応じてテンプレートからサブビューを作成、破棄。
NgFor—リストの各項目に対してノード繰り返し。
NgSwitch—いくつかのビューから選んで表示。

[(ngModel)]: 双方向バインディング 

NgModel ディレクティブを使うと、データプロパティを表示したり、 ユーザー操作に応じてプロパティを更新したりすることができます。

前）
<label for="without">without NgModel:</label>
<input [value]="currentItem.name"
 (input)="currentItem.name=$event.target.value" id="without">

後）
<label for="example-change">(ngModelChange)="...name=$event":</label>
<input [ngModel]="currentItem.name"
 (ngModelChange)="currentItem.name=$event" id="example-change">

ngModel データプロパティは要素の値プロパティを設定し、 ngModelChange イベントプロパティは要素の値の変更をリッスンします。

thanks

Angular 日本語ドキュメンテーション

文章内の文字列にリンクを付加する

古い？

AngularでビューにHTML文書を「バインド」するには？（Property Binding）

↓こっちが正解？

Webアプリケーション脆弱性に対する Angularでの対応

Angular Example - Content Security - StackBlitz

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

@Component({
 selector: 'app-root',
 template: `
 <h1>Security</h1>
  <app-bypass-security></app-bypass-security>
 `
})
export class AppComponent {
}

bypass-security.component.ts

import { Component } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

@Component({
 selector: 'app-bypass-security',
 templateUrl: './bypass-security.component.html',
})
export class BypassSecurityComponent {
 dangerousUrl: string;
 trustedUrl: SafeUrl;

 constructor(private sanitizer: DomSanitizer) {
   this.dangerousUrl = 'https://angular.jp/guide/dynamic-component-loader';
   this.trustedUrl = sanitizer.bypassSecurityTrustUrl(this.dangerousUrl);
 }
}

bypass-security.component.html

<p><a [href]="trustedUrl" target="_blank" rel="noopener noreferrer">
 Click me</a></p>

補間 {{...}} Interpolation

Angular が最初に 評価 してから 文字列に変換する テンプレート式です。
Angular が プロパティバインディング に変換する特別な構文です。

<p>{{title}}</p>
<div><img src="{{itemImageUrl}}"></div>
<h3>Current customer: {{ currentCustomer }}</h3>

<p>The sum of 1 + 1 is {{1 + 1}}.</p>

{{...}}内のテキストは、多くの場合、コンポーネントのプロパティ名です。title プロパティと itemImageUrl プロパティを評価して空白を埋めます。Angular は、二重中括弧内のすべての式を評価し、式の結果を文字列に変換して、 それらを隣接するリテラル文字列とリンクします。 最後に、この合成補間の結果を 要素またはディレクティブのプロパティ に割り当てます。

Angular Example - Interpolation - StackBlitz

テンプレート式 

テンプレート 式 は値を生成し、 {{ }} 内に表示します。 Angularは 式を実行し、それをバインディングターゲットのプロパティに割り当てます。 ターゲットは HTML 要素、コンポーネント、またはディレクティブです。

{{1 + 1}} 内の1 + 1 はテンプレート式 です。 プロパティバインディングでは、[property]="expression" のように、テンプレート式は = 記号の右側の引用符で囲まれます。

<h4>{{recommended}}</h4>
<img [src]="itemImageUrl2">

<ul>
 <li *ngFor="let customer of customers">{{customer.name}}</li>
</ul>

<label>Type something:
 <input #customerInput>{{customerInput.value}}
</label>

テンプレート入力変数 let customer
テンプレート参照変数 (#var)：
ハッシュ記号 (#) を使うことで参照変数を宣言できます。 <input> を参照する customerInput 変数を宣言します。

Angular Example - Template Syntax Collection - StackBlitz

セレクター

すべてのコンポーネントにはCSSセレクターが必要です。セレクターは、テンプレートHTMLで対応するタグが見つかると、このコンポーネントをインスタンス化するようにAngularに指示します。

たとえば、セレクターをapp-hello-worldとして定義するコンポーネントhello-world.component.tsについて、このセレクターは、テンプレート内のタグ<app-hello-world>がいつでもこのコンポーネントをインスタンス化するようにangularに指示します。

テンプレート

AngularのHTMLテンプレート。 HTMLのセクションであり、ブラウザが表示するページの一部分として含めることができます。 

Angular Example - Template Syntax Collection - StackBlitz

<app-big-hero-detail
   (deleteRequest)="deleteHero($event)"
   [hero]="currentHero">
</app-big-hero-detail>

@Component({
 selector: 'app-big-hero-detail',
 template: `
 <div class="detail">
   <img src="{{heroImageUrl}}">
   <div><b>{{hero?.name}}</b></div>
   <div>Name: {{hero?.name}}</div>
   <div>Emotion: {{hero?.emotion}}</div>
   <div>Birthdate: {{hero?.birthdate | date:'longDate'}}</div>
   <div>Web: <a href="{{hero?.url}}" target="_blank">{{hero?.url}}</a></div>
   <div>Rate/hr: {{hero?.rate | currency:'EUR'}}</div>
   <br clear="all">
   <button (click)="delete()">Delete</button>
 </div>
 `,
 styles: [`
   .detail { border: 1px solid black; padding: 4px; max-width: 450px; }
   img     { float: left; margin-right: 8px; height: 100px; }
 `]
})
export class BigHeroDetailComponent extends HeroDetailComponent {

 @Input()  hero: Hero;
 @Output() deleteRequest = new EventEmitter<Hero>();

 delete() {
   this.deleteRequest.emit(this.hero);
 }
}

文字列置換例

古い

   var re_url = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
   var re_mail = /((?:\w+\.?)*\w+@(?:\w+\.)+\w+)/gi;

   s = s.replace(re_url, '<a href="$1" target="_blank">$1</a>');
   s = s.replace(re_mail, '<a href="mailto:$1">$1</a>'); 

いまは、string.link()で文字にリンクを設定することができます。

cc