앵귤러

컴포넌트는 Angular애플리케이션을 구성하는 기본 단위이며 아래 3가지로 구성된다.TypeScript 클래스 HTML 템플릿 스타일TypeScript클래스 @Component데코레이터는 아래와 같은 역활을 한다.템플릿에 사용될 CSS셀렉터를 지정한다.렌더링할 HTML

Angular는 TypeScript 클래스를 활용하는 의존성 주입 시스템을 제공하기 때문에, 컴포넌트에 필요한 객체의 인스턴스를 어떻게 생성하는지 직접 신경쓸 필요가 없습니다.

앵귤러는 웹프론트엔드 프레임워크로서 컴포넌트가 시스템의 핵심이기때문에 컴포넌트의 구조와 작동원리를 제대로 이해해야 한다.컴포넌트는 View를 담당하는 템플릿, Controller를 담당하는 클래스로 구성된다.앵귤러시스템은 index.html에 하나의 컴포넌트가 존재하고

컴포넌트 인스턴스가 생성되면 Angular는 생성시점부터 미리 정의된 라이프싸이클을 따라 화면을 렌더링한다.<a attr="prop" >컴포넌트의 프로퍼티로 바인딩된 데이터가 변경되었는지 감지하며, 값이 변경되면 화면을 랜더링하고 컴포넌트 인스턴스에 있는 데이터

템플릿에 사용되는 {{ }}는 Text interpolation 기호이며 최종 결과물을 문자열타입으로반환한다.{{1+1}}, {{ age }}, {{ 1 + age + getVal() }} 등 표현식을 사용할 수 있다.컴포넌트 클래스인스턴스 프로퍼티를 사용할 수 있다

대괄호(\[])가 사용되면 Angular는 등호 오른쪽 표현식을 평가한다.대괄호를 사용하지 않으면 등호 오른쪽은 리터럴 문자열로 평가한다.대괄호가 사용되었으므로 앵귤러는 바인딩임을 알고 요소노드 속성에 표현식을 바인딩한다.노바인딩된 value는 값이 변하지 않는다.바인

앵귤러 오류가 발생한다.colspan="{{1 + 1}}"은 HTML이 파싱된후 앵귤러에의해 동적으로 값을 설정하는 구문으로 동적으로 값을 변경할 수 있는 것은 요소노드의 프로퍼티에만 가능하기 때문이다.colspan은 td의 프로퍼티가 아니고 속성이다.속성은 HTML

앵귤러는 HTML과 타입스크립트로 프론트앤드 어플리케이션을 만들 수 있는 플랫폼, 프레임워크이다.프레임워크가 제공하는 기능은 타입스크립트 라이브러리처럼 사용하면 된다.앵귤러 어플리케이션의 구성요소중 가장 중요한 것은 컴포넌트의 묶음인 NgModule이다.NgModule

앵귤러 어플리케이션은 앵귤러에서 제공하는 NgModule이라는 모듈체계로 구성된다. NgModule은 어플리케이션 도메인이나 작업흐름, 기능이 연관된 앵귤러 구성요소들은 묶어놓은 단위다.NgModule에는 컴포넌트나 서비스 프로바이더등이 포함될 수 있으며, 다른 NgM

컴포넌트는 뷰라고 하는 화면의 일부를 구성한다.뷰에서 사용할 어플리케이션 로직은 컴포넌트 클래스에 정의하며 뷰는 클래스 프로퍼티와 메소드와 상호작용한다.컴포넌트 메타데이터앵귤러 컴포넌트는 클래스에 @Component데코레이터를 붙여서 정의하며 데코레이터함수에 컴포넌트의

https://poiemaweb.com/angular-service서비스란?컴포넌트는 화면을 구성하는 뷰(View)를 생성하고 뷰와 데이터바인딩된 클래스를 관리한다.뷰에 보여질 데이터를 클래스 프로퍼티로 구성될수도 있겠지만 대부분의 경우 서버로부터 받던가 별도

