이번 포스팅에서는 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의 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 material의 mat-menu를 클릭했을 시 패널을 유지하고 특정 버튼을 클릭했을 시 닫히도록 해보겠습니다. mat-menu에 대한 자세한 내용은 Angular Material 페이지에서 확인할 수 있습니다. Angular Material UI component infrastructure and Material Design components for Angular web applications. material.angular.io 기본적으로 mat-menu를 사용하면 메뉴가 나온 다음 메뉴 패널 안을 클릭을 해도 무조건 닫히게 됩니다. 아래의 코드를 mat-menu안에 (click)="$event.stopPropagation()"을 추가를 해주면 클릭시 닫히는 걸 방지할..

오늘의 포스팅은 Figma Auto layout을 이용한 Material Card를 만들어 보겠습니다. 아래의 예시는 Angular material card 예제에 나와있는 보기입니다. 아래와 똑같이 만들어 보도록 하겠습니다. 기본 Material Card 내부에는 Padding이 16px이 적용되어 있습니다. 먼저 Frame을 그려주고 Auto layout을 설정한 후에 내부 여백을 16px로 적용을 해주도록 하겠습니다. 그리고 제일 상단에 Card Header 부분을 만들어 보겠습니다. 자세히 보면 3개의 항목으로 구성이 되어 있는것을 볼수 있습니다. 썸네일 이미지와 이름, 종류가 표시 되어 있습니다. 헤더의 내용을 넣을 Frame을 생성하고 썸네일을 표시할 원과 이름, 종류를 표시할 텍스트를 그려줍..