TypeScript/Angular35 Angular Component(2) - 로직 처리, 컴포넌트 통신 로직 처리 방법 데이터(class)가 바뀌면 뷰는 자동으로 바뀐다 View가 html 확장자지만 템플릿이라는 것을 잊으면 안됨 그렇기에 class에서 표현식을 통해 데이터 입력이 가능하다 데이터를 바꾸려면 사용자의 입력이 필요하다 항산 그런게 아님(Electron) click 등 이벤트가 필요 사용자가 입력함과 동시에 뷰를 바꾸려면 양방향 데이터 바인딩을 사용한다. [()] 자식이 나한테 들어올 @input, 부모한테 보내줄 @Output 붙어있지 않다면? 같은 가지에 있다면(할아버지)? @Input @Input, @Output @Outpt 같은 가지가 아니라면? 중개자 서비스 2020. 5. 17. Angular Component(1) - 생성,사용 Component 데코레이터가 달린 클래스를 정의하는 것 데코레이터 한 파일에 하나의 컴포넌트를 작성, 하나의 클래스를 작성 데코레이터에 컴포넌트의 메타 데이터를 작성 selector template, templateUrl styles, styleUrls 생성 ng generate component ng g c 사용 컴포넌트를 모듈에 등록 angular-cli를 사용하면 자동으로 등록 컴포넌트의 셀럭터를 다른 템플릿에서 사용 2020. 5. 17. Angular - Binding Property and Class binding one way binding : 컴포넌트 프로퍼티 값으로 DOM 속성을 변경 할 수 있지만, 그 반대가 되지 않음 Event Binding 화면에서 발생하는 이벤트를 괄호로 묶고, 해당 이벤트에 따라 수행되는 메서드 명을 지정 (click)="selete(value)" $event 객체는 화면에서 발생한 이벤트 값을 저장한다 Tow way Binding - 투 웨이 바인딩은 두가지 방법이 있다. 1. 2. FormsModule을 Import - Model 의 Banana in a box : 네모 괄호 안에 둥근 괄호를 넣으면 Model 이 양방향으로 바인딩 된다. [( )] [(ngModel)] = "cash" 2020. 5. 14. Angular - bootstrap Modal 안녕하세요. 이번 시간에는 일명 팝업이라고 불리는 Modal을 띄워보겠습니다. npm install bootstrap 명령어를 입력하여 부트스트랩을 설치해줍니다. 설치가 완료되면, 모달 Modal title × body Close 원하는 템플릿에 이와 같이 작성해 줍니다. 그리고 연결 된 컴포넌트에 이렇게 적어주면 끝! 감사합니다. 2020. 5. 13. 이전 1 ··· 3 4 5 6 7 8 9 다음
