[Angular] 개발 참고자료 목록

개요

---

이 페이지는 Angular 프로젝트로 앱/웹을 구현하면서, 검색하여 참고한 사이트 및 정보를 정리해놓았습니다.

 

참고자료 목록

---

Angular 일반

•  Angular Pipe 구현 시, 비동기 함수를 사용하는 방법

import { ChangeDetectorRef, Pipe, PipeTransform } from "@angular/core";
import { SettingService } from "src/app/services/setting/setting.service";
import { SETTING_KEY } from "src/app/models/enums/setting.enum";
import DateTimeUtils from "src/app/utils/datetime.util";

@Pipe({
  name: "localeDate",
  pure: false,
})
export class LocaleDatePipe implements PipeTransform {
  private lastValue: Date | undefined;
  private conversionValue: string | undefined;

  constructor(private readonly settingService: SettingService, private readonly ref: ChangeDetectorRef) {}

  transform(value: Date): string | undefined {
    if (value !== this.lastValue) {
      this.convertValue(value);
    }
    return this.conversionValue;
  }

  private async convertValue(value: Date): Promise<void> {
    const appLanguage = await this.settingService.getPreference(SETTING_KEY.APP_LANGUAGE);
    const conversionValue = DateTimeUtils.getLocaleFullDate(value, appLanguage);
    this.conversionValue = conversionValue;
    this.lastValue = value;
    // 변화가 발생했다고 알려주므로, Pipe 다시 렌더링
    this.ref.markForCheck();
  }
}

https://www.damirscorner.com/blog/posts/20210910-AsynchronousPipesInAngular.html

Asynchronous pipes in Angular

•  Angular Component 구현 시, 비동기 Props를 사용하는 방법

// Option 1
 ngOnInit () {
      (async () => {
        const data = await this.service.getData();
        this.data = this.modifyMyData(data);
      })();
}
// Option 2 
async ngOnInit() {      
   try {           
       const user = await userService.getUser();
    } catch (error) {           
        console.error(error);       
    }    
}

https://stackoverflow.com/questions/56092083/async-await-in-angular-ngoninit

•  @Input 태그 get, set 사용 시 표준 예시

@Component({
  selector: 'app-name-child',
  template: '<h3>"{{name}}"</h3>'
})
export class NameChildComponent {
  @Input()
  get name(): string { return this._name; }
  set name(name: string) {
    this._name = (name && name.trim()) || '<no name set>';
  }
  private _name = '';
}

https://angular.io/guide/component-interaction 

Angular

• [style] 속성을 활용한, 동적 스타일 적용

@Component({
  selector: 'app-nav-bar',
  template: `
<nav [style]='navStyle'>
  <a [style.text-decoration]="activeLinkStyle">Home Page</a>
  <a [style.text-decoration]="linkStyle">Login</a>
</nav>`
})
export class NavBarComponent {
  navStyle = 'font-size: 1.2rem; color: cornflowerblue;';
  linkStyle = 'underline';
  activeLinkStyle = 'overline';
  /* . . . */
}

https://angular.io/guide/class-binding