# Angular 포매터

이 Angular 포매터로 Angular 컴포넌트 템플릿의 형식을 지정하세요. 구조적 지시문, 바인딩, 보간이 포함된 템플릿 HTML를 붙여넣으면 도구가 div, section, p, ul, table 같은 블록 요소를 두 칸 들여쓰기해 각각 별도의 줄에 배치하고, 불필요한 공백을 정리하며, 인라인 script 및 style 블록의 형식을 지정합니다. 지시문, 바인딩, 표현식은 작성된 그대로 유지되므로 Angular 개발자는 깔끔한 템플릿을 빠르게 얻을 수 있습니다.

## 자주 묻는 질문

### Angular 포매터로 무엇을 형식 지정할 수 있나요?

Angular 컴포넌트 템플릿, 즉 .component.html 파일이나 템플릿 문자열에서 작성하는 HTML의 형식을 지정합니다. TypeScript 컴포넌트 클래스는 여기서 처리하지 않습니다. 해당 클래스에는 TypeScript 포매터를 사용하세요.

### 지시문과 바인딩은 유지되나요?

네. *ngIf, *ngFor, [value], (click), [(ngModel)] 같은 속성과 {{ user.name }} 같은 보간은 작성된 그대로 복사됩니다. 요소 사이의 공백만 변경됩니다.

### 어떤 요소가 별도의 줄에 배치되나요?

요소에 div, section, article, header, footer, nav, main, form, p, h1부터 h6, ul, ol 또는 table 같은 블록 수준 자식 요소가 있으면 각 자식 요소가 들여쓰기된 별도의 줄에 배치됩니다. 이러한 자식 요소가 없는 요소는 공백이 연속된 부분을 한 칸으로 줄여 한 줄에 유지됩니다.

### 사용자 지정 컴포넌트가 한 줄에 그대로 있는 이유는 무엇인가요?

app-root나 mat-card 같은 사용자 지정 요소는 블록 수준 HTML 요소가 아니므로, 콘텐츠에 div나 p 같은 블록 요소가 포함되지 않으면 인라인으로 유지됩니다. 내용을 여러 줄로 펼치려면 블록 요소로 감싸세요.

### 목록 항목은 각각 별도의 줄에 배치되나요?

항목만으로는 그렇지 않습니다. li는 블록 수준 태그에 포함되지 않으므로 자식 요소가 li뿐인 ul은 한 줄에 유지됩니다. 항목 안에 div 같은 블록 콘텐츠를 넣으면 여러 줄로 펼쳐집니다.

### script 및 style 태그는 어떻게 처리되나요?

인라인 style 블록은 CSS으로, 인라인 script는 JavaScript로 형식을 지정해 태그 아래에 들여씁니다. pre 및 textarea 요소의 콘텐츠는 작성된 그대로 유지됩니다.

### HTML 주석은 유지되나요?

네. HTML 주석을 유지하고 여러 줄로 펼쳐진 요소 안에서 각 주석을 별도의 줄에 배치합니다. 주석 내용은 그대로 복사되므로 주석 처리된 마크업도 원래 상태로 유지됩니다.

### 템플릿의 유효성을 검사하나요?

아니요. 템플릿을 컴파일하거나 검사하지 않으며, 닫히지 않은 태그도 가능한 범위에서 형식을 지정합니다. 템플릿 오류를 찾으려면 ng build 또는 편집기의 Angular 언어 서비스를 사용하세요.

### 출력이 html 펜스로 감싸져 있는 이유는 무엇인가요?

Angular 템플릿은 HTML이므로 결과는 html이 표시된 Markdown 코드 블록으로 반환됩니다. 템플릿 파일에 사용할 코드는 펜스 사이의 줄을 복사하세요.

### 템플릿 크기는 얼마나 커도 되나요?

한 번 실행할 때 최대 5 MB까지 처리할 수 있으며, 더 큰 입력은 메시지와 함께 거부됩니다. 출력은 Code Formatter의 Angular 옵션과 동일합니다.

여기에 광고를 게재하시겠어요?

[이메일 보내기](mailto:hi@dennn.is?subject=OneClick%20Pro%20%EA%B4%91%EA%B3%A0%20%EB%AC%B8%EC%9D%98)

[광고 WordPress을 위한 에이전트 지원 플러그인 모음입니다.](https://sleekwp.com/?ref=oneclickpro)