579
回編集
差分
提供: fukudat.net
ナビゲーションに移動検索に移動
→Mac OS
npm で angular/cli をインストール．
<pre>
$ npm install --global @angular/cli @angular/core
</pre>
https://www.techiediaries.com/updating-angular-cli-projects/ を参考。
<pre>
$ ng update @angular/cli@7 @angular/core@7
</pre>
<pre>
$ ng update @angular/cli @7 @angular/core@7
</pre>
<pre>
$ npm install rxjs rxjs-compat
</pre>
export class AppModule { }
</pre>
=== Google Maps ===
詳しくは、https://angular-maps.com/ を見るべし。
インストールは、
<pre>
$ npm i @agm/core --save
</pre>
Mapの高さを指定しなければならない。そこで、テンプレートに
<pre>
<agm-map [style.height]="mapHeight" ...></agm-map>
</pre>
として、xxx.component.ts に、
<pre>
import { HostListener } from '@angular/core';
mapHeight = "600px";
＠HostListener('window:resize')
onResize(): void {
const height = window.innerHeight;
this.mapHeight = (ウィンドウの高さから計算される Map のサイズ) + "px";
}
</pre>
とすると良い。
== Tips ==
</pre>
=== sortable table ===
上記の[[#table|table]]をソート可能なテーブルにする。
テンプレートのスニペット:
<pre>
<table mat-table [dataSource]="tableData" matSort (matSortChange)="sortData($event)">
<!-- NAME column -->
<ng-container matColumnDef="NAME">
<th mat-header-cell *matHeaderCellDef mat-sort-header mat-sort-header>Name</th>
<td mat-cell *matCellDef="let row">{{ row.name }}</td>
</ng-container>
... 以下同様
</pre>
コンポーネント （xxx.component.ts) のスニペット:
<pre>
import { MatSort, Sort } import from '@angular/material/sort';
...
export class XxxComponent implements OnInit {
sortData(sort: Sort) {
const sort_dir = sort.diretion === 'asc' ? 1 : -1;
this.tableData = this.tableData.slice(); // データをコピーする。
const compare = (a, b) => { return (a < b ? -1 : 1) * sort_dir; };
switch (sort.active) {
case 'NAME':
this.tableData.sort((a, b) => { return compare(a.NAME, b.NAME); }); break;
case 'AGE':
this.tableData.sort((a, b) => { return compare(a.AGE, b.AGE); }); break;
case 'HEIGHT:
this.tableData.sort((a, b) => { return compare(a.HEIGHT, b.HEIGHT); }); break;
default:
break;
}
...
}
</pre>
=== LifeCycle Hooks ===
https://angular.jp/guide/lifecycle-hooks 参照。
* <code>ngOnChanges()</code>: data bound input property に値がセットあるいはリセットされた時に呼ばれる。非常に頻繁に呼び出されるので、パフォーマンスへの影響が大きい。
* <code>ngOnInit()</code>: 最初に表示される際に data bound property を表示し、コンポーネントの input property をセットした後に、呼び出される。
* <code>ngDoCheck()</code>
* <code>ngAfterContentInit()</code>
* <code>ngAfterContentChecked()</code>
* <code>ngAfterViewInit()</code>
* <code>ngAfterViewChecked()</code>
* <code>ngOnDestroy()</code>
[[Category:Programming]][[Category:How-To]]
