[Angular-06]if문

JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.

기초지식은 다른 강의를 참조하도록 하라.

또한 Angular에서는 JavaScript로 번역되는 TypeScirpt라는 새로운 언어를 사용한다.

이 언어는 JavaScript에 Type을 추가한 언어로 좀더 객체지향적인 설계가 가능한 언어이다.

이 언어에 대해서 조금씩의 설명은 있겠지만 자세한 설명은 다루지 않을 계획이다.

필자는 아직 이 TypeScript를 강의로 제공할 생각이 없으므로 자세히 알고싶다면

https://www.typescriptlang.org/

를 참조하라.

Angular에서 if문을 사용하여 보자.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'kukaro';
}

component단의 예제코드는 위와 같다.

단순 if문

<p *ngIf="name.length > 6">1.{{name}}'s length is bigger than 6</p>
<p *ngIf="name.length == 6">2.{{name}}'s length is bigger than 6</p>
<p *ngIf="name.length < 6">3.{{name}}'s length is bigger than 6</p>

if문 angular에서 *ngIf로 사용한다. 그리고 내부에 조건을 적어준다.

위의 코드는 name이라는 변수가 넘어올때 길이를 체크해서 6보다 크다면, 같다면,작다면 각각 렌더링되고

그렇지 않다면 렌더링이 되지 않는다.

한번 테스트해보도록 하자.

보다시피 제대로 렌더링이 된걸 알 수 있다.

if-else문

<b *ngIf="name.length > 6; else elseCase">{{name}}'s length is bigger than 6</b>
<ng-template #elseCase>
  <b>{{name}}'s length is not bigger than 6</b>
</ng-template>

else문을 쓸때는 위와같이 사용한다. If문에서 else뒤에 오는 케이스를 랜더링 하게 된다.

처음 보는 문법이 나오는데 이는 ng-template이다.

ng-template태그는 보통때는 렌더링이 되지 않고 보이지 않는다.

그리고 조건이 맞을때 호출되는 곳에서 렌더링 된다.

위의 코드에경우 ngIf에서 if캐이스가 거짓일 경우, #elseCase라는 놈을 찾아서 렌더링 하게 된다.

그래서 ng-template를 렌더링 하게 된다.

그럼 실행해 보도록 하자.

보다시피 else캐이스가 제대로 렌더링 된 것을 볼 수 있다.

if-then-else문

<ng-container *ngIf="name.length > 6; then ifCase else elseCase"></ng-container>
<ng-template #ifCase>
  <b>{{name}}'s length is bigger than 6</b>
</ng-template>
<ng-template #elseCase>
  <b>{{name}}'s length is not bigger than 6</b>
</ng-template>

if-else구문이 있다면 if-then-else문도 존재한다.

사실 둘은 기능적으로는 차이가 없다.

단 코드가 더 깔끔하게 보이고싶다면 if-then-else문을 사용하는 경향이 있다.

아니면 코드가 길다던가.

위의 코드를 보면 ng-container라는 것이 처음 등장한다.

이는 ng-template와 비슷한 역활인데 다른점이 있다면 ng-container는 반드시 렌더링 한다는 것이다.

즉 ng-template는 렌더링 되지 않고 남이 호출할때만 불려와서 렌더링이 된다면

ng-container는 렌더링이 된다. 대신 남이 호출할때도 렌더링이 되겠지만 그렇게 사용하지는 않는다.

위의 코드를 보면 then캐이스(통상의 if캐이스)에서는 ifCase가 렌더링된다.

반대의 경우 else캐이스가 렌더링 된다.

elseif문

없다.

당황 스럽겠지만 없다.

중첩해서 사용하던가 템플릿을 만들어서 써야한다.