1. Angular Material Table의 구조적 요구사항
- mat-table은 컬럼 정의를 <ng-container matColumnDef="컬럼명">로 감싸서 선언해야만,
내부적으로 컬럼을 인식하고 동적으로 헤더/셀을 매칭할 수 있습니다. - <th mat-header-cell *matHeaderCellDef>와 <td mat-cell *matCellDef="let row">는
반드시 <ng-container matColumnDef="..."> 안에 있어야 합니다.
2. 왜 그냥 <th>, <td>만 쓰면 안 되나요?
- 그냥 <th>, <td>만 쓰면 Angular Material이 어떤 컬럼이 어떤 데이터와 연결되는지 알 수 없습니다.
- <ng-container matColumnDef="name">처럼 컬럼 이름을 명시해야
displayedColumns 배열과 매칭해서 동적으로 컬럼을 렌더링할 수 있습니다. - <ng-container>는 실제 DOM에 렌더링되지 않으므로, 불필요한 태그가 추가되지 않습니다.
순서 | Angular material | Angular | 적용 태그 | 용례 |
열 먼저 정의 |
matColumnDef | CdkColumnDef | ng-container | matColumnDef="name" -> 해당 컬럼 이름 지정 |
matHeaderCellDef | CdkHeaderCellDef | th | *matHeaderCellDef Angular Material Table의 헤더 셀로 인식 & matColumnDef와 매칭 |
|
matCellDef | CdkCellDef | td | *matCellDef="let row" -> 각 행의 데이터를 변수로 받아오는 용도 matColumnDef="let row" -> 속성 바인딩. 단순 값 전달 |
|
행 정의 | matHeaderRowDef | CdkHeaderRow | tr | *matHeaderRowDef="displayedColumns" |
matRowDef | CdkRowDef | tr | *matRowDef="let row; columns: displayedColumns" -> 각 행의 데이터를 row 변수로 사용 어떤 컬럼을 어떤 순서로 보여줄지 지정 |
https://material.angular.dev/components/table/api
Angular Material
UI component infrastructure and Material Design components for Angular web applications.
material.angular.dev
- mat-header-cell: 이 셀이 Material Table의 헤더임을 지정 (스타일/역할 부여)
- *matHeaderCellDef: 이 셀이 컬럼 헤더의 템플릿임을 지정 (템플릿 연결)
- *matHeaderCellDef는 값을 넘기지 않아도,
<ng-container matColumnDef="컬럼명">와 자동으로 연결되어
해당 컬럼의 헤더 셀로 인식됩니다.
https://www.geeksforgeeks.org/angular-material-table/
Angular Material Table - GeeksforGeeks
Your All-in-One Learning Portal: GeeksforGeeks is a comprehensive educational platform that empowers learners across domains-spanning computer science and programming, school education, upskilling, commerce, software tools, competitive exams, and more.
www.geeksforgeeks.org
▼Agular material_table_Syntax
<table mat-table [dataSource]="data">
<!-- Column Definitions -->
<ng-container matColumnDef="column_name">
<th mat-header-cell *matHeaderCellDef>
Column Name
</th>
<td mat-cell *matCellDef="let element">
{{element.property}}
</td>
</ng-container>
<!-- Header and Rows -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<ng-container> 내부에서 column 을 먼저 정의하고
각 열인 <tr> 에 동적으로 column이 삽입된다
- 각 열(column)은 <ng-container matColumnDef="...">로 정의되어 있습니다.
- 이 안에 <th mat-header-cell *matHeaderCellDef>와 <td mat-cell *matCellDef="let row">가 있습니다.
- 이들은 Angular Material이 내부적으로 조합해서
<tr mat-header-row>에는 <th>들을,
<tr mat-row>에는 <td>들을 자동으로 채워 넣습니다.
matColumnDef="name" 에 전달하는 name은 컴포넌트에서 displayedColumns배열 내에 정의된 값이며,
displayedColumns는 matHeaderRowDef에 전달되는 값이다
<ng-container>에 *matColumn="어쩌구" 라고 정의했어도, displayedColumns에 어쩌구가 없으면 렌더링되지않는다
하 왜 이따구..씁
▼순수 자바스크립트 table 코드
<table id="calculator_table" border="1">
<thead>
<tr>
<th>🍞</th>
<th>메뉴명</th>
<th>금액</th>
<th>
<input type="text" name="person" placeholder="사람 이름">
<button class="td_delete" onclick="td_delete_event(this)">-</button>
</th>
<th>
<input type="text" name="person" placeholder="사람 이름">
<button class="td_delete" onclick="td_delete_event(this)">-</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><button class="tr_delete" onclick="tr_delete_event(this)">메뉴 삭제</button></td>
<td><input type="text" name="menu" placeholder="메뉴명"></td>
<td><input type="text" name="price" placeholder="금액"></td>
<td><input type="checkbox" name="check"></td>
<td><input type="checkbox" name="check"></td>
</tr>
</tbody>
</table>
'개발 공부 일지 > Angular' 카테고리의 다른 글
체크박스 동작 방식 (0) | 2025.06.05 |
---|---|
$event (0) | 2025.06.05 |
mat-tab-group (0) | 2025.06.05 |
앵귤러 장점 (0) | 2025.06.05 |
[Angular material UI] autocomplete (0) | 2025.06.05 |