GitHubに雛形あります。
https://github.com/tkiryu/todo-app-seed
完成版
https://github.com/tkiryu/todo-app-complete
npm i -g @angular/cli
ng -v
cd <working directory>
ng new todo-app --style=scss
cd todo-app
ng serve -o
Root Module
Feature Module
Feature Module
Component
Component
Component
Component
Component
Component
Container
Component
Presentational Component
Data
Flows Down
Event
Emits Up
Service
XXXComponent
xxx.component.ts
xxx.component.html
xxx.component.scss
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Hello, app';
}
<!-- app.component.html -->
<h1>{{title}}</h1>
<!-- Interpolation -->
<h1>{{ title }}</h1>
<!-- Expression -->
<span>{{ 1 + 1 }}</span>
{{ variable or expression }}
export class AppComponent {
title = 'Hello, app';
}
<input
[value]="val"
[disabled]="isDisabled">
<img [src]="url">
[property]="variable"
export class AppComponent {
val = 'foo';
isDisabled = true;
url = 'path/to/image.png';
}
<input (change)="onChange($event)">
<button (click)="onClick($event)">
save
</button>
(event)="eventHander"
export class AppComponent {
onChange(event) { console.log(event) }
onClick(event) { console.log(event) }
}
<input (change)="onChange(foo.value)" #foo>
<button (click)="onClick(foo.value)">
save
</button>
#refName
export class AppComponent {
onChange(value) { console.log(value) }
onClick(value) { console.log(value) }
}
<foo [bar]="'baz'"></foo> // <h1>baz</h1>
@Component({
selector: 'foo',
templateUrl: './foo.component.html',
styleUrls: ['./foo.component.scss']
})
export class FooComponent {
@Input() bar: string;
}
<h1>{{ bar }}</h1>
Definition
Usage
@Component({
selector: 'child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss']
})
export class ChildComponent {
@Output() edit = new EventEmitter<string>();
onChange(value: string) {
this.edit.emit(value); // value = hoge
}
}
<input (change)="onChange(input.value)" #input>
Definition
@Component({
selector: 'parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.scss']
})
export class ParentComponent {
handleEdit(event: string) {
console.log(event); // hoge
}
}
<child (edit)="handleEdit($event)"></child>
Usage
<foo bar="baz"></foo> // <h1>baz</h1>
@Component({
selector: 'foo',
templateUrl: './foo.component.html',
styleUrls: ['./foo.component.scss']
})
export class FooComponent {
@Input() bar: string;
}
<h1>{{ bar }}</h1>
@Component({
selector: 'foo',
templateUrl: './foo.component.html',
styleUrls: ['./foo.component.scss']
})
export class FooComponent {
isError = true;
}
<input required>
<div *ngIf="isError">
<p> This field is required </p>
</div>
export class FooComponent {
list = [
{ title: 'item1' },
{ title: 'item2' },
{ title: 'item3' }
];
}
<ul>
<li *ngFor="let item of list">
{{ item.title }}
</li>
</ul>
AppModule
TodoComponent
TodoItemComponent
TodoItemComponent
TodoItemComponent
npm i igniteui-angular hammerjs
npm i @types/hammerjs -D
Terminal
非商用利用であれば、無償で使えます!
import {
IgxCheckboxModule,
IgxButtonModule,
IgxIconModule,
IgxNavbarModule
} from 'igniteui-angular/main';
・・・
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
IgxCheckboxModule,
IgxButtonModule,
IgxIconModule,
IgxNavbarModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.module.ts
ng g component todo
ng g interface todo/todo-item
Terminal
export interface TodoItem {
id: number;
title: string;
isDone: boolean;
}
todo-item.ts
import { Component, OnInit } from '@angular/core';
import { TodoItem } from './todo-item';
@Component({
selector: 'app-todo',
templateUrl: './todo.component.html',
styleUrls: ['./todo.component.scss']
})
export class TodoComponent implements OnInit {
todoList: TodoItem[];
ngOnInit() {
this.todoList = [
{ id: 1, title: 'ToDo 1', isDone: false },
{ id: 2, title: 'ToDo 2', isDone: true },
{ id: 3, title: 'ToDo 3', isDone: false },
];
}
}
todo.component.ts
<div *ngFor="let todo of todoList">
{{ todo | json }}
</div>
todo.component.html
<app-todo></app-todo>
app.component.html
<div *ngFor="let todo of todoList" class="todoItem">
<igx-checkbox class="todoItem__check"
[checked]="todo.isDone">
</igx-checkbox>
<span class="todoItem__title">
{{ todo.title }}
</span>
<button class="todoItem__remove"
igxButton="icon">
<igx-icon name="delete"></igx-icon>
</button>
</div>
todo.component.html
ng g component todo/todo-item
Terminal
<app-todo-item *ngFor="let todo of todoList">
</app-todo-item>
todo.component.html
import { Component, OnInit, Input } from '@angular/core';
import { TodoItem } from '../todo-item';
@Component({
selector: 'app-todo-item',
templateUrl: './todo-item.component.html',
styleUrls: ['./todo-item.component.scss']
})
export class TodoItemComponent implements OnInit {
@Input() todo: TodoItem;
ngOnInit() {
}
}
todo-item.component.ts
<div class="todoItem">
<igx-checkbox class="todoItem__check"
[checked]="todo.isDone">
</igx-checkbox>
<span class="todoItem__title">
{{ todo.title }}
</span>
<button class="todoItem__remove" igxButton="icon">
<igx-icon name="delete"></igx-icon>
</button>
</div>
todo-item.component.html
<div class="todo__list">
<app-todo-item *ngFor="let todo of todoList"
[todo]="todo">
</app-todo-item>
</div>
todo.component.ts
<div class="todoItem">
<igx-checkbox class="todoItem__check"
[checked]="todo.isDone"
(change)="onCheckChange(check.checked)" #check>
</igx-checkbox>
<span class="todoItem__title">
{{ todo.title }}
</span>
<button class="todoItem__remove" igxButton="icon">
<igx-icon name="delete"></igx-icon>
</button>
</div>
<div>{{ todo | json }}</div>
todo-item.component.html
import { Component, OnInit, Input } from '@angular/core';
import { TodoItem } from '../todo-item';
@Component({
selector: 'app-todo-item',
templateUrl: './todo-item.component.html',
styleUrls: ['./todo-item.component.scss']
})
export class TodoItemComponent implements OnInit {
@Input() todo: TodoItem;
ngOnInit() {
}
onCheckChange(event: boolean) {
this.todo.isDone = event;
}
}
todo-item.component.ts
・・・
<span *ngIf="!isEditing"
class="todoItem__title"
(dblclick)="startEdit()">
{{ todo.title }}
</span>
<input *ngIf="isEditing"
type="text"
class="todoItem__editor"
[value]="todo.title">
・・・
todo-item.component.html
・・・
export class TodoItemComponent implements OnInit {
isEditing = false;
@Input() todo: TodoItem;
ngOnInit() {
}
onCheckChange(event: boolean) {
this.todo.isDone = event;
}
startEdit() {
this.isEditing = true;
}
}
todo-item.component.ts
・・・
<span *ngIf="!isEditing"
class="todoItem__title"
(dblclick)="startEdit()">
{{ todo.title }}
</span>
<input *ngIf="isEditing"
type="text"
class="todoItem__editor"
[value]="todo.title"
(input)="onTitleChange(input.value)"
(keydown)="endEdit($event)"
#input>
・・・
todo-item.component.html
・・・
export class TodoItemComponent implements OnInit {
isEditing = false;
@Input() todo: TodoItem;
・・・
onTitleChange(value: string) {
this.todo.title = value;
}
endEdit(event: KeyboardEvent) {
if (event.keyCode !== 13) {
return;
}
this.isEditing = false;
}
}
todo-item.component.ts
todoListが意図せず更新されている
・・・
export class TodoItemComponent implements OnInit {
isEditing = false;
@Input() todo: TodoItem;
ngOnInit() {
this.todo = {...this.todo};
}
onCheckChange(event: boolean) {
this.todo.isDone = event;
}
startEdit() {
this.isEditing = true;
}
onTitleChange(value: string) {
this.todo.title = value;
}
endEdit(event: KeyboardEvent) {
if (event.keyCode !== 13) {
return;
}
this.isEditing = false;
}
}
todo-item.component.ts
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { TodoItem } from '../todo-item';
@Component({
selector: 'app-todo-item',
templateUrl: './todo-item.component.html',
styleUrls: ['./todo-item.component.scss']
})
export class TodoItemComponent implements OnInit {
isEditing = false;
@Input() todo: TodoItem;
@Output() edit = new EventEmitter<TodoItem>();
ngOnInit() {
this.todo = {...this.todo};
}
onCheckChange(event: boolean) {
this.todo.isDone = event;
this.edit.emit(this.todo);
}
startEdit() {
this.isEditing = true;
}
onTitleChange(value: string) {
this.todo.title = value;
}
endEdit(event: KeyboardEvent) {
if (event.keyCode !== 13) {
return;
}
this.edit.emit(this.todo);
this.isEditing = false;
}
}
todo-item.component.ts
・・・
export class TodoItemComponent implements OnInit {
・・・
onCheckChange(event: boolean) {
this.todo.isDone = event;
this.edit.emit(this.todo);
}
・・・
endEdit(event: KeyboardEvent) {
if (event.keyCode !== 13) {
return;
}
this.edit.emit(this.todo);
this.isEditing = false;
}
}
todo-item.component.ts
export class TodoComponent implements OnInit {
・・・
handleEdit(event: TodoItem) {
this.todoList = this.todoList.map((todo: TodoItem) => {
if (todo.id === event.id) {
todo = {...todo, ...event};
}
return todo;
});
}
}
todo.component.ts
<app-todo-item *ngFor="let todo of todoList"
[todo]="todo"
(edit)="handleEdit($event)">
</app-todo-item>
todo.component.html
・・・
<button
class="todoItem__remove"
igxButton="icon"
(click)="onRemove()">
<igx-icon name="delete"></igx-icon>
</button>
・・・
todo-item.component.html
・・・
export class TodoItemComponent implements OnInit {
・・・
@Output() remove = new EventEmitter<TodoItem>();
・・・
onRemove() {
this.remove.emit(this.todo);
}
}
todo-item.component.ts
export class TodoComponent implements OnInit {
・・・
handleRemove(event: TodoItem) {
this.todoList = this.todoList.filter((todo: TodoItem) => {
return todo.id !== event.id;
});
}
}
todo.component.ts
<app-todo-item *ngFor="let todo of todoList"
[item]="todo"
(edit)="handleEdit($event)"
(remove)="handleRemove($event)">
</app-todo-item>
todo.component.html
ng g component todo/add-todo-item
Terminal
<div class="addTodoItem">
<igx-icon class="addTodoItem__icon" name="add"></igx-icon>
<input
type="text"
class="addTodoItem__editor"
placeholder="ToDo の追加"
[value]="title"
(input)="onTitleChange(input.value)"
(keydown)="endEdit($event)"
#input>
</div>
add-todo-item.component.html
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { TodoItem } from '../todo-item';
@Component({
selector: 'app-add-todo-item',
templateUrl: './add-todo-item.component.html',
styleUrls: ['./add-todo-item.component.scss']
})
export class AddTodoItemComponent {
title = '';
@Output() add = new EventEmitter<TodoItem>();
onTitleChange(event: string) {
this.title = event;
}
endEdit(event: KeyboardEvent) {
if (event.keyCode !== 13) {
return;
}
if (!this.title) {
return;
}
this.add.emit({ id: Date.now(), title: this.title, isDone: false });
this.title = '';
}
}
add-todo.component.ts
<div class="todo__list">
<app-todo-item *ngFor="let todo of todoList"
[item]="todo"
(edit)="handleEdit($event)"
(remove)="handleRemove($event)">
</app-todo-item>
</div>
<app-add-todo-item class="todo__add"
(add)="handleAdd($event)">
</app-add-todo-item>
todo.component.html
export class TodoComponent implements OnInit {
todoList: TodoItem[];
・・・
handleAdd(event: TodoItem) {
this.todoList = [...this.todoList, event];
}
}
todo.component.ts
<igx-navbar class="todo__navbar"
title="ToDo"
actionButtonIcon="menu">
</igx-navbar>
<div class="todo__list">
<app-todo-item *ngFor="let todo of todoList"
[item]="todo"
(edit)="handleEdit($event)"
(remove)="handleRemove($event)">
</app-todo-item>
</div>
<app-add-todo-item class="todo__add"
(add)="handleAdd($event)">
</app-add-todo-item>
todo.component.html