2017年01月22日

ElementRef - @angular/core - Angular2

ElementRefを利用すると要素内のHTMLにアクセスできます。続きを読む
posted by ねこまんま at 22:08 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年01月15日

Angular 2のng2-dragulaでドラッグアンドドロップ

Angular 2のng2-dragulaでドラッグアンドドロップする。ng2-draguladragulaというドラッグアンドドロップ制御表のライブラリのOfficial Angular2 wrapper 。続きを読む
タグ:Angular 2
posted by ねこまんま at 21:25 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年01月14日

Angular 2のDatePipe

Angular 2のdateパイプで日付のフォーマットを整理でき、DatePipeの引数に言語を指定すればその言語に対応した変換方式がりようできる。

import { Component } from '@angular/core';
import {DatePipe} from '@angular/common';
@Component({
selector: 'app-root',
template: `
<p>{{now}}</p>
<p>{{now| date: 'y/MM/dd (EE) HH:mm'}}</p>
<p>{{ngDatePipeJp.transform(now, 'yMMdd (EEE) HHmm')}}</p>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
now = new Date();
ngDatePipeJp = new DatePipe('ja-JP');
}


これだと面倒くさいので独自のパイプdateJPを作成してみる。

date-jp.pipe.ts

import { Pipe } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({name: 'dateJP'})
export class DateJpPipe {
private dateJpPipe: DatePipe;
constructor() {
this.dateJpPipe = new DatePipe('ja-JP');
}
transform(date, format) {
return this.dateJpPipe.transform(date, format);
}
}


app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {DateJpPipe} from './date-jp.pipe';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
DateJpPipe
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


app.component.ts

import { Component } from '@angular/core';
import {DatePipe} from '@angular/common';
@Component({
selector: 'app-root',
template: `
<p>{{now}}</p>
<p>{{now| date: 'y/MM/dd (EE) HH:mm'}}</p>
<p>{{now| dateJP: 'yMMdd (EE) HHmm分'}}</p>
`
})
export class AppComponent {
now = new Date();
}


変換フォーマットが正直微妙なので下記のサイトを参考に曜日だけ日本語にするのがよいかと思う。

参考:DatePipe - ts - API - 公式リファレンス
参考:【Angular2】DatePipeの曜日だけ日本語にする【LiveDemoあり】 | Bucket.GIFT
タグ:Angular 2
posted by ねこまんま at 19:14 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年01月09日

TypeScriptの基本

TypeScriptの環境作成方法。続きを読む
タグ:TypeScript
posted by ねこまんま at 16:55 | Comment(0) | TrackBack(0) | TypeScript | 更新情報をチェックする

TypeScriptのas

TypeScriptのasオペレーターというのがあってハマった。このググラビリティの低いワードどうかにかして欲しい。続きを読む
タグ:as TypeScript
posted by ねこまんま at 14:56 | Comment(0) | TrackBack(0) | TypeScript | 更新情報をチェックする

2017年01月08日

Angular2のRouting2

Angular2のRoutingで基本的なルーティングの解説をしたけどもう少し高度なルーティング続きを読む
タグ:Angular2
posted by ねこまんま at 17:42 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年01月06日

Stateless Functionでrefを利用する

Stateless Functionではrefsへの参照を生成しないため以下のようにして要素の内容を取得する

続きを読む
タグ:REACT
posted by ねこまんま at 17:15 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2017年01月05日

Re : Flux を使わずに React コンポーネント間のコミュニケーションを行う8つの方法

参考:Flux を使わずに React コンポーネント間のコミュニケーションを行う8つの方法 - Qiita

結構はやい段階でReduxに以降してしまったためココらへんの知識が浅いので色々と書いてためしてみました。続きを読む
タグ:REACT
posted by ねこまんま at 14:44 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする