반응형 Angular14 Angular tooltip customize 굳이 앵귤러가 아니더라고, 우리는 마우스 이벤트로, 마우스를 가져다 대면 도움말과 같은 말풍선을 만들고 싶을 때가 많다. 운영하고 있는 웹사이트는 Angular 기반이고, Angular 사용자에게 도움을 위한 글이니 다른 프레임워크를 사용하고 계시다면 적용되지 않아요. 기본 지식 : Angular 에서 마우스를 가져다대는 이벤트 (mouseover, hover, onmouse)를 했을 때에, 말풍선 등 도움말을 잠시 보여주는 기능은 matTooltip이며, 이를 커스터마이징 하는 것은 matTooltipClass 이다. 공식 문서 https://material.angular.io/components/tooltip/examples Angular Material UI component infrastructu.. 2022. 4. 7. Angular url 쿼리 파라미터, 라우팅 파라미터 이전에 소개했던 앵귤러 라우팅 방법에서 컴포넌트간 데이터 전달하기가 있었다. 근데 일단 그거는 진짜 깔끔하게 보이고 말고 싶어서 그러는 경우다. 그렇다면 정석적으로 협업을 하기 위해 하는 라우팅을 알아보자. 그냥 혼자만 하려면 다 알고있어서 컴포넌트간 이동을 해도 되는 거였지. 정말 쉽지만 비응신 같은 행동이 있었지. 물론 이게 1회용이고 다시 돌아가면 안되는 부분에서는 이렇게 하는게 맞아. 하지만 우리는 이제 뒤로 돌아가더라도 모든게 다 유지가 되는 라우팅을 하려고 해 이전에 언급한 라우팅 Angular 컴포넌트간 데이터 / 값 전달하기 Angular pass data on Routing 다른 사이트들 보이 뭐 다 4~5가지의 방법이 있다 이러면서 길게 코드를 쭉 늘어놓는데 멍청한 짓 하지 말고 깰껌하.. 2021. 7. 19. Angular html checkbox multiple selection, 체크박스 여러개 선택해 저장하기 문제 발생 항상 이름은 하나, 번호도 하나, 이메일도 하나, 이런 식으로 저장을 하는 것에 익숙해져있던 때에, 이메일을 여러개 가지고 있고 싶은 사람, 번호도 여러개인 사람도 생겨나고, 다른 새로운 테이블(firestore 상의 collection)이 생겨날 때 마다 데이터를 저장하는 방식도 필드당 하나가 아니라 여러개의 선택지가 주어져야 하는 경우도 많이 생겨나기 시작했다. 해결 방법 일단 어떻게 저장할 지는 방법은 너무 많다. array도 가능하고, subcollection 도 가능하다. 하지만 고작 하나의 정보를 저장하자고 subcollection을 사용하려들면 줘패고싶다. 예를 들어 한 의류 쇼핑몰 사이트에 여러 업체들이 등록되는 거라면 업체 collection에 업체마다 sub-collectio.. 2021. 7. 7. 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. Angular 11 + firebase(firestore) 프로젝트 #09 Guard 이제 guard 라는 걸 할건데 진짜 말 그대로 생각하면 됨. 클럽 가드처럼 생각하자. 오우 빻! 빠꾸! 와 같은 느낌으로 라우팅이나 컴포넌트 작업을 하기 전에 확인을 하는거지. 뭐 예를 들어서 어떤거에 접근을 하려고 해 그런데 나는 모두에게 public 하게 공개하고싶지 않은 컨텐츠야. 그러면 우리는 메인페이지에서 어떤 컨텐츠 눌렀을 때에 회원이나 어떤 등급 이상만 접근 권한이 있습니다 이딴 소리 많이 들어봤을 거야. 그런 역할을 해주는거야. 어떤 작업을 하기 전에 조건을 확인을 하고 동작을 하도록 하는 거지. 말로만 백날 해봐야 이해가 되나, 바로 들어가자 ng g g auth 라는 걸 만들자. 에이~ 약자를 또 설명해야되려나?ㅇㅇ 내가 까먹을거같음 ng generate guard auth. 의 약자.. 2020. 12. 10. Angular 11 + firebase(firestore) 프로젝트 #08 routing 1.새로운 프로젝트 만든다. (아 엔터 친다 - no no css) ng new thirdStudy 2. 만들고 해당 프로젝트의 src 밑의 app까지 들어온다 cd src/app 3. login, board 컴포넌트 만든다 ng g c login ng g c board 만들어지면 라우팅을 위해 router 이라는 경로를 위한 변수를 하나 만들어준다. 이 작업을 하면 우리가 이때까지 일반적으로 웹페이지를 만들던 형태, 즉 localhost:4200/login 나 localhost:4200/board 와 같이 url에 입력시 해당 파일로 들어가는 것이다. 그러면 이러한 형태를 위해 app.module.ts를 수정해보자 app.module.ts import { BrowserModule } from '@ang.. 2020. 12. 10. Angular 11 + firebase(firestore) 프로젝트 #08 데이터 바인딩(dashboard) 이제 애기같은 로그인 부분은 고만하고 dashboard해봅시다 dashboard.component.ts import { Component, OnInit } from '@angular/core'; declare type MyType = { text : any; number : any; }; @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.css'] }) export class DashboardComponent implements OnInit { DataArray : Array = [ ]; //데이터를 담는 변수 constructor() { } n.. 2020. 12. 9. Angular 11 + firebase(firestore) 프로젝트 #06 저번에 이어서.. 이번에는 상황에 따라 다른 메세지를 띄우는 걸 만들어볼 예정임 login.component.ts import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { @Input() logedIn : boolean; // 보내는걸 받을거야 여기서 // app.component.html 파일에서 [logedIn] = 'loginV.. 2020. 12. 9. Angular 11 + firebase(firestore) 프로젝트 #05 여러 component 가져오기 앵귤러의 쉬운 예제를 봤으니 데이터베이스를 연결하여 진행하는 프로젝트를 해봐야 겠다. Angular 프로젝트를 새로 만든다. terminal 상에서 mkdir angular-fire 명령으로 폴더를 만들고 cd angular-fire 명령으로 폴더로 이동 후 안에 ng new angularfire 명령어로 angularfire 이라는 앵귤러 프로젝트를 생성한다 이제 앵귤러 프로젝트가 생성이 되었으니, angular-fire이라는 폴더에 와 있는 터미널 상에서 code . 명령어로 vscode 를 실행한다. model view controller 의 개념을 조금 확실하게 적용해볼까 한다. vscode 상에서 ⌘ + ` (잘 안되면 ⌃ + ⇧ + `) 명령어로 vscode 상에서의 터미널을 하단에 띄운다. .. 2020. 12. 9. Angular 11 프로젝트 #04 - 로그인, 초기 오류 문제 * 혼자 찾아보며 구글링하며 배운 내용이기에 정답이 아닐 수 있음 * 하다가 오류가 나는 건 나도 실행을 하면서 바로 캡쳐하는 것이기 때문에, 숨겨진 코드나 잘못된 코드가 있는건 아님. * 그렇다면 오류가 생길때에는 이렇게 대처하자 ⓵ 앵귤러 버전문제 : 앵귤러는 진짜 뭔 버전이... 너무 빨리 바뀐다 정말. 버전마다 문법이 살짝 바뀌는 것들을 많이 보았다. → 막혔다고에이 버전이 다르네 이건 못하겠다 못 따라하겠다 하고 인강이나 유튭 강의를 보다 마신 경험 많죠? 그러지 마시고 구글에 검색해서 그 부분만 맞춰 바꿔놓으면 되는 문제에요. 명심하세요. 최고의 교수님 강사님 선생님은 구글입니다. ㅋㅋㅋㅋㅋㅋ ⓶ Node 버전 문제 : 최신이라고 무조건 좋은게 아니다! 안정적인 버전으로 바꿔보자 ⓷ vscod.. 2020. 12. 8. Angular 11 프로젝트 #03 - 배열 내용 뽑기 이제는 앵귤러에서 컴포넌트를 만들거야. 그리고 그 컴포넌트를 ㄴ딛ㅊㅅ를 사용해서 가져와볼거야 terminal : ng generate component 컴포넌트명 or ng g c 컴포넌트명 ex) ng g c greeting 이렇게 컴포넌트가 생성이 되고, 자동 생성이 된 파일 4개중 html 파일을 보면 자동으로 '컴포넌트이름' works! 라는 문구가 있다. 자 이제 이걸 웹사이트 상의 화면에 표현을 해보자 ng g c greeting 이라고 greeting component를 만들면 app.module.ts에 보면 자동적으로 들여와있다. app.module에 등록이 된 것은 알겠고, 그렇다면 이 놈을 사용하려면 어떻게 해야될까? 바로 들어간다 greeting 폴더에 freeting.componen.. 2020. 12. 8. 이전 1 2 다음 반응형
