인라인 타입
<p [ngStyle]="{color: 'red', backgroundColor: 'blue'}">
예제 입니다.
</p>
메서드타입
<p [ngStyle]="{color: 'red', backgroundColor: getBackgroundColor()}">
ts 파일에서 메서드 생성
getBackgroundColor() : string {
//return "black"; //문자열 반환
return (new Date()).getSeconds() % 2 == 0 ? "green" : "lime"; // 새로고침 시점이 짝수 초일때 초록색, 아닐때 라임색
}
## 정리 필요
https://www.youtube.com/user/visualacademy/playlists
1.실습환경
1-1.윈도우10
1-2.NodeJS
1-3.NetCore2.0
1-4.Angular/CLI
NodeJS, 닷넷코어, Angular 모두 낯설다.
거기에 Angular는 CLI 로 프로젝트 생성/컴포넌트 추가등을 진행한다.
각 명령어(?)도 알아둬야 한다.
2.구성
2-1.NodeJS 와 .NetCore 는 각각 사이트에서 다운받아 다음-다음 설치 하면 된다.
2-2.npm install -g @angular/cli 명령어로 Angular CLI 를 설치하자.
(install -> i 로 alias 형태로 가능)
(--global -> -g 로 alias 형태로 가능 위는 축약형태를 사용. alias 형태 미사용시 대쉬2개)
2-3.ng new 프로젝트이름 -d
(지정된 이름으로 프로젝트를 생성하나 -d 옵션을 붙여 dry run, 즉 어떤 구조를 가지면서 생성 되는지 미리 확인 가능)
(--dry-run -> -d alias 형태로 가능)
2-4.
ng new 프로젝트이름
ng new 프로제트이름 --skip-install (인스톨을 스킵?)
npm install (node_modules 폴더의 내용을 채워줌? package.json 파일의 내용을 토대로 의존성을 가지는 파일을 다운로드?)
ng serve -o (--open)
ng generate component 컴포넌트이름 (컴포넌트를 추가)
ng g c 컴포넌트이름 (위의 alias 형태)
ng generate component 컴포넌트이름 --spec false (*.spec.ts 파일을 생성하지 않음.)(스펙 파일이 뭐하는 파일인지 아직 이해안됨.)
ng generate component 컴포넌트이름 --inline-template (*.html 파일을 생성하지 않음.)(별도의 html 템플릿을 생성하지 않고, ts 파일에 바로 html 코드를 사용하겠다 라는 의미인거 같음. 간단한 뷰의 경우 ts 파일에 포함 시키는게 편한듯)
ng generate component 컴포넌트이름 -it (위와 같은 결과. --inline-template 의 alias 형태)
ng generate component 컴포넌트이름 --inline-style (css 파일을 생성하지 않음. --inline-template 과 같은 형식인거 같음)
ng generate component 컴포넌트이름 -it --inline-style (html 파일과 css 파일을 생성하지 않음)
ng generate component 컴포넌트이름 -it -is (위와 동일한 결과를 alias 형태로)
## 정리 필요