Skip to content

Instantly share code, notes, and snippets.

Avatar
🌴
On vacation

TAKUYA NAKAYASU l08084

🌴
On vacation
View GitHub Profile
@l08084
l08084 / input.component.ts
Created Apr 21, 2019
input コンポーネントクラス
View input.component.ts
import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { debounceTime } from 'rxjs/operators';
import { ConvertService } from 'src/app/service/convert.service';
@Component({
selector: 'app-input',
templateUrl: './input.component.html',
styleUrls: ['./input.component.scss']
})
@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>
You can’t perform that action at this time.