일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- angular button
- 앵귤러 모달
- modal
- Router
- 앵귤러 애니메이션
- 스크롤 이벤트 감지
- mysql if
- formgroup
- flex-1
- route
- 아이오닉 스크롤 이벤트
- prisma
- angular route
- angular modal
- ajax 사용 예시
- 셀렉트박스 커스텀
- Angular Router
- angular animation
- egov spring ajax 사용 예시
- summary
- 모달
- ApexChart
- 스크롤 이벤트
- scroll
- Oracle LISTAGG 사용 예시
- 검색
- TAILWIND
- 옵저버블
- Ionic modal
- 호버
- Today
- Total
목록IT (598)
깜놀하는 해므찌로
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Dz1ui/btsiwk6ZOUy/vgDAxZhqgbU9iYA7OA3kEk/img.png)
npm i @angular/google-maps 구글 API 패키지 설치 CLI 0. 템플릿 최상단 (index.html) 1. 템플릿 import { GoogleMapsModule } from '@angular/google-maps'; mapOptions: google.maps.MapOptions = {}; isLocationLoaded = false; ngOnInit(): void { // init 후크 window.navigator.geolocation.getCurrentPosition( // 현재 geo 위치 가져오기 (position) => { this.mapOptions.center = { lat: position.coords.latitude, lng: position.coords.longit..
const sub = this.scrollService.getScrollY().subscribe({ // 구독 시작 next: (scrollY) => { // 스크롤 좌표에 해당하는 페이지 넘버 1~8 리턴 const pageIndex = sections.findIndex((section) => this.checkVisible(section.nativeElement) ); // 마지막 페이지일 경우 구독 중지 if (pageIndex === 8) { sub.unsubscribe(); } }, });
import { Injectable } from '@angular/core'; import { LoadingController } from '@ionic/angular'; @Injectable({ providedIn: 'root' }) export class LoadingService { constructor(private readonly loadingController: LoadingController) { } async show(message: string) { const top = await this.loadingController.getTop(); if (top) { top.remove(); } const loading = await this.loadingController.create({ mes..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bZn7UF/btshy8BassQ/xw8buqwYIKht92TpUIhUG1/img.png)
npm install @types/kakao.maps kakao.maps --save 1. kakaoMap 설치 import { Component, OnInit } from '@angular/core'; declare const kakao: any; export class KakaoMapComponent implements OnInit { ngOnInit() { this.initializeMap(); } initializeMap() { const container = document.getElementById('map'); const options = { center: new kakao.maps.LatLng(37.5665, 126.9780), level: 5 }; const map = new kakao...
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ctV9aD/btshrc3sYen/pak5etQsV6jlaEBgHqkeV0/img.png)
0. HTTP 통신을 위해 app.config 에 모듈을 로드합니다. npx nx generate service --project 프로젝트명 1. cli 를 활룔해 http 서비스를 생성합니다. 2. 통신과 관련된 url 상수값을 선언하기 위해 environment.ts 파일 폴더 및 파일을 생성합니다. 3. 제 경우 여러 곳에 요청을 할 것이므로 각각 요청할 서버 위치가 섞이면 헷갈리 수 있으므로 여러개 있는 것입니다. 4. 이번 예시에서는 하나만 사용합니다. 5. 백엔드 서버에서는 baseUrl 과 projectId 두 개를 받아 해당 프로젝트의 데이터를 DB에서 조회해 리턴하도록 코드가 이미 짜여진 상태입니다. import { Injectable } from '@angular/core'; impor..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bpJ2Zu/btshgqbhX3T/ccSMGBDjdnwnMgUJCPwzs0/img.png)
0. 실제 서비스 개발중인 앱이라 보안상 가린점 양해부탁드립니다. 참고 https://ionicframework.com/docs/api/menu ion-menu | Ionic Documentation ion-menu: API Framework Docs for Types of Menu Components ionicframework.com {{ menu.data?.['label'] }} 1. ion-menu 태그를 사용해야합니다. (현재 레이아웃 템플릿) 2. contentId : 반드시 명시해야 하며 어떤 ion-content 에 해당 메뉴를 걸지 결정합니다. id 가 서로 동일해야 합니다. (셋팅에 따라 다릅니다.) @ViewChild(IonMenu) menu!: IonMenu; // 메뉴 핸들링을 위해..
viewChild 선언 id="main" style="width: 100%; height: 100%" [scrollEvents]="true" (ionScroll)="ionScroll($event)" > -> 페이지 이동 시 메소드 연결 1. #content -> viewChild 를 활용하기 위해 선언합니다. 2. router-outlet (active) 액티브한 순간 시점을 잡아내기 위해 메소드를 연결합니다. @ViewChild(IonContent) content!: IonContent; onActivate(e: any) { this.content.scrollToTop(); } 3. 페이지가 이동하는 순간 ViewChild 로 받은 현재의 페이지 스크롤을 최상단으로 이동시킵니다.