tab 구현
class="tab" [class.active]="tab.active" 별개다.
active값을 뒤에있는 '표현식'값을 평가해서 active를 추가하겠다
처음에 active true인애가 , 활성화가 되어야한다
tabs의 scope는 li안에서만 이다
class ="tab active" 이렇게되있다면 뒤에 프로퍼티 바인딩에 의해 false일때 떨어진다
{{tab.iconClass}} 클래스바인딩 = [class] ="tab.iconClass"
'기존의 것을 덮어쓴다'
클래스바인딩의 2가지 class. 클래스이름 (단항클래스바인딩)
[class] = "문자열"
class바인딩은 , class를 여러개 바인딩할때 안쓰는게 원칙
ngclass는 기존의것과 'merge'한다
[ngClass]
ngFor와 ngIf를 사용할때는 ng-container를 사용해야한다
ngIf값이 false일때는 아예 dom을 생성하지 않는다 = display.none과는 다르다 (있는데 안보이는상태)
ngif - dom자체를 안만든다
display-none dom은있고 , 자리는 안차지 한다 (안보임)
visiabilty-hidden dom도 있고, 자리도 차지하는데 보이진 않는다
ngFor문에서 인덱스 구하기
index as idx let i = index;
i번째에 있는 요소의 active를 true로, 나머지는 false로
this.tabs = this.tabs.map((tab, i) => i === idx ? { ... tab, active = true} : { ... tab, active = false});
뒤에있는것 우선
forEach와 map은 원본을 건들이냐 안건들이냐의 차이
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ빌트인 디렉티브
angular의 디렉티브는 3가지종류가 있다
컴포넌트, 어트리뷰트 ,디렉티브 (뷰에 관련한 명령)
태그 ,어트리뷰트
컴포넌트 -> 태그를 만든다 어트리뷰트디렉티브 ->어트리뷰트를 만든다
여러 컴포넌트들이 사용할 기능(어트리뷰트)
A , B , C 컴포넌트의 공통된기능
@Directive({ selector: '[textBlue]' })
[] 어트리뷰트다, Component처럼 @Directive
di = 의존성 주입 = 타입만 잘맞추면 알아서 넣어줌
ElementRef =요소의 참조
구조를 다루는 디렉티브 3개 ngif , ngFor , switch쓰지말기
Safe navigation operator
<!-- obj가 null 또는 undefined일 때 아무것도 표시하지 않는다. --> {{ obj }} <!-- ERROR TypeError: Cannot read property 'id' of undefined --> {{ obj.id }} <!-- 세이프 내비게이션 연산자는 null 또는 undefined의 프로퍼티를 만나면 처리를 종료하고 에러를 발생시키지 않는다. --> {{ obj?.id }}
Interaction
<app-a>
<app-b><app-b>
<app-a>
계층적으로 원래 알듯이 태그쓰듯이 만든다
자식이 부모한테 보낼땐 , 이벤트바인딩 ,자식은 아웃풋으로 보낸다.
부모가 자식한테 보낼땐 프로퍼티바인딩 자식은 인풋데이터로 받는다 ,