웹사이트 검색

내장된 Angular 지시어 사용 방법: ngIf, ngFor, ngClass 등

Angular의 지시어는 애플리케이션의 일부에 추가 동작을 추가합니다. 가장 일반적이고 유용한 지시문을 사용하는 방법을 알아보세요.

Angular 프로젝트의 HTML에 지시어를 추가할 수 있습니다. 일부는 마크업의 구조를 제어하는 반면 다른 일부는 속성에 중점을 둡니다.

이 기사에서는 가장 일반적인 6가지 Angular 지시문인 ngFor, ngIf, ngClass, ngStyle, ngModel 및 ngSwitch를 살펴보겠습니다.

각도 지시문이란 무엇입니까?

Angular 지시문을 사용하면 if 문과 for 루프를 사용하고 Angular 프로젝트의 HTML 코드에 다른 동작을 추가할 수 있습니다.

*ngIf

특정 HTML 블록이 특정 조건을 충족하는 경우에만 표시되도록 하려면 ngIf를 사용할 수 있습니다. 예를 들어, 사용자가 특정 필드에 입력을 입력한 후에 표시되는 팝업이 있는 양식이 있는 경우입니다.

*ngFor

특정 블록을 여러 번 반복해야 하는 경우 ngFor를 사용할 수 있습니다. 예를 들어 항목 목록이 있고 각 항목에 대한 div를 표시해야 하는 경우입니다.

*ngClass

클래스를 사용하여 조건부 스타일을 추가합니다. if 문이 조건을 충족하면 지정된 클래스가 적용됩니다.

*ngStyle

이것은 조건부 인라인 스타일을 추가합니다. if 문이 조건을 충족하면 지정된 스타일이 적용됩니다.

*ngModel

이렇게 하면 양방향 바인딩이 가능해집니다. 이는 HTML과 TypeScript 파일 간에 양방향으로 데이터를 전달할 수 있음을 의미합니다. 예를 들어 TypeScript 파일에서 HTML 파일로 또는 그 반대로 속성 값을 전달할 수 있습니다.

*ngSwitch

이를 통해 많은 값을 확인하기 위해 많은 사례가 포함된 스위치 문을 추가할 수 있습니다. 사례에 따라 특정 HTML 요소가 표시됩니다.

구조적 지시어에는 HTML 요소의 구조가 포함됩니다. 여기에는 ngIf, ngFor 및 ngSwitch가 포함됩니다. 속성 지시어에는 HTML 요소의 속성 변경이 포함됩니다. 여기에는 ngStyle, ngClass 및 ngModel이 포함됩니다.

ngIf를 사용하는 방법

ngIf를 사용하려면 특정 HTML 요소가 표시되도록 true로 평가하는 조건이 필요합니다.

  1. TypeScript 파일에 두 개의 변수를 추가합니다. 이 예에는 noPlaylists 변수와 재생 목록을 저장하는 변수가 있습니다. 이 변수는 재생 목록 배열의 길이가 0인 경우 true로 평가됩니다.

    noPlaylists: boolean = false;
playlists: any = [];
 
constructor() { }
  ngOnInit(): void {
    if(this.playlists.length === 0) {
      this.noPlaylists = true;
    }
}

  2. HTML에 *ngIf 문을 추가합니다. noPlaylists가 true인 경우 아래 범위에 포함된 오류 메시지가 나타납니다. 그렇지 않으면 그렇지 않습니다. 다양한 유형의 HTML 태그에 ngIf를 적용할 수 있습니다.

    <div *ngIf="noPlaylists" class="center">
      <span class="errorMessage">There are no playlists available.</span>
</div>

  3. if 문에 "else" 구성 요소를 추가하려면 템플릿 블록의 "else" 부분에 대한 HTML 코드를 추가해야 합니다.

    <div *ngIf="noPlaylists; else playlistsExist" class="center">
      <span class="errorMessage">There are no playlists available.</span>
</div>
<ng-template #playlistsExist>
    <div class="center">
        <span class="successMessage">Playlists found.</span>
    </div>
</ng-template>

ngFor를 사용하는 방법

페이지에서 특정 수의 블록을 반복해야 하는 경우 ngFor 지시어를 사용할 수 있습니다.

  1. TypeScript 파일에서 배열에 항목을 추가합니다.

    playlists: any = [
   {"name": "Rock", "numberOfSongs": 5},
   {"name": "Contemporary", "numberOfSongs": 9},
   {"name": "Popular", "numberOfSongs": 14},
   {"name": "Acoustic", "numberOfSongs": 3},
   {"name": "Wedding Songs", "numberOfSongs": 25},
   {"name": "Metal", "numberOfSongs": 0},
];

  2. HTML 파일에 *ngFor 문을 추가합니다.

    <span class="successMessage">Playlists found.</span>
<div *ngFor="let playlist of playlists" class="item">
    <div class="flex">
       <span>{{playlist.name}}</span>
       <span>{{playlist.numberOfSongs}} songs</span>
    </div>
</div>

ngClass를 사용하는 방법

조건에 따라 특정 div가 사용하는 스타일 클래스를 변경할 수 있습니다.

  1. 스타일이 다른 두 개의 클래스를 CSS 파일에 추가합니다. 다양한 배경색 등 원하는 모든 종류의 CSS 스타일을 추가할 수 있습니다.

    .songs {
  background-color: #F7F5F2;
}
.noSongs {
  background-color: #FFA8A8;
}

  2. 이전 단계의 for 루프 내에 ngClass 속성 지시어를 추가합니다. [ngClass]="playlist.numberOfSongs > 0 ? 'songs' : 'noSongs'"는 JavaScript 및 기타 언어에서 사용하는 것과 동일한 삼항 연산자를 사용합니다.

    <div *ngFor="let playlist of playlists" class="item" [ngClass]="playlist.numberOfSongs > 0 ? 'songs' : 'noSongs'">
    <div class="flex">
        <span>{{playlist.name}}</span>
         <span>{{playlist.numberOfSongs}} songs</span>
     </div>
 </div>

ngStyle 사용 방법

클래스를 통한 스타일링 대신 인라인 스타일을 적용하려는 경우 ngClass를 사용하는 대신 ngStyle을 사용할 수 있습니다.

  1. 대신 ngStyle을 사용하도록 이전 단계의 ngClass를 변경하세요.

    <div *ngFor="let playlist of playlists" class="item" [ngStyle]="{'background-color': playlist.numberOfSongs > 0 ? '#F7F5F2' : '#FFA8A8' }>
     <div class="flex">
         <span>{{playlist.name}}</span>
         <span>{{playlist.numberOfSongs}} songs</span>
     </div>
 </div>

  2. 두 개 이상의 인라인 스타일을 적용해야 하는 경우 각 스타일을 쉼표로 구분할 수 있습니다.

    [ngStyle]="{'background-color': playlist.numberOfSongs > 0 ? '#F7F5F2' : '#FFA8A8', 'color': playlist.numberOfSongs > 0 ? 'black' : 'darkblue' }"

ngModel을 사용하는 방법

양방향 바인딩에는 ngModel을 사용할 수 있습니다. 이는 HTML과 TypeScript 파일 간에 속성 값을 전달할 수 있음을 의미합니다.

예를 들어 HTML 파일에 ngModel을 사용하는 입력 요소가 있다고 가정해 보겠습니다. ngModel 속성은 TypeScript 파일의 변수에 바인딩됩니다. 입력에 값을 입력하면 TypeScript 파일의 변수가 업데이트됩니다.

TypeScript 파일의 속성에 대한 변경 사항은 다른 div가 해당 변수를 사용하는 경우 HTML에도 반영됩니다.

  1. app.module.ts에서 FormsModule을 파일 상단의 imports와 imports 배열에 추가합니다.

    import { FormsModule } from '@angular/forms';
@NgModule({
    imports: [
        ...
        FormsModule
    ]
})

  2. 사용자가 재생 목록 이름을 바꾸는 시점을 추적하려면 TypeScript 파일에 속성을 추가하세요.

    renamingPlaylists: boolean = false;

  3. HTML 파일에서 ngModel을 사용할 때 액세스할 수 있도록 재생 목록 변수를 공개로 만듭니다.

    public playlists: any = [
    ...
];

  4. HTML 파일에 두 개의 버튼을 추가하면 각 재생 목록의 이름을 바꾸거나 이름 바꾸기를 취소할 수 있습니다.

    <button type="button" class="btn btn-info" *ngIf="!renamingPlaylists" (click)="renamingPlaylists=true">Rename Playlists</button>
<button type="button" class="btn btn-info" *ngIf="renamingPlaylists" (click)="renamingPlaylists=false">Stop renaming</button>

  5. 각 재생 목록의 div 안에 입력 상자를 추가합니다. 입력 내용은 재생목록 이름 바꾸기 버튼을 클릭할 때만 표시됩니다. 이 입력 상자에는 "playlist.name"에 바인딩된 ngModel이 있습니다.

    <input type="text" *ngIf="renamingPlaylists" class="form-control input-field" id="name" required [(ngModel)]="playlist.name" />

ngSwitch를 사용하는 방법

ngSwitch를 사용하여 스위치 케이스 내의 케이스를 기반으로 특정 요소를 표시할 수 있습니다.

  1. 재생 목록 배열 내부의 개체에 새로운 "등급" 속성을 추가합니다. 이 속성은 0에서 5(포함) 사이의 숫자일 수 있습니다.

    public playlists: any = [
    {"name": "Rock", "numberOfSongs": 5, "rating": 5},
    {"name": "Contemporary", "numberOfSongs": 9, "rating": 1},
    {"name": "Popular", "numberOfSongs": 14, "rating": 5},
    {"name": "Acoustic", "numberOfSongs": 3, "rating": 4},
    {"name": "Wedding Songs", "numberOfSongs": 25, "rating": 5},
    {"name": "Metal", "numberOfSongs": 0, "rating": 0},
  ];

  2. 재생 목록의 노래 이름과 번호 아래에 스위치 케이스를 추가하세요. 재생목록의 등급 번호에 따라 재생목록에 올바른 별 수가 표시됩니다.

    <div class="flex">
   <span>{{playlist.name}}</span>
   <span>{{playlist.numberOfSongs}} songs</span>
</div>
<div [ngSwitch]="playlist.rating" style="text-align:right">
    <div *ngSwitchCase="'1'">★</div>
   <div *ngSwitchCase="'2'">★★</div>
   <div *ngSwitchCase="'3'">★★★</div>
   <div *ngSwitchCase="'4'">★★★★</div>
   <div *ngSwitchCase="'5'">★★★★★</div>
   <div *ngSwitchDefault>No ratings</div>
</div>

Angular로 더 많이 배우기

이제 ngIf, ngFor, ngClass, ngStyle, ngModel 및 ngSwitch 사용 방법을 포함하여 Angular 지시문의 기본 사항을 배웠습니다. 이를 결합하여 보다 복잡한 사용자 인터페이스를 만들 수 있습니다. 초보자든 고급 수준이든 관계없이 Angular에 대해 탐색하고 배울 수 있는 것이 훨씬 더 많습니다.

관련기사: