[Angular Material] Tree

 

 

Material에서 Tree 기능은 아래와 같다.

 

 

Material에서 제공하는 Tree 예제 코드

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
	<!-- 하위 메뉴가 없는 메뉴 -->
	<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)="openMenu(node)">
		<span class="tree-icon">
			<mat-icon mat-list-icon>{{node.icon}}</mat-icon>
		</span>
<!--		<button mat-icon-button disabled></button>-->
		{{node.displayName}}
	</mat-tree-node>

	<!-- 하위 메뉴가 있는 메뉴 -->
	<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)="openMenu(node)">
		<button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
			<mat-icon class="mat-icon-rtl-mirror">
				{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
			</mat-icon>
		</button>
		{{node.displayName}}
	</mat-tree-node>
</mat-tree>

 

 

tree를 사용하려고 예제 코드를 실행시켰는데, 특수 문자(코드에서는 <button mat-icon-button ... 으로 시작하는 부분)을 클릭해야지 트리 접기/펴기 기능이 가능했다. 하지만 실제 웹 서비스에서는 특수문자 옆에 있는 텍스트를 클릭했을 때,  접기/펴기 기능이 실행되는 것이 편리하다.

 

 

그래서 처음 생각한 방법은 <button> element에 class를 추가해서 텍스트를 클릭했을 때, <button> 클래스를 클릭하도록 유도하는 것이었다. JQuery로 예를 들면, $(".foldingBtn").click(); 이 되겠다. 하지만, 본 프로젝트에서는 JQuery 사용을 최대한 지양하는 것이 목표였기에 좀 더 고민해보기로 했다.

 

 

 

<button> 요소 코드를 보면 matTreeNodeToggle 라고 적혀있는데, 왠지 이게 folding 기능과 관련이 있을 것 같아서 Material 사이트에서 검색을 해봤다.

구글 번역기를 이용해서 해석해보면,

 

트리 노드 템플릿에 matTreeNodeToggle을 추가하여 트리 노드를 확장 / 축소 할 수 있습니다.

토글은 TreeControl에서 확장 / 축소 기능을 토글하며 [matTreeNodeToggleRecursive]를 true로 설정하여 트리 노드를 재귀 적으로 확장 / 축소 할 수 있습니다.

 

 

오.. 확실히 뭔가 관련이 있는 것 같아보여서 'matTreeNodeToggle' 문구의 위치를 folding 기능을 사용하고 싶은 <mat-tree-node... > 에 넣어보았다.

 

변경 전

 

 

변경 후

 

 

혹시나 하는 마음에 수정하고 테스트한 결과!!!! 아주 잘된다!!!!!!!! 굳이 jquery 모듈을 추가하지 않아도 처리되었다!!!!!!!!!

역시.. 외부 플러그인이나 모듈 사용할 땐, 해당 문서를 꼼꼼히 읽어보는게 빠르게 해결할 수 있는 방법같다....

 

 

 

 

 

 

 

참고: https://material.angular.io/components/tree/overview

Angular Material