템플릿 변수 / template variables

https://www.angular.kr/guide/template-reference-variables

Angular 가이드

 

 

• #menu만 쓰면, 해당 요소의 DOM 객체를 참조합니다.
• #menu="matMenu"처럼 쓰면, 해당 요소의 Angular Material MatMenu 인스턴스(즉, 디렉티브 인스턴스)를 참조합니다.

• 즉, menu는 MatMenu 타입이 됩니다.
• 이 타입은 Angular Material이 제공하는 여러 메서드(openMenu(), closeMenu() 등)와 속성을 사용할 수 있게 해줍니다.

• 단순히 DOM 요소가 아니라, Angular Material의 기능(메서드, 속성 등)을 사용하려면 #menu="matMenu"처럼 타입을 명시해야 합니다.
• 예를 들어, [matMenuTriggerFor]="menu"와 같이 메뉴 트리거에서 사용할 때, menu가 MatMenu 타입이어야 제대로 동작합니다.

matMenuTriggerFor 에는 타입변수 #menu를 참조 

#menu는 <mat-menu> DOM 엘리먼트 를 참조한다.

 <button

              [matMenuTriggerFor]="menu"

              (click)="clickMore($event, row)"

            >

 

 

• Angular 템플릿에서는 참조 변수의 위치(위/아래)에 상관없이 사용할 수 있습니다.
• Angular가 템플릿을 한 번에 처리하기 때문입니다.