[ Ionic3 / 아이오닉3 ] Angular부터 시작하자 4. ngIf else

[ 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를 사용하도록 하자