CheolCheol Dev Note

string안에html tag가있고그것을화면에tag를적용하고싶으면 [innerHTML] 속성을사용하면된다. ex) Angular가innerHTML 속성을 이용해 출력한 결과는 불완전하다.왜냐하면 Angular가 이들 요소를 잠재적인 위험 요소로 판단해 새니티제이션을 적용했기 때문이다. 새티니제이션은데이터내의잠재된위험요소를제거하는기능이다. ! angular 에서 팝업 및 데이터가 수시로 바뀌는 innerHTMLdmf 사용하는 경우에 id 및 name에 대한 security에대한 경고가 콘솔에 나온다. 그럴경우 새티니제이션을 예외적으로 허용 해줘야하는데 그 메서드가 bypassSecurityTrustHtml(v)이다. import { Pipe, PipeTransform } from "@angular/core..

Angular Router는 Angular의 핵심기능 중 하나인데 여기서 파라미터를 보내는 방법을 작성하겠다. 라우터를 선언하는 부분은 다음과 같이 가정하고 { path: 'move/:param', component: MoveComponent }, 하면 template나 component에서는 다음과 같이 사용할 것이다. template 이라하고 param값을 넣어주면 :param에 값이 전달되는 식이다. component this.router.navigate(['/move', param]); 그리고 받는쪽에서는 다음과 같이 사용할 것이다. (여러가지 방법이 있음 ) // 방법1this.activatedRoute.params.subscribe( params => { this.sq = params['par..

SPA(Single Page Application) 인 Angular는 자신의 라우터링크를 누르면 아무 반응이 없는데 이 대신 새로고침으로 하게 하는 편법이 있다. import { Router, NavigationEnd } from '@angular/router'; ngOnInit(){ this.router.routeReuseStrategy.shouldReuseRoute = function(){ return false; }; this.router.events.subscribe((evt) => { if (evt instanceof NavigationEnd) { this.router.navigated = false; window.scrollTo(0, 0); } }); } 참조 : https://github...

{{item.label}} 같이 사용 select 나 click이 아니라 change 이벤트 사용해야함

angular에서bind로인해서맨처음dom이초기화되고그다음에component에서적용한css가먹혀서 가끔씩안먹히는경우가있다 예를들어다음과같이작성했는데 실제로는jquery로인해서밑처럼확장이된다. 보면 _ngcontent-c1 이게그경우인데 이런경우에styleUrls 이나style로css를적용하고싶은겅우에는 참고사이트처럼/deep/ 이나 >>> 를사용하면적용이된다.-> 라우터로이동시문제 ------------------- 수정------------------------------- 쉐도우dom 스타일이라고부름 이름사용법의미host:host현재컴포넌트에대한쉐도우dom 선택host-context:host-context템플릿외부엘리먼트의클래스조건에따라현재컴퓨넌트의엘리먼트를선택deep/deep/ | ::ng-deep..