(앵귤러 바인딩)Angular Basic - Binding



(앵귤러 바인딩)Angular Basic - Binding

http://ojc.asia/bbs/board.php?bo_table=LecAngular&wr_id=26

이미지 썸네일 삭제

(앵귤러 바인딩)Angular Basic - Binding

(앵귤러 바인딩)Angular Basic - BindingBindingInterpolationinterpolation.component.tsimport { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-interpolation', template: ` <div class='…

ojc.asia

Binding

---

Interpolation

---

interpolation.component.ts

셀 전체 선택

• 0열 선택0열 다음에 열 추가

• 0행 선택0행 다음에 행 추가

열 너비 조절

행 높이 조절

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-interpolation', template: ` <div class="container"> 1 + 2 = {{1 + 2}} <br> {{say() + " Angular!"}} <br> {{say()==="Hi" ? "Good" : "Bye"}} <br> [ {{basket.items[0]}}, {{basket.items[1]}}, {{basket.items[2]}} ] <br> message : {{message}} <br> <form class="form-inline mt-2 mb-2"> <div class="form-row"> <input type="email" id="email" class="form-control mr-1" value="{{className}}"> {{' '}} <button type="button" class="btn {{className}}">{{className}}</button> </div> </form> <span *ngFor="let n of numbers">{{n + ' '}}</span> <form class="form mt-2 mb-2"> <div class="form-group"> <label for="comment">Comment:</label> <textarea id="comment" class="form-control" rows="4" cols="40" value="{{className}}"></textarea> </div> </form> </div> `, styles: [ ` .container { margin-top: 2rem; } ` ] }) export class InterpolationComponent implements OnInit { className = "btn-primary"; basket = { items: [] }; numbers; message; constructor() { this.basket.items.push('Apple'); this.basket.items.push('Orange'); this.basket.items.push('Banana'); this.numbers = Array(10).fill(0).map((item, i) => i + 1); } ngOnInit() { let x = 'Hello'; let y = 'World'; this.message = `${x} ${y}!`; } say() { return "Hi"; } }

• 셀 병합
• 행 분할
• 열 분할
• 너비 맞춤
• 삭제

원한다면 하나의 파일안에 클래스, HTML, CSS 설정을 모두 정의할 수 있습니다.

Property Binding

---

property.component.ts

셀 전체 선택

• 0열 선택0열 다음에 열 추가

• 0행 선택0행 다음에 행 추가

열 너비 조절

행 높이 조절

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-property', templateUrl: './property.component.html', styleUrls: ['./property.component.scss'] }) export class PropertyComponent implements OnInit { greeting: string = "Hello"; message: string = "<em>World</em>!!!"; constructor() { } ngOnInit() { } }

• 셀 병합
• 행 분할
• 열 분할
• 너비 맞춤
• 삭제

property.component.html

셀 전체 선택

• 0열 선택0열 다음에 열 추가

• 0행 선택0행 다음에 행 추가

열 너비 조절

행 높이 조절

<div class="container"> <h2 class="mb-4">{{greeting}}</h2> <div class="form-row mb-4"> <div class="col"> <label class="mb-0" for="id1">문자열로 취급</label> <input class="form-control" type="text" id="id1" value="greeting"> </div> <div class="col"> <label class="mb-0" for="id2">Interpolation</label> <input class="form-control" type="text" id="id2" value="{{greeting}}"> </div> <div class="col"> <label class="mb-0" for="id3">Interpolation : 문자열로 취급</label> <input class="form-control" type="text" id="id3" value="{{'greeting'}}"> </div> </div> <div class="form-row mb-4"> <div class="col"> <label class="mb-0" for="id4">Property Binding 1</label> <input class="form-control" type="text" id="id4" [value]="greeting"> </div> <div class="col"> <label class="mb-0" for="id5">Property Binding 2</label> <input class="form-control" type="text" id="id5" bind-value="greeting"> </div> <div class="col"> <label class="mb-0" for="id6">Property Binding 3</label> <input class="form-control" type="text" id="id6" [attr.value]="greeting"> </div> </div> <div class="form-row mb-4"> <div class="col"> <label class="mb-0">Interpolation : 태그가 그대로</label> <p>{{message}}</p> </div> <div class="col"> <label class="mb-0">Property Binding Inner 1 : 태그가 그대로</label> <p [innerText]="message"></p> </div> <div class="col"> <label class="mb-0">Property Binding Inner 2 : 태그가 처리 됨</label> <p [innerHTML]="message"></p> </div> </div> </div>

• 셀 병합
• 행 분할
• 열 분할
• 너비 맞춤
• 삭제

Event Binding

---

event.component.ts

셀 전체 선택

• 0열 선택0열 다음에 열 추가

• 0행 선택0행 다음에 행 추가

열 너비 조절

행 높이 조절

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-event', templateUrl: './event.component.html', styleUrls: ['./event.component.scss'] }) export class EventComponent implements OnInit { isShow: boolean = true; constructor() { } ngOnInit() { } signin(email, password) { alert(email + ', ' + password); } }

• 셀 병합
• 행 분할
• 열 분할
• 너비 맞춤
• 삭제

event.component.html

셀 전체 선택

• 0열 선택0열 다음에 열 추가

• 0행 선택0행 다음에 행 추가

열 너비 조절

행 높이 조절

<div class="container"> <div class="form-group row"> <div class="ml-auto col-sm-4"> <button type="button" class="btn btn-warning btn-block" (click)="isShow=!isShow"> {{isShow ? 'Hide' : 'Show'}} </button> </div> </div> <form *ngIf="isShow"> <div class="form-group row"> <label for="id1" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="id1" placeholder="Email" #email> </div> </div> <div class="form-group row"> <label for="id2" class="col-sm-2 col-form-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="id2" placeholder="Password" #password> </div> </div> <div class="form-group row"> <div class="ml-auto col-sm-4"> <button type="submit" class="btn btn-primary btn-block" (click)="signin(email.value, password.value)">Sign in</button> </div> </div> </form> </div>

• 셀 병합
• 행 분할
• 열 분할
• 너비 맞춤
• 삭제

Two-way Binding

---

twoway.component.ts

셀 전체 선택

• 0열 선택0열 다음에 열 추가

• 0행 선택0행 다음에 행 추가

열 너비 조절

행 높이 조절

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-twoway', templateUrl: './twoway.component.html', styleUrls: ['./twoway.component.scss'] }) export class TwowayComponent implements OnInit { citySelected: string = "seoul"; cities: Object[] = [ { kor: "서울", eng: "seoul" }, { kor: "대전", eng: "daejeon" }, { kor: "대구", eng: "daegu" }, { kor: "부산", eng: "pusan" } ]; address: Array<Object> = [ { kor: "서울", eng: "seoul", checked: false }, { kor: "대전", eng: "daejeon", checked: false }, { kor: "대구", eng: "daegu", checked: false }, { kor: "부산", eng: "pusan", checked: true } ]; constructor() { } ngOnInit() { } /** * 체크박스 클릭 시 배열안에 객체안에 존재하는 checked 값의 변경을 * (click)="addr.checked=!addr.checked" 설정으로 적용했을 때 * 화면에서 사용하는 자원은 참조 값이고 그 참조 값은 변하지 않았으므로 * 앵귤러의 변경감지에서 변경된 대상으로 인식되지 못한다. * * 하지만, 위 설정 대신 (click)="checkedFilter(addr)" 처럼 * 클래스 내 함수를 호출하는 방식으로 사용하면 * 앵귤러의 변경감지에서 변경된 대상으로 인식된다. */ checkedFilter(addr) { addr.checked = !addr.checked; } }

• 셀 병합
• 행 분할
• 열 분할
• 너비 맞춤
• 삭제

twoway.component.html

셀 전체 선택

• 0열 선택0열 다음에 열 추가

• 0행 선택0행 다음에 행 추가

열 너비 조절

행 높이 조절

<div class="container"> <div class="form-row mb-4"> <div class="col-sm-1"></div> <div class="col-sm-4"> <label class="mb-1">Oneway + Oneway</label> <select class="form-control" (change)="citySelected=$event.target.value"> <option *ngFor="let city of cities" [value]="city.eng" [selected]="citySelected==city.eng?true:null"> {{city.kor}} </option> </select> </div> <div class="ml-auto col-sm-4"> <label class="mb-1">Twoway</label> <select class="form-control" [(ngModel)]="citySelected"> <option *ngFor="let city of cities" [value]="city.eng">{{city.kor}}</option> </select> </div> <div class="col-sm-1"></div> </div> <div class="form-row mb-4"> <div class="col-sm-1"></div> <div class="col-sm-4"> <label class="mb-1">Oneway + Oneway</label> <input class="form-control" [value]="citySelected" (input)="citySelected=$event.target.value"> </div> <div class="ml-auto col-sm-4"> <label class="mb-1">Twoway</label> <input class="form-control" [(ngModel)]="citySelected"> </div> <div class="col-sm-1"></div> </div> <div class="form-row mb-4"> <div class="col-sm-1"></div> <div class="col-sm-4"> <p class="mb-1">Oneway + Oneway</p> <div class="form-check form-check-inline" *ngFor="let city of cities"> <input class="form-check-input" type="radio" [checked]="(city.eng==citySelected?true:null)" (click)="citySelected=$event.target.value" [value]="city.eng" name="city1"> <label class="form-check-label">{{city.kor}}</label> </div> </div> <div class="ml-auto col-sm-4"> <p class="mb-1">Twoway</p> <div class="form-check form-check-inline" *ngFor="let city of cities;let i=index"> <input class="form-check-input" type="radio" [(ngModel)]="citySelected" [value]="city.eng" name="city2" [id]="'city'+i"> <label class="form-check-label" [for]="'city'+i">{{city.kor}}</label> </div> </div> <div class="col-sm-1"></div> </div> <div class="form-row mb-4"> <div class="col-sm-1"></div> <div class="col-sm-4"> <p class="mb-1">Oneway + Oneway</p> <div class="form-check form-check-inline" *ngFor="let addr of address"> <input class="form-check-input" type="checkbox" [checked]="addr.checked" (click)="checkedFilter(addr)" name="address1"> <label class="form-check-label">{{addr.kor}}</label> </div> </div> <div class="ml-auto col-sm-4"> <p class="mb-1">Twoway</p> <div class="form-check form-check-inline" *ngFor="let addr of address; let i=index"> <input class="form-check-input" type="checkbox" [(ngModel)]="addr.checked" name="address2" id="{{'addr'+i}}"> <label class="form-check-label" for="{{'addr'+i}}">{{addr.kor}}</label> </div> </div> <div class="col-sm-1"></div> </div> <div class="form-row mb-2"> <div class="col-sm-1"></div> <div class="col-sm-10"> <pre class="bg-light border border-secondary rounded">{{citySelected | json}}</pre> </div> <div class="col-sm-1"></div> </div> <div class="form-row mb-2"> <div class="col-sm-1"></div> <div class="col-sm-10"> <pre class="bg-light border border-secondary rounded">{{cities | json}}</pre> </div> <div class="col-sm-1"></div> </div> <div class="form-row mb-2"> <div class="col-sm-1"></div> <div class="col-sm-10"> <pre class="bg-light border border-secondary rounded">{{address | json}}</pre> </div> <div class="col-sm-1"></div> </div> </div>

• 셀 병합
• 행 분할
• 열 분할
• 너비 맞춤
• 삭제