일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Ionic modal
- angular route
- 셀렉트박스 커스텀
- formgroup
- 모달
- modal
- 앵귤러 애니메이션
- Oracle LISTAGG 사용 예시
- summary
- 스크롤 이벤트 감지
- 스크롤 이벤트
- 검색
- 옵저버블
- angular modal
- flex-1
- prisma
- 아이오닉 스크롤 이벤트
- angular button
- scroll
- Angular Router
- ajax 사용 예시
- mysql if
- 앵귤러 모달
- TAILWIND
- egov spring ajax 사용 예시
- 호버
- ApexChart
- route
- angular animation
- Router
- Today
- Total
목록전체 글 (599)
깜놀하는 해므찌로
파일첨부 1. 템플릿에 클릭 이벤트로 달아줍니다. Form = new FormGroup({ // 입력 폼 name: new FormControl('', [Validators.required]), tel: new FormControl('', [Validators.required]), email: new FormGroup({ username: new FormControl('', [Validators.required]), domain: new FormControl('', [ Validators.required, Validators.pattern(/([a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*\.[a-zA-Z]{2,})/), ]), }), title: new FormControl('', [Val..
1. activate 이벤트를 달아줍니다. 페이지가 이동할 때 마다 activate 되겠죠? 2. ViewChild 로 핸들링 하기 위해 #container @ViewChild('container') containerRef!: ElementRef; onActivate(e: any) { this.containerRef.nativeElement.scrollTo({ top: 0, behavior: 'smooth' }); } 3. scrollTo 메소드를 활영하여 해당 좌표로 이동합니다. top:0 4. behavior 옵션을 활용하여 smooth 하게 이동합니다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bY8kj3/btsij78qdgJ/VAgsdcvZ5lvYqKbC6aTlPK/img.png)
1. 위 이미지는 단순히 ngx store 구현 시 http 요청의 횟수가 확연히 줄어든다는 것을 나타내기 위한 그림입니다. 2. 이 부분이 핵심입니다. 3. store 는 데이터를 저장하는 공간이며 여러번 서버에 http 요청을 보내지 않고 페이지가 열리는 첫 순간에 미리 데이터를 받아올 때 활용됩니다. 4. 우측 상단에 서버가 보입니다. 사용자가 많을 경우 store 는 더욱 빛을 발합니다. 예를 들어 한 명의 고객이 정보를 수정했는데, 해당 정보를 다른 모든 고객에게 보여줘야 하는 상황이 발생한다면? 고객들은 각각 페이지 새로고침 및 서버 요청이 필요합니다. 하지만, store 경우 수정이 발생했을 때 변화를 감지하여 서버에 새로운 데이터 목록을 요청할 수도 있으며, 자동으로 클라이언트들 또는 컴포..
0. #swiperContainer 선언 1. init="false" 설정 필수! 이 설정을 하지 않으면 임의로 CSS를 그려버려서 CSS 설정 및 값 오버라이딩 등 먹통됩니다. @ViewChild('swiperContainer') swiperEl!: ElementRef; ngAfterViewInit(): void { this.setSwiper(); } setSwiper() { const options: SwiperOptions = { speed: 3000, autoplay: { delay: 5000, }, allowTouchMove: false, touchRatio: 0, loop: true, slidesPerView: document.documentElement.clientWidth >= 1440 ?..
items$: Observable; // http 통신 결과를 바로 옵저버블로 받기 this.items$ = this.httpService.get( `post/realated/${process.env['NX_PROJECT_ID']}?categoryId=${process.env['NX_VIDEO_ID']}` ); 1. 컴포넌트 ts 2. 템플릿 3. | async : async 파이프 사용 시 observable 타입에서 일반 타입으로 자동으로 변환됩니다. 또는 slides$!: Observable; constructor(private readonly httpService: HttpService) { this.slides$ = this.httpService.get( `post/realated/${proce..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/beEWzy/btshYcDA2vG/zF4ZYfuZjkBupKGjsmyHnK/img.png)
ng generate directive MyDirective 0. 디렉티브 생성 cli import { AnimationPlayer } from '@angular/animations'; import { coerceBooleanProperty, coerceNumberProperty, } from '@angular/cdk/coercion'; import { AfterContentInit, AfterViewInit, Directive, ElementRef, Input, Renderer2, } from '@angular/core'; import { ScrollAnimation, ScrollAnimationService, } from './scroll-animation.service'; @Directive({ s..
items$: Observable | undefined; this.items$ = this.httpService.get( `서버 요청 url` ); 1. httpClient 통신 return 값은 Obervable 타입입니다. 따라서 바로 옵저버블타입으로 데이터를 받을 수 있습니다. 2. 받는 옵저버블의 Generic 이 배열이라면 배열로 받아집니다. // httpService 내부 constructor(private readonly httpClient: HttpClient) {} get(url: string, option?: HttpServiceOptions) { return this.httpClient.get(`${this.baseUrl}/${url}`, { ...option, }); } 3. htt..