Angular - 튜토리얼07_디렉티브(로그인)

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)