30 seconds of angularダウンロード30 seconds of angularソースコードダウンロード

ロゴ30秒の角度

30秒以内に理解できる有用な角度スニペットのキュレーションコレクション。

ctrl + fまたはcommand + fを使用して、スニペットを検索します。
スニペットは角度8+で書かれています。

30秒の角度

テンプレート内の列挙にアクセスします
チートシートとチェックリスト
コンポーネント状態デバッグ
デフォルトのviewEncapsulation値
Hammerjs-Gestures
ローダーコンポーネント
ngコンテンツ
ngif else
中央のオプションのパラメーター
入力と出力の名前変更
安全なナビゲーションオペレーター
ループのトラックイン
マイクロシンダックスの理解

中間スニペット

ネストされたすべてのフォームコントロールにアクセスします
要素にキーボードショートカットを追加します
ホストバインディングでホストプロパティにバインドします
コンポーネントレベルプロバイダー
グローバルイベントリスナー
ドキュメントの注入
触れたようにリアクティブフィールドをマークします
出力としてのオブザーバブル
入力としてテンプレートを渡します
ホワイトスペースを前提としています
テンプレートでコードを再利用します
Reusing existing custom pipes
スタイルバインディング
双方向のバインディング任意のプロパティ
app_initializerを使用してAPPの開始を遅らせます
ウィンドウの位置噴射

高度なスニペット

ViewChildでさまざまなタイプのコンポーネントを取得します
ルーターカスタムプリロード
SVG

初心者のスニペット

テンプレート内の列挙にアクセスします

列挙は素晴らしいですが、デフォルトではAngularテンプレートには見えません。この小さなトリックで、あなたはそれらにアクセスしやすくすることができます。

 enum Animals {
  DOG ,
  CAT ,
  DOLPHIN
}

@ Component ( {
  ...
} )
export class AppComponent {
  animalsEnum : typeof Animals = Animals ;
}

このスニペットのインタラクティブなデモ| topに戻る|タグ：enumsテンプレート

チートシートとチェックリスト

Angularチートシートまたは（代替バージョン）を1か所に凝縮した多くの有用な情報を含む（代替バージョン）をご覧ください。

また、Angular Checklistには、Angularアプリケーションの開発時に行われた一般的なミスのキュレーションリストが含まれています。

リンク

https://malcoded.com/angular-cheat-sheet/,https://angular.io/guide/cheatsheet、https://angular.io/guide/styleguide

このスニペットのインタラクティブなデモ| topに戻る|タグ：チートチートシート

コンポーネント状態デバッグ

実行して、ブラウザコンソールのコンポーネント状態をデバッグします。

 ng . probe ( $0 ) . componentInstance

$0 -DOMノードは現在開発ツールで選択されています（前のツールで$1など）。

ボーナス

アイビーレンダラーエンジンで：

 ng . getComponent ( $0 )

リンク

https://blog.angularIndepth.com/everything-you-need-to-bugging-debugging-angular-applications-d308ed8a51b4

このスニペットのインタラクティブなデモ| topに戻る|タグ：知識のあるヒント

デフォルトのviewEncapsulation値

デフォルトとは異なるViewEncapsulation値を使用している場合、すべてのコンポーネントで値を手動で設定することは困難な場合があります。

幸いなことに、アプリをブートストラップするときにグローバルに構成できます。

 platformBrowserDynamic ( ) . bootstrapModule ( AppModule , [
  {
    // NOTE: Use ViewEncapsulation.None only if you know what you're doing.
    defaultEncapsulation : ViewEncapsulation . None
  }
] ) ;

このスニペットのインタラクティブなデモ| topに戻る|タグ：構成スタイリング

Hammerjs-Gestures

他のモバイルジェスチャーと同様に、スワイプ、フライパン、ピンセスに作用するには、 HostListenerデコレータを備えたhammerjsまたはイベントバインディングを使用できます。

npm install hammerjs

@ HostListener ( 'swiperight' )
public swiperight ( ) : void {
  // Run code when a user swipes to the right
}

ボーナス

