zoaseo
To Infinity And Beyond
zoaseo
전체 방문자
오늘
어제
  • 분류 전체보기 (763)
    • 개발이 좋아서 (381)
      • SAP가 좋아서 (3)
      • Java가 좋아서 (42)
      • Spring이 좋아서 (50)
      • JPA가 좋아서 (0)
      • QueryDSL이 좋아서 (26)
      • Docker가 좋아서 (7)
      • Redis가 좋아서 (7)
      • AWS가 좋아서 (5)
      • CI/CD가 좋아서 (6)
      • Troubleshooting이 좋아서 (4)
      • Kotlin이 좋아서 (7)
      • SQL이 좋아서 (6)
      • HTTP가 좋아서 (21)
      • JavaScript가 좋아서 (30)
      • TypeScript가 좋아서 (6)
      • Vue가 좋아서 (21)
      • Flutter가 좋아서 (61)
      • React가 좋아서 (20)
      • Redux(React)가 좋아서 (2)
      • Angular가 좋아서 (22)
      • HTML이 좋아서 (9)
      • CSS가 좋아서 (15)
      • PHP가 좋아서 (9)
      • Illustrator가 좋아서 (2)
    • 노력이 좋아서 (169)
    • 결과물이 좋아서 (14)
    • 코딩연습이 좋아서 (168)
      • 이론이 좋아서 (62)
      • SQL이 좋아서 (90)
    • 유용한 사이트가 좋아서 (28)
    • Github (2)

인기 글

티스토리

hELLO · Designed By 정상우.
zoaseo

To Infinity And Beyond

Angular - 튜토리얼07_디렉티브(로그인)
개발이 좋아서/Angular가 좋아서

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

2022. 9. 28. 14:30

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

    티스토리툴바