Angular - 튜토리얼05_컴포넌트, 모듈(로그인)

1) 

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // FormsModule 등록


import { AppComponent } from './app.component';
import { HelloComponent } from './hello/hello.component';
import { WorldComponent } from './world/world.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent,
    WorldComponent
  ],
  imports: [
    BrowserModule, FormsModule  // FormsModule 등록
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

FormsModule 등록

* import 순서 중요!!  NgModule -> BrowserModule -> FormsModule (버전에 따라 안해도 됨.)

app.component.ts

 

2) 

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  id!: string; // 변수명 뒤에 !붙여서 초기화해주기
  pwd!: string; // 변수명 뒤에 !붙여서 초기화해주기
  visible1: boolean = false;
  visible2 : boolean = false;
  visible : boolean = true;

  tryToLogin() : void{
    console.log(this.id, this.pwd);
    if(this.id == 'admin' && this.pwd == '1234'){
      this.visible1 = true;
      this.visible = false;
    }else if(this.id == 'root' && this.pwd == '1234') {
      this.visible2 = true;
      this.visible = false;
    }
  }
}

app.component.html

<div *ngIf="visible">
    <div>Wellcome</div>
    <!-- ngModel은 디렉티브의 일종으로 input type의 데이터를 묶을 때 사용됩니다. -->
    <input type="text" placeholder="id" [(ngModel)]="id" /> 
    <input type="text" placeholder="password" [(ngModel)]="pwd" />
    <button (click)="tryToLogin()">Login</button>
</div>
<app-hello *ngIf="visible1"></app-hello>
<br>
<app-world *ngIf="visible2"></app-world>

3)