すべてのhammerjsイベントバインディングの使用方法に関するサンプルは次のとおりです。これらのイベントもHostListenerで使用できます。

  <!-- pan events -->
  < div (pan) =" logEvent($event) " > </ div >
  < div (panstart) =" logEvent($event) " > </ div >
  < div (panmove) =" logEvent($event) " > </ div >
  < div (panend) =" logEvent($event) " > </ div >
  < div (pancancel) =" logEvent($event) " > </ div >
  < div (panleft) =" logEvent($event) " > </ div >
  < div (panright) =" logEvent($event) " > </ div >
  < div (panup) =" logEvent($event) " > </ div >
  < div (pandown) =" logEvent($event) " > </ div >

  <!-- pinch events -->
  < div (pinch) =" logEvent($event) " > </ div >
  < div (pinchstart) =" logEvent($event) " > </ div >
  < div (pinchmove) =" logEvent($event) " > </ div >
  < div (pinchend) =" logEvent($event) " > </ div >
  < div (pinchcancel) =" logEvent($event) " > </ div >
  < div (pinchin) =" logEvent($event) " > </ div >
  < div (pinchout) =" logEvent($event) " > </ div >

  <!-- press events -->
  < div (press) =" logEvent($event) " > </ div >
  < div (pressup) =" logEvent($event) " > </ div >

  <!-- rotate events -->
  < div (rotate) =" logEvent($event) " > </ div >
  < div (rotatestart) =" logEvent($event) " > </ div >
  < div (rotatemove) =" logEvent($event) " > </ div >
  < div (rotateend) =" logEvent($event) " > </ div >
  < div (rotatecancel) =" logEvent($event) " > </ div >

  <!-- swipe events -->
  < div (swipe) =" logEvent($event) " > </ div >
  < div (swipeleft) =" logEvent($event) " > </ div >
  < div (swiperight) =" logEvent($event) " > </ div >
  < div (swipeup) =" logEvent($event) " > </ div >
  < div (swipedown) =" logEvent($event) " > </ div >

  <!-- tap event -->
  < div (tap) =" logEvent($event) " > </ div >

リンク

https://github.com/angular/angular/blob/master/packages/platform-browser/src/dom/events/hammer_gestures.ts,http://hammerjs.github.io/api/#hammer.manager,https://angurar.io/api/api/platffffffrigf-brun

このスニペットのインタラクティブなデモ| topに戻る|タグ：適切なヒントコンポーネントジェスチャー

ローダーコンポーネント

独自のヘルパーコンポーネントを作成し、 *ngIfの代わりに使用できます。

@ Component ( {
  selector : 'loader' ,
  template : `
    <ng-content *ngIf="!loading else showLoader"></ng-content>
    <ng-template #showLoader>? Wait 10 seconds!</ng-template>
  `
} )
class LoaderComponent {
  @ Input ( ) loading : boolean ;
}

使用例：

 < loader [loading] =" isLoading " > ? ? ? </ loader >

コンテンツは熱心に評価されることに注意してください。たとえば、下のスニペットではdestroy-the-worldが始まる前に作成される前に作成されることに注意してください。

 < loader [loading] =" isLoading " > < destroy-the-world > </ destroy-the-world > </ loader >

リンク

https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b、https://blog.angularindepth.com/https-com-thomasburleson-anmated-ghosts-bfc045a51fba

このスニペットのインタラクティブなデモ| topに戻る|タグ：ヒント良好なコンポーネントテンプレート

ngコンテンツ

ng-contentを使用すると、任意の要素をコンポーネントに渡すことができます。これにより、再利用可能なコンポーネントの作成が簡素化されます。

@ Component ( {
  selector : 'wrapper' ,
  template : `
    <div class="wrapper">
      <ng-content></ng-content>
    </div>
  ` ,
} )
export class Wrapper { }

 < wrapper >
  < h1 > Hello World! </ h1 >
</ wrapper >

リンク

https://medium.com/p/96a29d70d11b

このスニペットのインタラクティブなデモ| topに戻る|タグ：適切なヒントコンポーネント

ngif else

*ngIf指令は、 else Statementもサポートしています。

 < div *ngIf =" isLoading; else notLoading " > loading... </ div >

< ng-template #notLoading > not loading </ ng-template >

このスニペットのインタラクティブなデモ| topに戻る|タグ：NGIFテンプレート

中央のオプションのパラメーター

マトリックスパラメーションでナビゲートします：

