이번 포스팅에서는 Angular Material Bottom Sheet을 이용해서 특정한 동작을 했을 때 하단에서 메뉴가 올라오는 하단 메뉴를 만들어보겠습니다. Angular Material UI component infrastructure and Material Design components for Angular web applications. material.angular.io 먼저 버튼 모듈인 MatButtonModule과 하단 메뉴를 위한 MatBottomSheetModule 모듈을 추가해주도록 하겠습니다. import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import {A..

이번 포스팅에서는 Angular Material Badge를 이용해서 알림 개수를 표시하는 뱃지를 만들어보겠습니다. Angular Material UI component infrastructure and Material Design components for Angular web applications. material.angular.io 먼저 아이콘을 보여주기 위한 MatIconModule과 뱃지를 표시해줄 MatBadgeModule 모듈을 추가해줍니다. import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import {AppComponent} from './app.component..

이번 포스팅에서는 Angular Material의 Autocomplete를 이용해서 input에 자동 완성 기능을 만들어 보도록 하겠습니다. Angular Material UI component infrastructure and Material Design components for Angular web applications. material.angular.io 먼저 Input을 위한 MatInputModule과 MatFormFieldModule, 그리고 자동 완성을 위한 MatAutocompleteModule, 그리고 input에 formControl 등 form을 사용하기 위해 FormsModule과 ReactiveFormsModule 모듈을 추가해줍니다. // app.module.ts import..

오늘은 Angular CLI에 대해서 포스팅을 하도록 하겠습니다. 간단하게 Angular CLI는 NPM을 통해서 쉽게 설치를 할 수 있습니다. $ npm i -g @angular/cli 처음으로 알아 볼 건 프로젝트 생성입니다. 프로젝트 생성은 아래와 같이 new를 사용하여 생성을 할 수 있습니다. $ ng new [project-name] 추가로 option을 추가할 수 있는 옵션이 꽤 많지만 몇가지만 알아보도록 하겠습니다. 먼저 prefix 옵션에 대해서 알아보겠습니다. 기본 적으로 Angular는 prefix가 app으로 설정이 되어 있습니다. 만약 이걸 다른 걸로 변경을 하고 싶다면 --prefix 옵션(짧게 -p)을 사용하면 됩니다. 예를 들어 prefix를 my로 사용을 하고 싶다면 아래와 ..

이전 포스팅에서는 Angular와 Firebase Authentication(인증)을 연동했습니다. 자세한건 이전 포스팅을 참고 해주세요. Angulre와 Firebase 연동(Firebase Login) 이전에 Angulre와 Firebase를 연동하는 것을 해보았습니다. 자세한 내용은 이전 포스팅을 참고해주세요. Angualr와 Firebase 연동 Angular와 Firebase는 Angualrfire를 이용하여 쉽게 연동을 할수 있습니다. 먼저. dev-bak.tistory.com 이번에는 Angular와 Firebase의 Cloud Firestore를 연동해보겠습니다. Cloud Firestore는 MongoDB와 AWS의 DynamoDB와 비슷한 NoSQL입니다. 다만 실시간으로 변경된 데이터..

이전에 Angular와 Firebase를 연동하는 것을 해보았습니다. 자세한 내용은 이전 포스팅을 참고해주세요. Angualr와 Firebase 연동 Angular와 Firebase는 Angualrfire를 이용하여 쉽게 연동을 할수 있습니다. 먼저 Angular CLI를 이용하여 새로운 Angular 프로젝트를 생성합니다. Angulre CLI 설치는 이전 포스팅을 참고해주세요. Angular CLI 설.. dev-bak.tistory.com 이번에는 Firebase 인증(Authentication)을 이용하여 로그인을 구현해보겠습니다. 여기서는 간단하게 Email과 Google 로그인을 해볼겁니다. 먼저 Firebase 콘솔에 이전에 생성한 프로젝트에서 로그인 사용을 허용해줘야합니다. Authenti..