컴포넌트 소개컴포넌트는 앵귤러의 핵심 구성요소로서 앵귤러 어플리케이션은 컴포넌트를 중심으로 구성된다. CBD: Component Base Development컴포넌트의 역활은 화면을 구성하는 뷰(View)를 생성하고 뷰에 보여지는 데이터를 관리한다. 앵귤러는 컴포넌트들

템플릿(Template)은 HTML과 Angular 고유의 템플릿 문법(Template Syntax)을 사용하여 UI의 최소 단위인 컴포넌트의 뷰를 정의한다.앵귤러의 뷰모델DOM은 상태(사용자가 값입력, 체크박스 체크...)를 가지고 있으며 이 상태는 변화하는 살아있는

구조화된 웹어플리케이션을 구축하기 위해서는 뷰와 모델의 분리는 필수적이다. 하지만 뷰와 모델은 유기적으로 동작해야 한다.이러한 모순점을 해결하는 방식은 여러가지가 있으며 뷰와 모델이 연결된 방식에따라 장단점이 발생한다.JQuery는 요소노드를 찾아 데이터를 바인딩하는

디렉티브는 DOM의 모든것(모양과 동작)을 관리하기위한 지시자다.HTML 요소노드의 어트리뷰트 형태로 사용하며 호스트 요소노드에 무언가를 행하는 지시자다.디렉티브는 어플리케이션 전역에서 사용되는 것으로 컴포넌트에서 분리하여 구현한것이다.어트리뷰트 디렉티브(Attribu

프로퍼티바인딩은 DOM과 연결되어있고 boolean값에 대응하여 직관적이며 어트리뷰트바인딩보다 빠르다.어트리뷰트바인딩값은 HTML 문법기준으로 처리하기때문에 값이 null기준으로 한다.

템플릿 기반 폼은 컴포넌트에 있는 데이터를 템플릿에 반영할 때, 템플릿에 입력한 데이터를 컴포넌트에 반영할 때 양방향 데이터 바인딩(two-way data binding)을 활용한다.폼구성이 간단하다면 템플릿 기반 폼을 사용하는 것도 좋지만 폼 구성이 복잡하거나 확장성

반응형폼을 만들기위해서는 form이 있는 컴포넌트를 포함하는 모듈에 반응형폼 라이브러리를 임포트하고 인스턴스를 만들어야 한다.form이 있는 컴포넌트 클래스에는 FormControl, FormGroup 라이브러리를 임포트하고 폼구조에 맞게 인스턴스를 생성해야 한다.템플

https://poiemaweb.com/angular-component-built-in-directivehttps://medium.com/sjk5766/ng-template%EA%B3%BC-ng-container-fb913ff1984d디렉티브(Dire

ng-template< ng-template >노드는 기본적으로 랜더링되지 않는 엘리먼트다.< ng-template >내부에 있는 노드는 주석처리되어 랜더링되지 않는다.< ng-template >의 용도는 구조디렉티브를 사용하여 랜더링될 컨텐츠를 보유하

템플릿변수를 사용하면 템플릿내부에 있는 아래 컨텐츠를 참조하는 변수를 만들며 참조한 인스턴스에 접근할 수 있다.DOM 엘리먼트디렉티브엘리먼트(ng-template...)TemplateRef웹 컴포넌트input DOM엘리먼트를 placeholder="phone numbe

\>ng g m modulename;기능ngModule을 생성할 수 있고 내부에 여러 컴포넌트를 생성할 수 있다.생성된 컴포넌트를 뷰에 사용하려면 selector명을 상위 템플릿파일에 넣어야 하는데 그냥 삽입하면 에러가 발생한다.기능ngModule에서 컴포넌트를 exp

지연로딩모듈은 모듈이 사용될때 로딩되기 때문에 모듈에 등록된 프로바이더는 최상위모듈 인젝터에서 인식할 수 없기때문에 해당 모듈에서만 사용이 가능하다.지연로딩되는 모듈에 생성된 인젝터가 등록하는 모든 프로바이더는 최상위 인젝터에도 등록되며, 지연로딩모듈에 있는 컴포넌트에

컴포넌트는 앵플을 구성하는 기본단위컴포넌트는 아래 구성요소들로 이루어진다화면을 랜더링하는 HTML템플릿동작을 정의하는 타입스크립트 클래스컴포넌트가 사용될 템플릿을 태그이름(CSS셀렉터)HTML템플릿내 요소노드들의 CSS스타일라이프싸이클 후킹 함수컴포넌트 인스턴스는 컴포

상위컴포넌트에서 하위컴포넌트의 인스턴스가 필요할때 사용한다.@ViewChild(하위컴포넌트타입) 속성데코레이터이며 하위컴포넌트의 타입을 인자로 전달하면 템플릿에서 해당 타입의 컴포넌트 인스턴스를 찾아 반환한다.@ViewChild(ChildDirective) child!

템플릿 요소노드의 속성 또는 디렉티브에 바인딩된 클래스 프로퍼티는 값이 변경될때 앵귤러의 변화감지의해 뷰에 반영된다.해당 클래스 프로퍼티가 다른 컴포넌트인스턴스의 데이터를 참조상태에서 다른 인스턴스에의해 값이 변경되면 클래스프로퍼티는 바로 뷰에 반영되지 않는다. 한사

컴포넌트가 생성후 소멸까지 발생하는 이벤트는 여러가지가 있으며 라이프사이클 후킹 메소드를 정의하면 원하는 동작을 할 수 있다.라이프싸이클 후킹 메서드가 실행된 순서ngOnChanges, ngOnInit, ngDoCheck (3번), ngAfterContentInit,

컴포넌트나 디렉티브는 라이프사이클 후킹 메소드를 가지고 있어 컴포넌트의 상태에따라 원하는 동작을 할 수있다.DOM요소노드에 커스텀 디렉티브를 사용하면 요소노드의 생성시점(ngOnInit), 소멸시점(ngOnDestroy)을 추적할 수 있다.

컴포넌트나 디렉티브에 속성입력값을 감지하려면 ngOnChanges후킹 메소드를 정의하면 된다.

컴포넌트에 @Input데코레이터로 속성값을 받을때 ngOnChanges후킹메소드로 로그배열을 만들고 템플릿에서 \*ngFor에 spy디렉티브를 사용하고 상위컴포넌트에서 spy디렉티브의 로그를 확인할 수 있다.

하위컴포넌트의 데이터가 변경되었을때는 상위컴포넌트에서 참조변수로 다루어 랜더링하면 된다.하위뷰에서 상위뷰에 영향을 준다면 단방향데이터흐름을 이기게 되어 예상한대로 랜더링되지 않을 수 있다.따라서 하위뷰에서 상위뷰로 전달되는 뷰를 만들어 내려면 이 변화를 반영하는 변화감

컨텐츠프로젝션은 컴포넌트 밖에서 가져온 HTML컨텐츠를 템플릿안에 표시하는것을 의미한다.

하위컴포넌트에 값을 전달하기위한 방법은 하위컴포넌트 속성에 전달하고자하는 값을 바인딩한다.하위컴포넌트에서는 @Input데코레이터를 사용하고 ngOnChanges에서 변수에 값이 할당된다.getter와 setter함수를 사용하면 이 동작을 가로채서 원하는 로직을 추가할

하위컴포넌트에 Output속성을 사용하여 하위컴포넌트에서 발생된 이벤트로 상위컴포넌에 데이터를 전달할 수 있다.(click)은 버튼 클릭이벤트가 발생함을 나타낸다.(voted)="onVoted($event)"은 app-voter컴포넌트에서 voted이벤트가 발생함을 나

하위컴포넌트 인스턴스를 얻을 수 있으면 인스턴스의 프로퍼티에 접근할 수 있어 편리하다.하위 인스턴스를 얻는 방법@ViewChild@ContentChild ( 컨텐츠 프로젝션 )템플릿변수@ViewChild, @ContentChild 방법은 단점이 존재하는데 인스턴스를 받

템플릿변수, @ViewChild, @ContentChild를 이용해서 컴포넌트간 통신이 가능하고 각각의 장단점이 있다.상하위 컴포넌트에 서비스를 의존성주입해서 컴포넌트 인스턴스를 참조하게 하면 간단하게 통신이 가능하다.하위컴포넌트가 \*ngFor로 여러개 인스턴스가 있

컴포넌트는 기본적으로 재사용하려는 목적을 가지고 있다.컴포넌트 자체로 뷰를 완성할 수 도 있지만 뷰 일부를 외부에 위임해서 프로젝션하려는 목적으로 사용할 수 있다.프로젝션 템플릿에 템플릿변수, 바인딩... 태그문법을 사용하면 문법구현을 삽입되는 컴포넌트가 아닌 해당 컴

컴포넌트 템플릿은 어플리케이션 실행전에 로드되는데 샐행중에 컴포넌트를 불러올 수 있다.동적로딩 컴포넌트가 자리에 ng-template엘리먼트를 만들며 이것은 나중에 인스턴스로 접근해서 컴포넌트를 불러와 넣을 것이다.엘리먼트에 디렉티브를 넣어 인스턴스로 접근할 수 있도록

컴포넌트 뷰를 구성하는 템플릿은 templateURL로 작성해야 오기를 줄일 수 있다.text interpolation 문자열바인딩{{ expr }}기호로 템플릿에 텍스트를 표현하기위한 앵귤러 템플릿문법앵귤러 템플릿문법이란 무엇인가?앵귤러가 템플릿에서 사용하는 문법이다

템플릿 실행문은 템플릿코드에서 사용자이벤트에 대응하는 템플릿문법이다.문자열 바인딩의 표현식에도 클래스 인스턴스 메소드를 호출할 수 있지만 이것은 값을 반환하여 템플릿에서 문자열로 표현하기 위한 수단에 국한된다.템플릿 실행문은 어플리케이션에 필요한 로직들을 수행한다.위와

파이프를 사용하면 문자열을 원하는 형태로 가공하여 출력할 수 있다.문자열바인딩에서 호출하는 함수와 같이 어떤 값을 입력받아서 가공된 데이터를 반환하는 별도정의된 함수다.특징파이프는 한번선언으로 어플리케이션 어느곳에서도 자유롭게 사용가능하다.앵귤러는 자체적으로 기본 파이

문자열바인딩은 뷰를 구성하는 요소로서 어떤 원인에의해 변화감지동작이 발생했을때 그 원인으로 인해 문자열바인딩 표현식을 다시 평가하여 반영한다.어떤 컴포넌트에서 이벤트가 발생했을때 내용적으로 전혀 관계가 없는 컴포넌트들에 존재하는 모든 문자열바인딩도 다시 평가한다.앵귤러

HTML엘리먼트 또는 디렉티브의 프로퍼티의 값을 지정할 수 있다.예로 버튼의 disabled프로퍼티 값을 설정하여 버튼을 활성/비활성화 할 수 있고 href프로퍼티 값을 설정가능하다.규정된 템플리문법대로 프로퍼티바인딩을 하면 앵귤러가 클래스 프로퍼티값을 엘리먼트프로퍼티

HTML엘리먼트에는 어트리뷰트와 DOM프로퍼티가 있으며 DOM프로퍼티에 템플릿표현식으로 바인딩하는 것이 좋다.하지만 특정 HTML 특정속성은 어트리뷰트만 존재하여 부득이 어트리뷰트바인딩을 사용해야하는 경우가 있다.ARIA와 SVG에는 어트리뷰트만 존재한다.

키입력, 마우스이동, 클릭, 터치등 사용자 이벤트에 반응할 수 있다.좌항은 소괄호안에 이벤트명을 지정하고 우항은 템플릿실행문을 지정한다. EventEmitter로 커스텀 이벤트 생성하기하위컴포넌트에서 상위컴포넌트로 데이터흐름을 만들기위한 1가지 방법으로 EventEmi

양방향바인딩을 사용하면 상하위컴포넌트끼리 데이터를 공유할 수 있으며 하위컴포넌트에 데이터를 전달하는 프로퍼티바인딩과 상위컴포넌트에 이벤트를 전달하는 이벤트바인딩이 결합된 형태다.name="firstName"으로 하위컴포넌트로 데이터를 보낼수 있고 하위컴포넌트에서는 Ev

컴포넌트 템플릿영역내에서 엘리먼트에 템플릿변수를 지정하면 템플릿문법에 지정엘리먼트를 참조할 수 있다.위와 같이 엘리먼트내에 HTML엘리먼트, 컴포넌트, 디렉티브, ng-template...에 사용가능하다.<input {{inp.value}}<ng-templa

디렉티브는 엘리먼트에 어떤 동작을 추가하는 클래스인스턴스다.앵귤러는 기본적으로 폼, 목록, 스타일에 적용할 수 있는 디렉티브를 다양하게 제공한다.어트리뷰트 디렉티브 : 엘리먼트, 컴포넌트의 모습을 변경하거나 동작을 추가하는 디렉티브구조디렉티브 : 조건에따라 DOM에 엘

폼양식 엘리먼트에 FormControl 인스턴스를 생성하고 엘리먼트에 바인딩하는 기능을 한다.FormControl은 폼양식요소노드의 값과 유효성상태를 추적한다.NgModel 디렉티브는 FormsModule라이브러리가 모듈에 로드되어야 사용가능하다.ngModel디렉티브는

SPA에서 페이지이동은 컴포넌트를 숨기거나 컴포넌트를 보이게 하는 것이며 앵귤러 Router클래스가 뷰전환을 담당한다.앵귤러는 어플리케이션의 라우팅규칙을 관리하는 AppRoutingModule ngModule을 사용한다.기본 라우팅규칙Routes, RouterModul

화면을 구성하려면 뷰를 가지는 컴포넌트를 생성해야 한다.웹어플리케이션을 개발하게되면 화면을 구성하는 영역별로 기능을 분류하게 된다.영역별로 화면을 구성하는 컴포넌트들을 만들게 되므로 만들어진 컴포넌트들도 기능과 영력별로 그룹을 만들어 관리하게 된다.컴포넌트들을 그룹으로

map은 배열메소드로 배열원소마다 콜백함수를 실행한 결과로 만들어지는 새로운 배열을 반환한다.소스가 동기식데이터면 소스데이터를 한번에 방출한다.map오퍼레이터는 배열을 1번 방출하고 완료한다.방출된 데이터가 배열이므로 배열메소드를 사용할 수 있는 것이다.find메소드는

Route : 라우팅규칙 객체Router : 네비게이션 객체ActivatedRoute : 현재 라우팅정보 서비스라우팅모듈에서 Route객체를 생성해서 라우팅규칙을 지정해야 한다.라우팅인자정보가 필요할 경우 ActivatedRoute서비스를 의존주입하고 paramMap객

상품목록에서 아이템을 클릭하면 화면아래에 해당 상품의 내용을 보여주는 경우상품내용 컴포넌트는 한번 로드되면 아이템이 변경될때 다시 로드하지 않고 내용만 변경하면 된다.상품목록 아이템이 변경되면 url은 변하게되므로 상품내용컴포넌트는 이러한 url변화를 감지해야 한다.컴

라우팅규칙에 :id는 라우팅인자를 선언하는 것이다.이 토큰이 사용되면 url에 id가 인자로 전달된다.url에 id가 필수로 사용되면 :id라는 토큰을 라우팅규칙에 사용하는 것이 좋다.위의 경우 url구성은 컴포넌트로 향하는 주소와 id 2가지가 구성요소다.따라서 링크

라우팅이란 출발지에서 목적지까지의 경로를 경로를 결정하는 기능이다.앵귤러는 SPA를 위한 클라이언트 사이드 네비게이션방식으로 라우터를 제공한다. URL과 컴포넌트의 쌍으로 라우트설정를 설정하여 뷰를 랜더링한다.SPA방식은 새로고침을 하면 당연히 첫페이지가 로드되기때문에

first컴포넌트는 자연스럽게 하위컴포넌트 first-a, first-b들을 가지게 된다.( first컴포넌트도 app컴포넌트의 하위컴포넌트다. )first컴포넌트아래에 얼마만큼의 하위컴포넌트가 있던지 first컴포넌트와 하위컴포넌트들을 관리하는 ng모듈을 만들어 관리

표시되는 컴포넌트와 관련된 라우팅 규칙(route) 라우팅규칙 URL에 포함된 필수/옵션 라우팅 변수 routerLink디렉티브에 링크매개변수배열을 사용하려면 바인딩해야 한다.

앵귤러는 페이지전환이 없는 방식이기때문에 네비게이션이 발생했을때 라우터영역에 해당 컴포넌트를 랜더링하는 방식이다.위와같이 컴포넌트내에 네비게이션엘리먼트와 router-outlet라우팅영역이 있으며 네비게이션이 작동하면 라우팅영역에 해당 컴포넌트를 랜더링한다.< a

route규칙은 브라우저 주소창 url을 분해하여 해당 경로에 맞는 컴포넌트를 활성화시킨다.http://localhost:4200/crisis/1crisis는 CrisisListComponent컴포넌트를 활성화시키고 1은 CrisisDetailComponent

routeLink는 현재 주소창url을 기준으로 url을 변경한다. 현재 url이 localhost:4200/good 이라면 위 링크로 이동되면 localhost:4200/good/detail이 된다. 상대주소를 사용할 수 있다. 위 링크로 이동되면 localhos

앵귤러는 name속성이 지정되지 않은 라우팅영역을 하나만 자체관리하기때문에 2개이상의 라우팅영역을 사용해야 할때는 name속성을 지정해야 한다.제2라우팅영역의 routerLink은 1라우팅영역과는 별도로 지정해야 한다.route규칙은 outlet프로퍼티만 지정하면 된다

라우트규칙이 hero/2일 경우 hero-detail컴포넌트는 ngOnit리사이클함수에서 route객체로부터 id값을 얻은후 heroService로부터 Hero객체정보를 받아서 화면을 랜더링한다.이 과정은 hero-detail컴포넌트가 활성화된후 데이터를 가져와 화면을

앵귤러에서 라우터(Router)는 컴포넌트 네비게이션을 담당하는 내장된 서비스객체다.라우터는 네비게이션명령에따라 소스 컴포넌트를 비활성화시키고 대상 컴포넌트를 활성화시키면서 전환시킨다.네비게이션되려면 사전에 라우트(Route)규칙이 정의되어 있어야 한다.라우트규칙은 R

어플리케이션이 커지고 많은 ng모듈들이 생기며 어플리케이션은 모듈들이 로드되어야 구동시작되기때문에 초기에 로드시간이 소요된다.이문제를 해결하려면 비동기라우팅을 이용해서 기능모듈이 필요할때 로딩하는 지연로딩을 사용하면 된다.사용자에게는 사용하는 모듈만 로드하게된다.어플리

와일드규칙 {path:'heroes', redirectTo:'superheroes'}이런 리다이렉션 규칙은 잘 작동하지만 ...와일드규칙에 redirectTo하면 에러가 발생한다.모든 일치를 리다이렉션할 수 없고 최소한의 조건으로 리다이렉션해야 한다.가장 밑에 있어도

앵귤러는 폼을 2가지 방식으로 제공한다.반응형 폼템플릿기반 폼반응형폼은 컴포넌트 클래스에 템플릿 폼엘리먼트 디렉티브와 바인딩할 폼콘트롤을 생성하며 동기식으로 값이 전달된다.템플릿기반 폼은 폼코트롤없이 디렉티브와 컴포넌트 클래스가 비동기로 값이 전달된다.반응형/템플릿기반

템플릿기반 폼을 사용하려면 FormsModule 라이브러리를 사용한다.(ngModel)="firstName"은 firstName 프로퍼티와 input엘리먼트 value속성을 바인딩하는 것이므로 input엘리먼트의 valid와 같은 프로퍼티에는 접근할 수 없다.템플릿변수

@Directive({ selector: 'appForbiddenName',})export class ForbiddenNameDirective{ @Input('appForbiddenName') forbiddenName!: string; constructor() {

@property {boolean} $untouched True if control has not lost focus yet.폼콘트롤이 아직 포커스를 잃지 않았을때@property {boolean} $touched True if control has lost focus

동기유효성검사를 위한 디렉티브방법과 비슷하다.AsyncValidator를 구현하고 Observable<ValidationErrors | null> 을 반환하면 된다.위와 같이 유효성검사를 수행하는 서비스를 만들고 디렉티브에 의존성주입해서 서비스 유효성검사함수를 호

폼에는 ngForm으로 바인딩하고 폼콘트롤에는 ngModel을 바인딩하면 디렉티브를 이용해서 유효성검사를 할 수 있다.폼디렉티브는 폼콘트롤의 상태에따른 폼엘리먼트 CSS클래스를 자동으로 지정한다..ng-valid.ng-invalid.ng-pending.ng-pristi

폼엘리먼트의 커스텀 유효성검사를 위해 디렉티브를 만들어 사용할 수 있다. forbiddenName과 같은 동기식 유효성검사를 위한 디렉티브에서도 재사용가능한 함수를 만들어 사용했다. 비동기유효성검사를 위한 디렉티브를 만들고 재사용가능한 서비스를 만드는 것도 가능하다

formGroup : 디렉티브FormGroup : 클래스FormGroup 클래스첫번째 인자controls: { key: string: AbstractControl; }폼콘트롤들을 인덱서블 객체형태두번째 인자동기식 유효성검사 함수세번째 인자비동기식 유효성검사 함수form

Validators 클래스폼콘트롤에서 사용할 수 있는 내장 유효성검사함수를 제공한다.static으로 함수가 선언되어있으며 ValidatorFn를 반환하거나 ValidationErrors | null을 반환한다.ValidatorFn은 ValidationErrors | n

폼구성을 위한 객체모델을 만들어 놓고 동적폼템플릿을 구성해둔 뒤에 개별 폼을 빠르게 자동으로 생성하는 방법객체모델의 폼템플릿구성이 변하는 경우 빠르게 대응할 수 있으며 어플리케이션 코드를 수정하지 않고도 폼템플릿을 변경하여 유연성이 좋아진다.반응형폼모듈을 사용하고 폼을

HTML엘리먼트 속성에 값을 할당할때 값의 타입은 HTML속성일 경우 무조건 문자열타입이다.문자열바인딩(text interpolation)은 값을 문자열로 형변환하므로 HTML속성에 사용하면 된다.HTML엘리먼트에 디렉티브를 사용하고 값을 할당할때 사용하고자하는 디렉티

프론트엔드 어플리케이션은 서버와 통신하기위해 HTTP프로토콜로 통신한다.앵귤러는 서버와통신을 위해 클라이언트 HTTP API로 HttpClient서비스를 제공한다.요청을 보내고 응답을 받을때 응답객체의 타입을 지정할 수 있다.에러를 스트림으로 처리할 수 있다.테스트를

hero목록데이터를 서버로부터 받아야 할때 httpClient.get메소드로 받으면 된다.HttpClient.get메소드는 옵저버블타입의 객체를 반환하하며 제네릭타입도 지원한다.HttpClient.get< T >()사용하면 Observable< T >타입의

httpClient클래스의 get, put, delete... 메소드들은 옵저버블객체를 반환한다.서버로부터 배열을 받아 목록을 나열할때 처음에는 배열데이터를 받아서 나열해야 한다.아이템을 추가할때는 put메소드를 사용해서 추가하고 에러없이 수행되었다면 배열을 다시 받지

차이가 무엇인가?

컴포넌트 인스턴스 프로퍼티가 변경되면 앵귤러가 자동으로 랜더링된 DOM을 갱신한다.