ルーターは/first;name=foo/detailsに移動します

 < a [routerLink] =" ['/', 'first', {name: 'foo'}, 'details'] " >
  link with params
</ a >

リンク

https://stackblitz.com/edit/angular-xvy5pd

このスニペットのインタラクティブなデモ| topに戻る|タグ：ルーティング

入力と出力の名前変更

特定の場合、 @Inputおよび@Outputプロパティは、実際の入力と出力とは異なる名前を付けます。

 < div 
  pagination 
  paginationShowFirst =" true "
  (paginationPageChanged) =" onPageChanged($event) " >
</ div >

@ Directive ( { selector : '[pagination]' } )
class PaginationComponent {
  @ Input ( 'paginationShowFirst' ) 
  showFirst : boolean = true ;

  @ Output ( 'paginationPageChanged' ) 
  pageChanged = new EventEmitter ( ) ;
}

注：これを賢く使用してください。StyleGuideの推奨を参照してください

リンク

https://angular.io/guide/styleguide#style-05-13

このスニペットのインタラクティブなデモ| topに戻る|タグ：コンポーネントテンプレート

安全なナビゲーションオペレーター

安全なナビゲーションオペレーターは、コンポーネントテンプレート式でのヌルリファレンスの例外を防ぐのに役立ちます。それが存在する場合、またはそれ以外の場合はnullでオブジェクトプロパティ値を返します。

 < p > I will work even if student is null or undefined: {{student?.name}} </ p >

ボーナス

{{a?.b?.c}}

下にコンパイルされます。

(_co.a == null)? null: ((_co.a.b == null)? null: _co.a.b.c));

リンク

角/角度＃791

このスニペットのインタラクティブなデモ| topに戻る|タグ：オブジェクトプロパティの処理のヒントを知っておくといいです

ループのトラックイン

高価な操作を回避するために、Angularが追加または削除されたアイテムを追跡するのを支援できます。IEは、NGForOFにトラックごとのオプションを提供することにより、デフォルトの追跡アルゴリズムをカスタマイズします。

そのため、反復済みのアイテムごとに一意の識別子を返すカスタムトラックごとの関数を提供できます。たとえば、アイテムの重要な値。このキー値が前の値と一致する場合、Angularは変更を検出しません。

Trackbyは、インデックスとアイテムのArgsを持つ関数を取ります。

@ Component ( {
  selector : 'my-app' ,
  template : `
    <ul>
      <li *ngFor="let item of items; trackBy: trackByFn">{{item.id}}</li>
    </ul>
  `
} )
export class AppComponent { 
  trackByFn ( index , item ) {
    return item . id ;
  }
}

Trackbyが与えられた場合、Angularトラックは関数の返品値によって変化します。

コレクションを変更すると、Angularは一意の識別子に従って追加または削除されたアイテムを追跡し、変更されたアイテムのみを作成/破壊することができます。

リンク

https://angular.io/api/common/ngforof,https://angular.io/api/core/trackbyfunction

このスニペットのインタラクティブなデモ| topに戻る|タグ：適切なヒントコンポーネントパフォーマンス

マイクロシンダックスの理解

ボンネットの下で、角度の下で構造指令をng-template要素にコンパイルします。

 <!-- This -->
< div *ngFor =" let item of [1,2,3] " >

<!-- Get expanded into this -->
< ng-template ngFor [ngForOf] =" [1,2,3] " let-item =" $implicit " > </ ng-template >

*ngforディレクティブに渡される値は、microsyntaxを使用して記述されます。ドキュメントでそれについて学ぶことができます。

また、Alexey Zuevによる拡張を示すインタラクティブツールもチェックしてください

リンク

https://angular.io/guide/structural-directives#microsyntax、https://alexzuza.github.io/ng-structural-directive-expander/,https://angular.io/guide/structural-directives #insidedindgfor

このスニペットのインタラクティブなデモ| topに戻る|タグ：TIP Structural Directive Microsyntax

中間スニペット

ネストされたすべてのフォームコントロールにアクセスします

