템플릿에서 복잡하게 접근해야 되는 경우 Template Local Variable 을 활용하면 가독성을 높일수 있다.

AsIs

<ng-container *ngFor="let meta of metaConfigs">
    <form-layout *ngIf="formGroup.controls[meta.key].get('value')"
                     class="meta-dataset-file-info__aim-form-layout"
                     horizontal>
        <div>{{formGroup.controls[meta.key].get('value')}}</div>
     ...                

ToBe

<ng-container *ngFor="let meta of metaConfigs">
    <form-layout *ngIf="formGroup.controls[meta.key].get('value') as metaFormControl"
                     class="meta-dataset-file-info__aim-form-layout"
                     horizontal>
        <div>{{metaFormControl}}</div>

*ngIf 에서 as 키워드를 이용하면 template local variable 을 만들 수 있다. 이걸 이용해서 template 에서 좀 더 가독성있게 사용할 수 있다.

특히 객체를 담는 Signal 을 사용할때에도 유용했다.

AsIs

  <div class="container" *ngIf="user()">
    <app-profile-ui [user]="user()"/>
  </div>

user() 는 signal 인데 undefined를 담고 있어서 타입 오류가 있었다. 아직은 템플릿 상에서 지원을 못하는거 같아서 아래처럼 template local variable을 활용해서 해결 했다.

ToBe

  <div class="container" *ngIf="user() as localUser">
    <app-profile-ui [user]="localUser"/>
  </div>