1)
- 속성 디렉티브 : html관련된 모양, 동작을 제어 합니다. (ngClass, ngStyle 등)
- 구조 디렉티브 : 구조를 변경 할 때 사용됩니다. (ngIf, ngFor, ngSwitch 등)
- 속성 : html 속성에 값을 지정합니다(style, value, class 등)
2)
login.component.html
<div>Wellcome</div>
<input type="text" placeholder="id" [(ngModel)]="id" />
<input type="text" placeholder="password" [(ngModel)]="pwd" />
<button (click)="tryToLogin()">login</button>
<div>
<span [style.color]="'blue'" *ngIf="pwd && pwd.length < 4">비밀번호 {{pwd}}는 4자리 이상이어야 합니다.</span>
</div>
<div *ngIf="getMessage" [ngClass]="styleArray">
{{getMessage}}
</div>
<!-- 속성 -->
<input type="text" [id]="'abcd'" [value]="'1234'" [class]="'cls'"/>
login.component.ts
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
@Input() visible1! : boolean; // 받는 역할
@Output() sendMyEvent : EventEmitter<any> = new EventEmitter(); // 보내는 역할
id! : string;
pwd! : string;
private message :any;
constructor() { }
ngOnInit(): void {
}
styleArray = {'wrong_id':false, 'wrong_pwd':false};
tryToLogin() : void {
if(this.id == 'admin' && this.pwd == '1234'){
alert('로그인합니다!');
this.visible1 = true;
this.sendMyEvent.emit(this.visible1); // app컴포넌트에 전달
} else if(this.id != 'admin') {
this.setMessage = 'wrong id';
this.styleArray.wrong_id = true;
this.styleArray.wrong_pwd = false;
} else if(this.pwd != '1234') {
this.setMessage = 'wrong pwd';
this.styleArray.wrong_id = false;
this.styleArray.wrong_pwd = true;
}
console.log(this.id, this.pwd, this.visible1);
}
// set과 get이라는 명령어(예약어)는 함수를 마치 속성을 다루듯이 사용할 수 있게 해주는 기능입니다.
set setMessage(arg:string) { // 대입합니다.
this.message = arg;
}
get getMessage() : string{ // 가져옵니다.
return this.message;
}
}
login.component.css
.wrong_id {
color: red;
}
.wrong_pwd {
color: green;
}
3)
'개발이 좋아서 > Angular가 좋아서' 카테고리의 다른 글
Angular - 튜토리얼09_데이터 바인딩 심화(로그인) (1) | 2022.09.28 |
---|---|
Angular - 튜토리얼08_데이터 바인딩, 반응형 모듈(로그인) (0) | 2022.09.28 |
Angular - 튜토리얼06_컴포넌트, 모듈(로그인) (0) | 2022.09.28 |
Angular - 튜토리얼05_컴포넌트, 모듈(로그인) (0) | 2022.09.28 |
Angular - 튜토리얼04_컴포넌트, 모듈 (0) | 2022.09.27 |