angular 신규 버전 (18.2) 변경사항

2024.09.24 - 1차 수정 / 수정 및 내용 추가

---

*ngFor, ngIf 등, 빠른 해결책을 바라시는 분들은 이쪽 가이드 참고 !!! ( https://blog.angular-university.io/tag/angular-core/ )

 

 

 

 

 

 

 

0.

*ngIf

 

        신규 프로젝트에 사용하고자 최신 버전의 angular 를 설치 하였다. 사용할 수 없는 기존 기능이 생각보다 꽤 많이 존재하는 것 같다. ngIf 를 사용하기 위해, 해당 컴포넌트의 standalone 옵션 (true 일 경우 사용하려는 모듈을 하나하나 직접 import 해야 한다.) 설정에 따른 CommonModule 적용하였다. 그런데 왜 안되는지... 

 

 

 

error  >

NG0303: Can't bind to 'ngIf' since it isn't a known property of 'div' 
If the 'ngIf' is an Angular control flow directive, please make sure that either the 'NgIf' directive or the 'CommonModule' is a part of an @NgModule where this component is declared

 

기존	18.2 버전 이상
<div *ngIf="조건이 참 일 경우">       사용하려는 html 내용 <div>	@if(조건이 참 일 경우) {      <div> 사용하려는 html 내용 </div> }

 

 

 

 

---

 

 

 

1.

html button 태그

 

       하나하나 읽어가면서 찾아가면 못할거야 없겠지만.... button 을 누르면 계속 reload 되었는데, 찾아보니 태그의 기본 타입이 submit 이라던가(원래 submit 인지 궁금하므로 찾아봐야겠다.) 등의 바뀐 내용이 제법 많은 듯 하다. 혹시나 어디선가 고통받고 있을 누군가에게 참고가 되면 좋겠다.

 

 

기존에 사용하던 15.2 버전은 타입이 존재하지 않았다. 신선한 충격이다.

     

	기존	18.2 버전 이상
html  <button> 태그의 기본 type	X	submit

 

 

 

 

---

 

 

 

 

위에 적힌 ngIf 와 같이, ngFor 은 다음과 같이 사용하였다. <div*ngFor="let row of 사용하려는 배열 | paginate : { id: 'page', itemsPerPage: ... 페이지네이션 옵션 적용 };  index as num">

 

2.

Pagination

       예전에 페이지네이션에 대해 짧게 기록해 둔 게시글이 있는데. 딱 아래 캡쳐한 정도만 참고하면 될 것 같다..

 

ngFor 와 페이지네이션 사용 예제

@for (item of collection | paginate : {       id: 'foo',                                  //페이지 조작버튼과 연결할 수 있는 id       itemsPerPage: pageSize,    //한 페이지에 출력할 수 있는 최대 목록 (ex. 전체 20개의 목록 중, 5개씩 출력할 경우 5)       currentPage: page,              //현재 페이지       totalItems: total                    //리스트의 전체 길이     }; track item.id) { <your-element>  ...  </your-element> }

페이지 조작버튼

<pagination-controls     id=" foo"                             //페이지 조작버튼과 연결할 수 있는 id     previousLabel="Prev"      //이전 페이지     nextLabel="Next"              //이전 페이지     responsive="false"            //페이지 간소화 (기본값 false, true 일 경우 2/5 이런 식으로 출력됨)   > </pagination-controls>

 

1). 18.2 버전 이상 ngFor 가이드 ( https://blog.angular-university.io/angular-for/ )

2). 페이지네이션 참고자료 ( https://www.bezkoder.com/angular-17-pagination-ngx/ )

 

 

 

 

---

 

 

 

테이블에 적으려니까 공간이 너무 협소하여 넘버링으로 메모해야습니다.

angular 사용자 여러분 화이팅입니다