앱개발/Ionic 3 / 아이오닉 3
[ Ionic3 / 아이오닉3 ] Angular부터 시작하자 4. ngIf else
ODB
2017. 9. 4. 20:49
[ Ionic3 / 아이오닉3 ] Angular부터 시작하자 4. ngIf else
일단 지난 3. 에서 한 내용만 두고 주석처리를 하고 가도록 하겠다
app-twoway만 두고
if else 를 해보도록 하자
스샷이 귀찮으니 app/twoway.component.ts 가서 this.greeting = "Hello App?"; 를 삭제하고 저장
그러면 아무것도 안나오는 text field 만 뜬다
이 상태로 글을 입력하면?
글이 잘 입력된다
자 그럼 if else를 써보도록 하자
app/twoway/twoway.component.html로 와서
<p *ngIf="!greeting"> Type anything in the textbox</p>
를 최상단에 넣고 아래와 같은지 확인한다
그러면 어떻게 될까?
greeting에 내용이 없으면? Type anything in the textbox 가 보일것이고 greeting에 내용이 들어가면(textbox에 아무값이나 입력이 되면) Type anything in the textbox는 사라지게 된다
그럼 else를 사용하여 아래와 같이 구성하고
*showGreeting으로 지정된 ng-template가 greeting이 false가 아닌경우에 활성화가 된다
그냥 값이 입력되면 you did... 가 출력되고 값이 없으면 Type..... 가 뜬다
잘 되면? 다음 포스팅에서 ngFor를 사용하도록 하자