현타와서 일단 코드만

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DashboardComponent } from './dashboard/dashboard.component';
import { INFORMATION } from './MyType';

const myData : INFORMATION = {  //내가 전달할 데이터
  data1 : 'data1',
  data2 : 1433,
  data3 : ['data3_1','data3_2']
};

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule, FormsModule,
    ReactiveFormsModule
  ],
  providers: [
    {provide: 'sending_name', useValue:myData}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app 폴더에 텍스트편집기로 난 파일을 하나 만들었음. Mytype.ts

export declare type INFORMATION = {  //전달할 데이터 형식
    data1 : string,
    data2 : number,
    data3 : any,
};

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angularfire';
  // 이 변수들로 보였다 안보였다 조정을 할 것이다
  loginVisible = true;  
  boardVisible = false;

  getEventLogin(event){
    console.log(event);
    if(event == true){
      this.loginVisible = false;  // true 가 오면 로그인은 안보이고
      this.boardVisible = true;   // 보드가 보이게끔
    }
  }
}

app.component.html

<app-login *ngIf="loginVisible" [logedIn] = 'loginVisible' (sendMyEvent)="getEventLogin($event)"></app-login>
<app-dashboard *ngIf="boardVisible"></app-dashboard>

 

login.component.ts

import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { InformationEvent } from 'http';
import { INFORMATION } from '../MyType'

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  styleArray = {'wrong_id':false, 'wrong_pwd':false};

  @Input() logedIn : boolean; // 보내는걸 받을거야 여기서
  // app.component.html 파일에서 [logedIn] = 'loginVisible' 한 부분 받는 놈이라고
  @Output() sendMyEvent : EventEmitter<any> = new EventEmitter(); // 얘가 보내는 놈이야
  id = new FormControl('');    // 폼 컨트롤러 클래스로 바꿈
  pwd = new FormControl('',[Validators.required, Validators.minLength(4)]);
  private message;  // 특정 상황에서 우리가 띄워줄 메세지

  constructor(@Inject("sending_name") my_type : INFORMATION) {
    console.log(my_type);
   }

  ngOnInit(): void {
  }

  // id필드에 admin, pw필드에 1234를 친 경우에만 vibile
  tryToLogin() : void{
    if(this.id.value == 'admin' && this.pwd.value == '1234'){
      alert('signing in...'); // 아이디 비번 잘 쳤으면 로그인 된다고 말을 하고
      this.logedIn = true;
      this.sendMyEvent.emit(this.logedIn);  // app.component에 전달
    }else if(this.id.value != 'admin'){   
      this.setMessage = 'wrong id dude';    // id 틀렸을 때에 메세지 설정
      this.styleArray.wrong_id = true;
      this.styleArray.wrong_pwd = false;
    }else if(this.pwd.value != '1234'){
      this.setMessage = 'wrong password, try again!'; // 비밀번호 틀렸을때 메세지 설정
      this.styleArray.wrong_id = false;
      this.styleArray.wrong_pwd = true;
    }
  }


  set setMessage(msg) { // 메세지 설정하기
    this.message = msg;
  }

  get getMessage() : any{ // 메세지 가져오기
    return this.message;
  }
}