[Angular] ngIf 조건에 따라 데이터 보여주기

Q. 클릭했을때만 보여지게 해주세요.

조건식에 따라서 데이터를 보여지게 할 때가 많다. 버튼을 클릭했을때 보여지게 한다던가, 로그인 상태일때만 보여지게 한다던가 하는 조건들이 있을때 사용하는것이 ngIf이다. 이름에서만 봐도 이걸 사용하면 되겠다는 느낌이든다. 바로 사용 방법을 알아보자.

ngIf를 사용할때는 *을 앞에다가 붙이고 I가 대문자임에 유의하자.

 

<button (click)="isShow = isShow === true ? false : true">보여주자!</button>

<div>보이지롱</div>

<ng-container *ngIf="isShow">
	<div>클릭해야 보이지롱</div>
</ng-container>

export class BoardComponent implements OnInit{
	constructor() { }

  	ngOnInit(): void {
  	
    }
	//ngIf에 사용할 변수선언
    isShow:boolean = false;
}

사용 방법은 간단하다. 조건식을 달고싶은 html태그에다가 *ngIf를 사용해서 조건을 달아주면된다.

*ngIf = "조건" 이면 조건이 참 일때만 보여지게된다.

 

ngIf를 사용할때 div나 span태그에 사용하게 되는데 ngIf를 사용하기위해 의미없는 div태그로 묶는 경우가있다.

이때 불필요한 div나 span태그를 사용하지않도록 하기위해 ng-container를 사용한다. 가시적으로도 조건문이 걸려있거나 다른 옵션이 걸려있는것을 알아보기도 쉽기때문에 ng-container를 사용하는것을 지향한다.

 

나쁜 예시와 좋은 예시를 보여주며 글을 마무리한다.

<div *ngIf="isShow">
	<div>나쁜예시</div>
</div>

<ng-container *ngIf="isShow">
	<div>좋은 예시</div>
</ng-container>