본문 바로가기
개발/Angular

[Angular] 앵귤러 ngIf, ngSwitch, ngFor :: 마이자몽

by 🌻♚ 2018. 10. 6.

이번 글에서는 angular view단에서 조건문이나 반복문을 사용하는 법을 실습할것이다.

자바개발을 해본 사람들은 jstl과 비슷한 기능을 사용한다고 생각하면 될것이다.

material을 사용해서 뷰단 컴포넌트들을 꾸며줄것이니 material 모듈 사용법은 http://myjamong.tistory.com/29 링크를 통해 확인한다.


필자는 test1이라는 컴포는트를 만들어서 진행했다.

기본으로 존재하는 app.component.html에 test1 selector만 추가했다.


app.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule, MatButtonModule, MatInputModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Test1Component } from './test1/test1.component';
 
@NgModule({
  declarations: [
    AppComponent,
    Test1Component
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    MatFormFieldModule,
    MatButtonModule,
    MatInputModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 
cs





test1.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-test1',
  templateUrl: './test1.component.html',
  styleUrls: ['./test1.component.css']
})
export class Test1Component {
  inputName: string = "mango";
  fruits: string[] = ['jamong','mango','grape'];
}
 
 
cs


inputName은 다 사용할것이고, fruits는 ngFor를 사용할때 쓸것이다.




1.ngIf

ngIf는 다양하게 사용이 가능하다.

단독으로 사용이 가능하고, else 그리고 then else를 같이 사용하는 방법이있다.



test1.component.html(단독사용)

1
2
3
4
5
<mat-form-field>
    <input matInput type="text" placeholder="입력하세요.." [(ngModel)]="inputName">
</mat-form-field>
 
<p *ngIf="inputName == 'jamong'">{{inputName}}을 입력하였습니다.</p>
cs


ngIf와 조건을 p태그에 붙여줌으로써 조건에 부합하는 경우에만 p태그가 화면에 보여진다.





view(단독사용)




test1.component.html(then else 사용)

1
2
3
4
5
6
7
8
9
10
11
12
13
<mat-form-field>
    <input matInput type="text" placeholder="입력하세요.." [(ngModel)]="inputName">
</mat-form-field>
 
<p *ngIf="inputName == 'jamong'; then thenResult; else otherResult">{{inputName}}을 입력하였습니다.</p>
 
<ng-template #thenResult>
  <p>{{inputName}} 입니다.</p>
</ng-template>
 
<ng-template #otherResult>
  <p>jamong이 아니고 {{inputName}} 입니다.</p>
</ng-template>
 
cs


ngIf조건 뒤에 then else를 사용해서 inputName이 jamong인 경우 #thenResult template이 출력되고,

아닌경우 #otherResult의 template이 출력된다.

이 경우, ngIf조건이 붙여진 p태그 안의 text내용은 무시된다.





view(then else 사용)

여러 언어들을 다루다 보면 if then else를 사용했으니 else if로 여러 조건이 있는 경우 어떻게 코딩을 해야할지 찾아볼것이다.

안타깝게도 아직은, else if조건이 없다.

대신에 여러 조건들이 있는경우, ngSwitch를 사용하면 된다.





2.ngSwitch

ngSwitch는 ngSwitchCase와 ngSwitchDefault 속성을 사용한다.

코드를 보면 어떻게 사용되는지 쉽게 확인할수 있을것이다.


test1.component.html

1
2
3
4
5
6
7
8
9
10
<mat-form-field>
    <input matInput type="text" placeholder="입력하세요.." [(ngModel)]="inputName">
</mat-form-field>
 
<ul [ngSwitch]='inputName'>
  <li *ngSwitchCase="'jamong'">{{inputName}}은 3000원이에요</li>
  <li *ngSwitchCase="'mango'">{{inputName}}은 4000원이에요</li>
  <li *ngSwitchCase="'grape'">{{inputName}}은 5000원이에요</li>
  <li *ngSwitchDefault>{{inputName}}은 팔지 않아요</li>
</ul>
 
cs





view




3.ngFor

반복문을 사용해서 table이나 list를 출력해주는 작업을 할 수 있다.

다만, object를 이용한 반복만 가능하다.

다른 언어에서 처럼 for(int i=0; i < 5; i++) 과 같이 일전 횟수 반복을 하기 위해서는 배열에다 숫자를 넣어서 작업을 해줘야한다.



test1.component.html

1
2
3
4
5
<ul>
  <li *ngFor='let fruit of fruits'>
    {{fruit}}
  </li>
</ul>
cs





view


태그

댓글0