jtn-ms

Ops	Angular	React
Call	<app-button color="{{show ? 'red' : 'green' }}"/>	<Button text={show ? 'Close' : 'Add'} />
Definition	@Input() color!: string;	export default function Button({text,color}) {}
Reference	<button [ngStyle]="{'background-color': color}">{{text}}</button>	<button style={{backgroundColor:color}}> {text} </button>

Angular

Alignment - Header -> Button

• Header.ts

jtn-ms

• @Output() onToggleReminder: EventEmitter<Task> = new EventEmitter<Task>();
• this.onToggleReminder.emit(task);
• (onToggleReminder)="toggleReminder(task)"

Angular

• Task -> (Tasks) -> (Service)
• Task: dblclick(html) -> onToggle(html,ts) -> onToggleReminder(ts)
• Tasks: onToggleReminder(html) -> toggleReminder(html,ts) -> updateTaskReminder(ts)
• Service: updateTaskReminder -> this.http.put(url, task, httpOptions);

Alignment

• Task.html

jtn-ms

Angular

ng generate component components/task-item
ng add @fortawesome/angular-fontawesome

Alignment

• app.module.ts

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

jtn-ms

Angular

ng generate component components/tasks
ng generate component components/task-item
ng generate service services/task

Alignment

• App

jtn-ms

add new components/services

ng generate component components/add-task
ng generate service services/task
ng generate component components/tasks

add form module - app.module.ts

import { FormsModule } from '@angular/forms';

jtn-ms

Angular

generate new components

ng generate component components/about
ng generate component components/footer

add routing module/components - app.module.ts

<div class="container">
  <router-outlet></router-outlet>

jtn-ms

• package.json

  "scripts": {
    "build": "react-scripts build",
    "production": "serve -s build -p 8000"
  }

build & run

$ npm run build

jtn-ms

useEffect(() => {
  const getData = async () => {
    const dataFromServer = await fetchAll()
    setData(dataFromServer)
  }
  getData()
}, []);

const fetchAll = async () => {
  return await fetch('http://localhost:5000/tasks')

jtn-ms

JSON Server

[install]
$ npm i json-server

[setting] - package.json
{
  "scripts": {
    "server": "json-server --watch db.json --port 5000"
 }

jtn-ms

User Story

• Show/Hide Component
• Change Component Attributes

show -> click -> hide
hide -> click -> show

[Change]
- Button: text, color
- AddTask: show/hide