Angular 2의 ngIf 개념

1. CSS의 구성 요소 숨기기 대 Angular 2의 ngIf
2. Angular 2의 ngIf 표현
3. Angular 2에서 ngIf를 사용하는 단계

Angular 2에서 ngIf 지시문은 Angular 2에서 가장 간단하고 유용한 지시문 중 하나입니다. 표현식 평가에 따라 HTML 요소를 조건부로 표시하거나 숨기는 데 사용됩니다.

ngIf 지시문은 표현식을 평가하고 true로 평가되면 주어진 요소를 렌더링합니다. 그렇지 않으면 해당 요소를 전혀 렌더링하지 않습니다.

이 지시문은 여러 보기가 공통 특성을 공유할 때 DOM 요소의 수를 줄이는 데 도움이 됩니다.

이 기사는 ngIf에 대한 모든 것을 알려줄 것입니다.

CSS의 구성 요소 숨기기 대 Angular 2의 ngIf

HTML에 if 문이 부족하더라도 CSS의 표시 및 가시성 속성을 사용하여 페이지 섹션을 숨길 수 있습니다.

HTML 요소에서 CSS 속성을 추가하거나 제거하고 JavaScript를 사용하여 페이지에서 요소를 숨길 수 있습니다. 그러나 이것은 ngIf와 동일하지 않습니다.

요소가 ngIf에 숨겨져 있으면 페이지에 존재하지 않습니다.

Chrome 개발자 도구를 사용하여 페이지를 조사하면 DOM에 HTML 요소가 표시되지 않습니다.

Angular 2의 ngIf 표현

ngIf 지시문은 부울뿐만 아니라 모든 유효한 Typescript 구문을 입력으로 받아들입니다. 다음으로 표현식의 완전성을 평가하여 요소를 표시할지 여부를 결정합니다.

부울 외에도 ngIf에 텍스트, 배열 및 개체를 보낼 수도 있습니다.

Angular 2에서 ngIf를 사용하는 단계

Angular 2에서 ngIf를 사용하려면 다음 단계를 따라야 합니다.

예시:

Angular 2에서 ng-if의 완전한 예를 살펴보겠습니다.

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: 
    `<h1 *ngIf=" 34< 100" >I'm Adil</h1> 
    <h1 *ngIf="3>1" > I'm John</h1>
    <h1 *ngIf="46<200" >I'm Steven</h1>`,
})
export class AppComponent  {
 }

위 코드의 라이브 데모를 확인하려면 여기를 클릭하세요.