반응형 앵귤러7 Angular 앵귤러 <mat-select> 안에 체크박스 다중선택 checkbox 목록을 여러개 만들어, 여러개 (다중선택)를 선택하여 배열에 담는 것은 웹개발을 하면서 가장 빈번하게 나타나는 부분입니다. 라디오버튼을 여러개 만들어서, 선택을 하는 방법, 혹은 체크박스로 select 하는 방법이 있습니다. 일단 여러개를 입력받아 저장하는 것도 굉장히 귀찮은 일이긴 합니다. 일단은 앞으로도 계속 사용하게 될 다중 선택 기능을 확실하게 잡고 갑시다. 일단 기본적으로 다중선택 기능 구현을 확실하게 익혀두고, 두고두고 사용합니다. 기본을 익히고 나서 심화를 해봅시다. Angular 기준, 즉 typescript 기준이지만, 이 정도의 응용은 할 수 있을 것이라 생각합니다. 만일, 해당 코드를 보고 다른 언어로 변환하기가 힘들다면 댓글을 남겨주세요. 아주 기본적인 것만 적을 것.. 2021. 12. 10. Angular url 쿼리 파라미터, 라우팅 파라미터 이전에 소개했던 앵귤러 라우팅 방법에서 컴포넌트간 데이터 전달하기가 있었다. 근데 일단 그거는 진짜 깔끔하게 보이고 말고 싶어서 그러는 경우다. 그렇다면 정석적으로 협업을 하기 위해 하는 라우팅을 알아보자. 그냥 혼자만 하려면 다 알고있어서 컴포넌트간 이동을 해도 되는 거였지. 정말 쉽지만 비응신 같은 행동이 있었지. 물론 이게 1회용이고 다시 돌아가면 안되는 부분에서는 이렇게 하는게 맞아. 하지만 우리는 이제 뒤로 돌아가더라도 모든게 다 유지가 되는 라우팅을 하려고 해 이전에 언급한 라우팅 Angular 컴포넌트간 데이터 / 값 전달하기 Angular pass data on Routing 다른 사이트들 보이 뭐 다 4~5가지의 방법이 있다 이러면서 길게 코드를 쭉 늘어놓는데 멍청한 짓 하지 말고 깰껌하.. 2021. 7. 19. Angular modal 활용 Angular을 사용하여 modal을 띄우는 경우가 종종 생길 수 있다. (팝업 개념) Angular의 modal 개념을 조금 쉽게 사용하는 방법을 길게 적어보려 했으나, 요즘 인터넷 사이트의 접속 방식이 모바일이 압도적으로 많아진 현 시점에 이러한 팝업 형식은 최대한 피해야 한다. (되도록 쓰지 말고 ok, cancel 정도 확인 버튼정도나 띄울때나 쓰라는 말이다) 1. 태그로 전체 html을 묶어, scroll 가능한 모달로 만들어라. (팝업이 떳는데 스코릴이 안되면 그 얼마나 끔찍한 화면인가) 2. 1번의 태그 바로 다음 맨 위에 {{season_name}} : {{class_name}} Detail close modal-header을 추가. CSS 파일에 스타일을 .modal-header { } .. 2021. 7. 6. Angular scrollable modal 앵귤러 모달에서 html, css를 무슨 짓을 해도 스크롤이 안 되고 멍청하게 생긴, 화면에서 넘쳐나는 정보들이 그저 잘려서 보이지 않는 부분들을 경험했을 수 있다. 당황하지 말고, 해결책 먼저. 지금 그 html을 ...... 이거로 감싸면 된다. 끝! 2021. 6. 16. Angular 컴포넌트간 데이터 / 값 전달하기 Angular pass data on Routing 다른 사이트들 보이 뭐 다 4~5가지의 방법이 있다 이러면서 길게 코드를 쭉 늘어놓는데 멍청한 짓 하지 말고 깰껌하고 빠르게 가자. 나는 학원 페이지 개발중이니까 그거로 설명을 한다. - 학원 페이지를 만들면 학부모 계정으로 로그인 하고 내가 학생들을 만들어. 그 학생 버튼 누르면 다음 이동 페이지에 그 학생의 상세 정보가 나와야겠지 1. www.너의홈페이지도메인.com 이런 주소가 있을때 (뭐 퍼블리시 전이라면 localhost:4200인 상태) // constructor()에서 public router: Router, 헤서 들여온 router임 classPayment(student){ this.router.navigateByUrl('/class-pr.. 2021. 5. 18. <title> 브라우저 탭 아이콘, 탭 제목 1. 브라우저의 탭 아이콘을 설정하는 방법 (난이도 1~100 중 15?) 사용하는 방법은 거의 다 비슷하고 어렵지 않은 과정이죠. 물론 다른 프로젝트를 진행하게 된다면 또 다른 부분이 필요할테지만 지금은 Angular을 사용하고 있으니, 이런 것이 있구나, 이렇게 부르는 구나 정도를 알아보고 Angular로 브라우저의 탭에 들어가는 아이콘, 즉 Favicon 을 설정하는 방법을 기록한다 Angular에서 가장 처음 프로젝트를 생성한다면 app.component.ts가 src 최상단에 생기게 된다. app.component.ts로 간다. 거기서 가장 처음 내가 한 행위는 Favicon 설정, 다중 언어를 사용하는 사이트이기 때문에 처음에 언어를 영어로 설정하는 방법을 세팅했다. → 네비게이션 바에 국기버.. 2021. 5. 12. Angular 11 + firebase(firestore) 프로젝트 #01 - firestore 연결 앞서 진행했던 내용들이 있는데 이거랑 상관 없으니까 쫄지 말고. 이 게시물만 봐도 Angular 최신 버전이랑 firebase 연동함. 처음 내용은 개념 다시 복습하고 넘어가는거임 일단 짚고 넘어가자 모듈 : 컴포넌트 관리. : 각종 정보(서비스, 일반 객체 등)를 제공. : 다른 사용자가 만든 모듈을 등록(import)하여 사용하기 위해서는 내가 만든 모듈에 등록. -> 기억 나지? imports: [] 안에 쓰면 자동으로 맨 위에 import {} from 추가 되던거 컴포넌트 (ng g c 컴포넌트이름) : 화면구성. : 화면에 대한 모든 기능을 담당. : 컴포넌트간의 데이터 - 컴포넌트에서 속성이나 Input 또는 Output같은 데코레이터 사용. : 컴포넌트간의 데이터 공유는 서비스를 통해 구독.. 2020. 12. 10. 이전 1 다음 반응형
