Skip to content

Instantly share code, notes, and snippets.

🌴
On vacation

NAKAYASU TAKUYA l08084

🌴
On vacation
Block or report user

Report or block l08084

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@l08084
l08084 / app.component.html
Created Apr 21, 2019
ルートコンポーネントのテンプレートファイル
View app.component.html
<!-- headerコンポーネント -->
<app-header></app-header>
<div class="wrapper">
<!-- select コンポーネント -->
<app-select (sendConvertType)="onSendConvertType($event)"></app-select>
<!-- input コンポーネント -->
<app-input [convertType]="setConvertType" (inputText)="onInput($event)"></app-input>
<!-- output コンポーネント -->
<app-output [convertType]="setConvertType" [text]="setText"></app-output>
<!-- share-button コンポーネント -->
@l08084
l08084 / app.component.html
Created Mar 21, 2019
ルートコンポーネントのテンプレートファイル
View app.component.html
<app-my-counter></app-my-counter>
@l08084
l08084 / my-counter.component.ts
Created Mar 21, 2019
カウンターコンポーネントのコンポーネントクラス
View my-counter.component.ts
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { Store, select } from '@ngrx/store';
import { Increment, Decrement, Reset } from '../action/counter.actions';
@Component({
selector: 'app-my-counter',
templateUrl: './my-counter.component.html'
})
export class MyCounterComponent {
@l08084
l08084 / my-counter.component.html
Created Mar 21, 2019
カウンターコンポーネントのテンプレートファイル
View my-counter.component.html
<button (click)="increment()">Increment</button>
<div>Current Count: {{ count$ | async }}</div>
<button (click)="decrement()">Decrement</button>
<button (click)="reset()">Reset Counter</button>
@l08084
l08084 / app.module.ts
Created Mar 21, 2019
モジュールファイル
View app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { counterReducer } from './components/my-counter/reducer/counter.reducer';
import { MyCounterComponent } from './components/my-counter/view/my-counter.component';
@NgModule({
@l08084
l08084 / counter.reducer.ts
Created Mar 19, 2019
カウンターアプリのReducer
View counter.reducer.ts
import { Action } from '@ngrx/store';
import { ActionTypes } from '../action/counter.actions';
export const initialState = 0;
export function counterReducer(state = initialState, action: Action) {
switch (action.type) {
case ActionTypes.Increment:
return state + 1;
@l08084
l08084 / counter.actions.ts
Last active Mar 19, 2019
カウンターアプリのアクションクラス
View counter.actions.ts
import { Action } from '@ngrx/store';
export enum ActionTypes {
Increment = '[Counter Component] Increment',
Decrement = '[Counter Component] Decrement',
Reset = '[Counter Component] Reset',
}
export class Increment implements Action {
readonly type = ActionTypes.Increment;
@l08084
l08084 / HeroSearch.vue
Created Feb 22, 2019
ヒーロー検索コンポーネント
View HeroSearch.vue
<template>
<div id="search-component">
<h4>Hero Search</h4>
<input id="search-box" v-model="searchName" placeholder="name">
<ul class="search-result">
<router-link
v-for="hero in heroes"
:key="hero.id"
v-bind:to="{name: 'Detail', params : {id: hero.id}}">
@l08084
l08084 / HeroDetail.vue
Created Feb 22, 2019
ヒーロー詳細コンポーネント
View HeroDetail.vue
<template>
<div class="detail">
<div v-if="hero">
<h2>{{hero.name.toUpperCase()}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div>
<label>
name:
<input v-model="hero.name" placeholder="name">
</label>
@l08084
l08084 / Heroes.vue
Created Feb 22, 2019
ヒーローズコンポーネント
View Heroes.vue
<template>
<div>
<h2>My Heroes</h2>
<div>
<label>Hero name:
<input v-model="heroName" placeholder="name">
</label>
<button v-on:click="add(heroName)">add</button>
</div>
<ul class="heroes">
You can’t perform that action at this time.