Angular로 표시 및 숨기기

Angular에서 구성 요소나 요소를 표시하거나 숨기는 예를 소개합니다.

Angular로 표시 및 숨기기

상용 애플리케이션을 개발할 때 사용자 역할이나 조건에 따라 일부 데이터를 숨겨야 합니다. 해당 애플리케이션의 조건에 따라 동일한 데이터를 표시해야 합니다.

이 자습서에서는 조건에 따라 데이터를 표시하고 숨길 수 있는 간단한 방법을 보여 드리겠습니다.

다음 명령을 사용하여 새 응용 프로그램을 만들어 보겠습니다.

# angular
ng new my-app

Angular에서 새 애플리케이션을 만든 후 이 명령을 사용하여 애플리케이션 디렉토리로 이동합니다.

# angular
cd my-app

이제 앱을 실행하여 모든 종속 항목이 올바르게 설치되었는지 확인하겠습니다.

# angular
ng serve --open

조건이 true인 경우에만 표시하고 false인 경우 숨기려는 템플릿 또는 코드 블록이 있다고 가정합니다. 이 예제를 사용하여 표시하거나 숨길 수 있습니다.

먼저 app.component.html에 제목, 단락 및 입력 필드가 포함된 데모 콘텐츠를 만들고 div로 래핑합니다.

# Angular
<div>
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element"/>
</div>

이제 app.component.ts에서 새 변수 element를 만들고 false로 설정합니다.

# Angular
element = false;

*ngIf를 사용하여 조건에 따라 div를 표시하고 숨깁니다.

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element"/>
</div>

위의 예에서 볼 수 있듯이 element가 true이면 div가 표시되고 조건이 false이면 표시되지 않는 조건을 설정했습니다.

따라서 요소를 거짓으로 설정했기 때문에 div는 숨겨집니다. 이제 element의 값을 true로 변경하고 어떻게 작동하는지 확인해 보겠습니다.

출력:

이제 element의 값을 변경했을 때 div에 설정한 조건이 변경되었고 내부의 모든 요소와 함께 div가 표시되기 시작했음을 알 수 있습니다.

특정 버튼을 클릭할 때마다 데이터를 표시하고 숨기고 싶다고 상상해 보십시오. 동일한 *ngIf를 사용하여 이 간단한 예를 만들 수 있습니다.

이제 showData()와 hideData() 함수가 있는 두 개의 버튼을 만들어 보겠습니다. div 외부에 이 두 개의 버튼을 생성해야 조건이 false로 변경될 때 숨겨지지 않습니다.

따라서 app.component.html의 코드는 아래와 같습니다.

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element" />
</div>
<button (click)="showData()">Display Data</button>
<button (click)="hideData()">Hide Data</button>

이제 app.component.ts에 이 두 함수를 생성해 보겠습니다. showData()는 element의 값을 true로 변경하고 hideData()는 element의 값을 false로 변경합니다.

따라서 코드는 아래와 같을 것입니다.

# Angular
showData() {
    return (this.element = true);
  }
  hideData() {
    return (this.element = false);
  }

이제 버튼을 보기 좋게 만들기 위해 몇 가지 CSS 코드를 추가합니다.

# Angular
button{
  margin-top: 10px;
  padding: 10px;
  background-color: aquamarine;
  border: none;
  margin-right: 10px;
}

어떻게 작동하는지 확인해 봅시다.

출력:

위의 예에서 볼 수 있듯이 *ngIf 및 버튼 (click) 메서드를 사용하여 콘텐츠를 쉽게 숨기고 표시할 수 있습니다.

데이터가 숨겨져 있을 때 콘텐츠가 데이터 숨기기 버튼을 표시할 때 데이터 표시 버튼을 숨기려면 버튼에도 동일한 개념을 사용할 수 있습니다.

따라서 요소가 true이면 *ngIf 조건을 만들어 보겠습니다. 데이터 숨기기 버튼만 표시되고 element가 false이면 데이터 표시 버튼이 표시됩니다.

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element" />
</div>
<button *ngIf="element == false" (click)="showData()">Display Data</button>
<button *ngIf="element == true" (click)="hideData()">Hide Data</button>

app.component.ts 파일에 코드 줄을 작성할 필요가 없습니다. 우리가 만든 함수와 *ngIf 함수가 버튼에서 동일한 작업을 수행하는 데 도움이 되기 때문입니다. 그럼 이제 어떻게 동작하는지 결과를 확인해 볼까요?

출력:

그래서 이 튜토리얼에서는 *ngIf를 사용하여 조건에 따라 콘텐츠를 숨기고 표시하는 방법을 배웠고 버튼의 (click) 메서드를 사용하여 버튼 click.