すべてのコントロールをフォームで作業する必要がある場合があります。これがどのように行われるかは次のとおりです。

 function flattenControls ( form : AbstractControl ) : AbstractControl [ ] {
  let extracted : AbstractControl [ ] = [ form ] ;
  if ( form instanceof FormArray || form instanceof FormGroup ) {
    const children = Object . values ( form . controls ) . map ( flattenControls ) ;
    extracted = extracted . concat ( ... children ) ;
  }
  return extracted ;
}

例の場合：

 // returns all dirty abstract controls
flattenControls ( form ) . filter ( ( control ) => control . dirty ) ;

// mark all controls as touched
flattenControls ( form ) . forEach ( ( control ) => 
    control . markAsTouched ( { onlySelf : true } ) ) ;

リンク

https://angular.io/guide/reative-forms

このスニペットのインタラクティブなデモ| topに戻る|タグ：リアクティブフォームのヒントを知っておくと良いものです

要素にキーボードショートカットを追加します

テンプレートにキーボードショートカットを追加するのは本当に簡単です。

 < textarea (keydown.ctrl.enter) =" doSomething() " > </ textarea >

ボーナス

 < input (keydown.enter) =" ... " >
< input (keydown.a) =" ... " >
< input (keydown.esc) =" ... " >
< input (keydown.shift.esc) =" ... " >
< input (keydown.control) =" ... " >
< input (keydown.alt) =" ... " >
< input (keydown.meta) =" ... " >
< input (keydown.9) =" ... " >
< input (keydown.tab) =" ... " >
< input (keydown.backspace) =" ... " >
< input (keydown.arrowup) =" ... " >
< input (keydown.shift.arrowdown) =" ... " >
< input (keydown.shift.control.z) =" ... " >
< input (keydown.f4) =" ... " >

リンク

https://alligator.io/angular/binding-keyup-keydown-events

このスニペットのインタラクティブなデモ| topに戻る|タグ：知っておくべきヒント

ホストバインディングでホストプロパティにバインドします

すべてのレンダリングされた角度コンポーネントは、ホスト要素（コンポーネントのセレクターと同じ）に包まれています。

@Hostbindingデコレータを使用して、ホスト要素のプロパティと属性をバインドすることが可能です。

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

@ Component ( {
   selector : 'my-app' , 
   template : `
    <div>Use the input below  to select host background-color:</div>
    <input type="color" [(ngModel)]="color"> 
  ` ,
  styles : [
    `:host { display: block; height: 100px; }`
  ]
} )
export class AppComponent {
  @ HostBinding ( 'style.background' ) color = '#ff9900' ;
}

このスニペットのインタラクティブなデモ| topに戻る|タグ：コンポーネント

コンポーネントレベルプロバイダー

通常、アプリケーション全体に1つのサービスインスタンスを取得します。コンポーネントごとにサービスのインスタンスを作成することもできます。

@ Component ( {
  selector : 'provide' ,
  template : '<ng-content></ng-content>' ,
  providers : [ Service ]
} )
export class ProvideComponent { }

@ Directive ( {
  selector : '[provide]' ,
  providers : [ Service ]
} )
export class ProvideDirective { }

リンク

https://angular.io/guide/hierarchical-dependency-injection-component-level-injectors,https://stackblitz.com/edit/angular-cdk-happy-animals

このスニペットのインタラクティブなデモ| topに戻る|タグ：ヒントコンポーネント依存性への注射

グローバルイベントリスナー

HostListenerを使用して、コンポーネント/ディレクティブにグローバルイベントリスナーを追加することができます。 Angularは、あなたの指令が破壊されると、登録解除の世話をします。

@ Directive ( {
  selector : '[rightClicker]'
} )
export class ShortcutsDirective {
  @ HostListener ( 'window:keydown.ArrowRight' )
  doImportantThings ( ) {
    console . log ( 'You pressed right' ) ;
  }
}

ボーナス

複数のバインディングを使用できます。

@ HostListener ( 'window:keydown.ArrowRight' )
@ HostListener ( 'window:keydown.PageDown' )
next ( ) {
  console . log ( 'Next' )
}

パラメーションを渡すこともできます：

@ HostListener ( 'window:keydown.ArrowRight' , '$event.target' )
next ( target ) {
  console . log ( 'Pressed right on this element: ' + target )
}

このスニペットのインタラクティブなデモ| topに戻る|タグ：イベントコンポーネント

ドキュメントの注入

グローバルdocumentにアクセスする必要がある場合があります。

ユニットテストを簡素化するために、Angularは依存関係の注入を通じてそれを提供します。

 import { DOCUMENT } from '@angular/common' ;
import { Inject } from '@angular/core' ;

@ Component ( {
  selector : 'my-app' ,
  template : `<h1>Edit me </h1>`
} )
export class AppComponent {

  constructor ( @ Inject ( DOCUMENT ) private document : Document ) {
    // Word with document.location, or other things here....
  }
}

リンク

https://angular.io/api/common/document

このスニペットのインタラクティブなデモ| topに戻る|タグ：依存関係インジェクション

触れたようにリアクティブフィールドをマークします

以下は、非検証値のフィールドがあることをユーザーに通知する方法です。

引数としてのmarkFieldsAsTouched Function FormGroupまたはFormArray。

 function markFieldsAsTouched ( form : AbstractControl ) : void {
  form . markAsTouched ( { onlySelf : true } ) ;
  if ( form instanceof FormArray || form instanceof FormGroup ) {
    Object . values ( form . controls ) . forEach ( markFieldsAsTouched ) ;
  }
}

ボーナス

Thekibaがネストされたすべてのフォームコントロールにアクセスして、コントロールを使用するために、より一般的な方法をチェックすることは非常に便利です。

リンク

https://angular.io/guide/reative-forms

このスニペットのインタラクティブなデモ| topに戻る|タグ：リアクティブフォーム検証のヒント知っておくと良い

出力としてのオブザーバブル

@OutputのSに使用されるEventEmitters 、EMITメソッドを備えた観測可能です。

これは、代わりにObservableインスタンスを使用できることを意味します。たとえば、FormControl値の変更を直接配線することができます。

 readonly checkbox = new FormControl ( ) ;
@ Output ( ) readonly change = this . checkbox . valueChanges ;

このスニペットのインタラクティブなデモ| topに戻る|タグ：チップ出力

入力としてテンプレートを渡します

コンポーネントのテンプレートを@Inputとして使用して、レンダリングをカスタマイズすることができます

@ Component ( {
  template : `
    <nav>
      <ng-container *ngTemplateOutlet="template"></ng-container>
    </nav>
  ` ,
} )
export class SiteMenuComponent  {
  @ Input ( ) template : TemplateRef < any > ;
}

 < site-menu [template] =" menu1 " > </ site-menu >

< ng-template #menu1 >
  < div > < a href =" # " > item1 </ a > </ div >
  < div > < a href =" # " > item2 </ a > </ div >
</ ng-template >

Note: ng-content should be used for most of the cases and it's simpler and more declarative. NGコンテンツでは達成できない特別な柔軟性が必要な場合にのみ、このアプローチを使用してください。

リンク

https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet

このスニペットのインタラクティブなデモ| topに戻る|タグ：テンプレート

ホワイトスペースを前提としています

デフォルトでは、Angularはすべてのホワイトスペースをテンプレートに入れてバイトを保存します。一般的に安全です。

スペースを保存する必要がある場合は、特別なngPreserveWhitespaces属性を使用できます。

 < div ngPreserveWhitespaces >
             (___()'`;
             /,    /`
       jgs   \"--\
</ div >

コンポーネントでPreserveWhitespacesオプションを使用することもできます。

リンク

https://twitter.com/mgechev/status/110891338927839360

このスニペットのインタラクティブなデモ| topに戻る|タグ：ヒント

テンプレートでコードを再利用します

コードを再利用する最良の方法はコンポーネントを作成することですが、テンプレートでそれを行うことも可能です。

これを行うには、 *ngTemplateOutletディレクティブとともにng-templateを使用できます。

 < p >
  < ng-container *ngTemplateOutlet =" fancyGreeting " > </ ng-container >
</ p >

< button >
  < ng-container *ngTemplateOutlet =" fancyGreeting " > </ ng-container >    
</ button >

< ng-template #fancyGreeting >
  Hello < b > {{name}}! </ b >
</ ng-template >

リンク

https://angular.io/api/common/ngtemplateoutlet,https://angular.io/guide/structural-directives#the-ng-template

このスニペットのインタラクティブなデモ| topに戻る|タグ：テンプレート

既存のカスタムパイプの再利用

カスタムpipeを作成する前に、カスタムパイプが必要な場合は、すでに70+が既にインプレメットされたカスタムパイプを備えたNGXパイプパッケージをチェックすることを検討してください。

ここにいくつかの例があります：

 < p > {{ date | timeAgo }} </ p > 
<!-- Output: "last week" -->

< p > {{ 'foo bar' | ucfirst }} </ p >
<!-- Output: "Foo bar" -->

< p > 3 {{ 'Painting' | makePluralString: 3 }} </ p >
<!-- Output: "3 Paintings" -->

< p > {{ [1, 2, 3, 1, 2, 3] | max }} </ p >
<!-- Output: "3" -->

リンク

https://github.com/danrevah/ngx-pipes

このスニペットのインタラクティブなデモ| topに戻る|タグ：チップパイプライブラリ

スタイルバインディング

Advanced Property Bindingsを使用して、コンポーネントプロパティ値に基づいて特定のスタイル値を設定できます。

 < p [style.background-color] =" 'green' " >
  I am in green background
</ p >

< p [style.font-size.px] =" isImportant ? '30' : '16' " >
  May be important text.
</ p >

ボーナス

 <!-- Width in pixels -->
< div [style.width.px] =" pxWidth " > </ div >

<!-- Font size in percentage relative to the parent -->
< div [style.font-size.%] =" percentageSize " > ... </ div >

<!-- Height relative to the viewport height -->
< div [style.height.vh] =" vwHeight " > </ div >

このスニペットのインタラクティブなデモ| topに戻る|タグ：スタイル

双方向のバインディング任意のプロパティ

双方向バインド[(ngModel)]可能性と同様に、 [(value)]など、コンポーネントで双方向バインドカスタムプロパティができます。それを行うには、適切な入力/出力命名を使用します。

@ Component ( {
  selector : 'super-input' , 
  template : `...` ,
} )
export class AppComponent {
  @ Input ( ) value : string ;
  @ Output ( ) valueChange = new EventEmitter < string > ( ) ;
}

次に、次のように使用できます。

 < super-input [(value)] =" value " > </ super-input >

このスニペットのインタラクティブなデモ| topに戻る|タグ：チップバインディング

app_initializerを使用してAPPの開始を遅らせます

APP_INITIALIZERトークンを使用して約束を返す関数を提供することから、アプリが開始する前に、非同期タスクを実行することができます。

@ NgModule ( {
  providers : [
    {
      provide : APP_INITIALIZER ,
      useValue :  functionReturningPromise
      multi : true
    } ,
} )
export class AppModule { }

リンク

https://hackernoon.com/hook-into-angular-initialization-process-add41a6b7e、https://angular.io/api/core/app_initializer

このスニペットのインタラクティブなデモ| topに戻る|タグ：ヒント

ウィンドウの位置噴射

テストのために、コンポーネントにwindow.locationオブジェクトを挿入することをお勧めします。 Angularが提供するカスタムInjectionTokenメカニズムでこれを達成できます。

 export const LOCATION_TOKEN = new InjectionToken < Location > ( 'Window location object' ) ;

@ NgModule ( {
  providers : [
    { provide : LOCATION_TOKEN , useValue : window . location }
  ]
} )
export class SharedModule { }

//...

@ Component ( {
} )
export class AppComponent {
  constructor (
    @ Inject ( LOCATION_TOKEN ) public location : Location
  ) { }
}

リンク

https://itnext.io/testing-browser-window-location-in-angular-application-e4e8388508ff,https://angular.io/guide/dependency-injection

このスニペットのインタラクティブなデモ| topに戻る|タグ：依存関係の注射テスト

高度なスニペット

ViewChildでさまざまなタイプのコンポーネントを取得します

@ViewChild （ @ViewChildrenおよび@ContentChild/Children ）を使用して、依存関係のインジェクションを使用してさまざまなタイプのコンポーネントをクエリすることができます。

以下の例では@ViewChildren(Base)を使用して、 FooとBarのインスタンスを取得できます。

 abstract class Base { }

@ Component ( {
  selector : 'foo' ,
  providers : [ { provide : Base , useExisting : Foo } ]
} )
class Foo extends Base { }

@ Component ( {
  selector : 'bar' ,
  providers : [ { provide : Base , useExisting : Bar } ]
} )
class Bar extends Base { }

// Now we can require both types of components using Base.
@ Component ( { template : `<foo></foo><bar></bar>` } )
class AppComponent {
  @ ViewChildren ( Base ) components : QueryList < Base > ;
}

リンク

https://www.youtube.com/watch?v=prrgo6f0cjs

このスニペットのインタラクティブなデモ| topに戻る|タグ：適切なヒントコンポーネントの依存性への注射

ルーターカスタムプリロード

Angularを使用すると、モジュールのプリロードの処理方法を制御できます。

@Angular/Router ： PreloadAllModulesとNoPreloadingによって提供される2つの戦略があります。後者はデフォルトで有効になり、オンデマンドで怠zyなモジュールをプリロードします。

カスタムプリロード戦略を提供することにより、この動作をオーバーライドできます。以下の例では、接続が良好な場合はすべてのモジュールをすべてプリロードします。

 import { Observable , of } from 'rxjs' ;

export class CustomPreloading implements PreloadingStrategy {
  public preload ( route : Route , load : ( ) => Observable < any > ) : Observable < any > {
    return preloadingConnection ( ) ? load ( ) : of ( null ) ;
  }
}

const routing : ModuleWithProviders = RouterModule . forRoot ( routes , {
  preloadingStrategy : CustomPreloading
} ) ;

上記の例は、すべてのモジュールをプリロードするため、大規模なアプリにとってはあまり効率的ではないことに注意してください。

リンク

https://angular.io/api/router/preloadingstrategy、https://vsavkin.com/angular-router-cruter-modules-modules-modules-modules-modules-modules-modules u/custom-preading-strategy-for-Angular-modules-b3b5c873681a、https：//coryrylan.com/blog/custom-preloading-and-lazy-loading-strategies------ angular

このスニペットのインタラクティブなデモ| topに戻る|タグ：ルーター

SVG

AngularコンポーネントでSVGタグを使用して、美しいグラフと視覚化を作成することができます。あなたが知る必要がある3つのことがあります：

SVG属性をバインドするときは、 attrを使用します

 < circle [attr.cx] =" x " [attr.cy] =" y " > </ circle >

サブコンポーネントを作成するときは、タグセレクターではなく属性を使用します。

// Not: < child-component > </ child-component >
< g child-component > </ g >

@ Component ( { selector : '[child-component]' } )

サブコンポーネントでSVGタグを使用する場合、SVGプレフィックスを使用します。

@ Component ( {
  selector : '[child-component]' ,
  template : `<svg:circle></svg:circle>`
} )

このスニペットのインタラクティブなデモ| topに戻る|タグ：チップSVG

拡大する

30 seconds of angular

30秒の角度

目次

初心者のスニペット

テンプレート内の列挙にアクセスします

チートシートとチェックリスト

リンク

コンポーネント状態デバッグ

リンク

デフォルトのviewEncapsulation値

Hammerjs-Gestures

リンク

ローダーコンポーネント

リンク

ngコンテンツ

リンク

ngif else

中央のオプションのパラメーター

リンク

入力と出力の名前変更

リンク

安全なナビゲーションオペレーター

リンク

ループのトラックイン

リンク

マイクロシンダックスの理解

リンク

中間スニペット

ネストされたすべてのフォームコントロールにアクセスします

リンク

要素にキーボードショートカットを追加します

リンク

ホストバインディングでホストプロパティにバインドします

コンポーネントレベルプロバイダー

リンク

グローバルイベントリスナー

ドキュメントの注入

リンク

触れたようにリアクティブフィールドをマークします

リンク

出力としてのオブザーバブル

入力としてテンプレートを渡します

リンク

ホワイトスペースを前提としています

リンク

テンプレートでコードを再利用します

リンク

既存のカスタムパイプの再利用

リンク

スタイルバインディング

双方向のバインディング任意のプロパティ

app_initializerを使用してAPPの開始を遅らせます

リンク

ウィンドウの位置噴射

リンク

高度なスニペット

ViewChildでさまざまなタイプのコンポーネントを取得します

リンク

ルーターカスタムプリロード

リンク

SVG