Angular Material Icon

2018. 3. 18. 20:23

이번에는 밋밋한 디자인에 아이콘을 넣어보겠습니다.

아이콘을 직접 디자인 한다는 것은 쉽지 않으므로...

잘 디자인 된 아이콘을 가져오도록 하겠습니다.


Material Design에는 오픈소스 아이콘이 있습니다.

https://material.io/icons/

Angular에도 물론 사용할 수 있지요.


전체 Component에서 아이콘을 사용할 수 있도록 추가합니다.

그러기 위해서 index.html의 header에 다음과 같이 추가합니다.

<head>
    ...
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
          rel="stylesheet">
</head>


웹 상의 material icon font를 가져오는 링크입니다.

아이콘을 사용하기 위해 모듈을 추가합니다.

import { MatIconModule } from '@angular/material/icon';

@NgModule({
    ...,
    imports: [
        MatIconModule
    ],
    ...
})
export class AppModule { }


html에서 아이콘 이름을 이용하여 아이콘을 추가할 수 있습니다.

<mat-icon>account_balance</mat-icon>


아이콘 이름은 material icon 사이트의 아이콘을 선택하여 확인 가능합니다.

아이콘 폰트 이름 확인 방법


Angular에서 아이콘을 쉽게 추가할 수 있는 방법이었습니다.

아이콘을 추가한 화면은 아래와 같습니다.


아이콘 추가된 화면


좀 더 그럴듯 해졌죠?

다음에는 화면에 추가된 테이블에 대해 이야기해보겠습니다.


소스주소: https://github.com/jsrho1023/account-book

저작자표시 비영리 동일조건 (새창열림)

'IT Tech > Angular' 카테고리의 다른 글

Angular 테스트(Test) 하기  (0) 2018.04.11
Angular Material Table  (0) 2018.04.02
Angular Material Header Toolbar  (0) 2018.03.11
Angular Directive (Structural Directive)  (0) 2018.02.12
Angular Directive (Attribute Directive)  (2) 2018.02.04

TechTrip IT Tech/Angular

Angular Material Header Toolbar

2018. 3. 11. 15:53

명절 이후 한동안 게을러졌습니다.

다시 마음을 잡고, Application에 모양을 좀 내볼까 합니다.


사이트 상단에 늘 떠있는 제목을 한 번 만들어볼게요.

이번에도 Material 디자인을 이용합니다.

header라는 컴포넌트를 하나 만듭니다.

복습차원에서 되짚어보자면 명령어는 아래와 같습니다.

ng generate component header (ng g c header)


app.component.html에 header 컴포넌트를 넣어줍니다.

<app-header></app-header>
<app-budget></app-budget>


MatToolbar를 사용하기 위해 Module을 import 하구요.

import { MatToolbarModule } from '@angular/material/toolbar';

@NgModule({
    ...,
    imports: [
        MatToolbarModule
    ],
    ...
})
export class AppModule { }


이제 header 컴포넌트를 작성해봅니다.

mat-toolbra라는 태그를 사용합니다.

<mat-toolbar color="primary">
  <span class="application-title">Daily Account Log</span>
  <span class="fill-remaining-space"></span>
  <span>To be added</span>
</mat-toolbar>


색상은 지정하지 않으면 기본적인 배경색인데요.

저는 primary라는 값을 넣었습니다.

mat-toolbar는 기본적으로 flex row 형태의 display를 사용합니다.

좌측에 타이틀 우측에 메뉴 영역을 배치해보겠습니다.

header.component.css에 스타일을 넣어볼게요.

.application-title{
    font-size: 20px;
}
.fill-remaining-space {
    flex: 1;
}


위처럼 넣으면 가운데 영역이 채워집니다.

결과물은 아래와 같습니다.


angular material toolbar 적용


실제 적용해보면 상단, 좌, 우에 하얀 테두리가 보일 수 있습니다.

body에 기본적인 margin과 padding이 들어있어서 그렇습니다.

style.css 에 body의 margin, padding을 없애주면 됩니다.

body{
    margin: 0;
    padding: 0;
}


소스주소: https://github.com/jsrho1023/account-book

저작자표시 비영리 동일조건 (새창열림)

'IT Tech > Angular' 카테고리의 다른 글

Angular Material Table  (0) 2018.04.02
Angular Material Icon  (0) 2018.03.18
Angular Directive (Structural Directive)  (0) 2018.02.12
Angular Directive (Attribute Directive)  (2) 2018.02.04
Angular Material 디자인  (0) 2018.01.27

TechTrip IT Tech/Angular

Angular Directive (Structural Directive)

2018. 2. 12. 23:27

이번에는 Angular의 두 번째 Directive를 보겠습니다.


Attribute Directive는 DOM에 스타일과 동작을 부여했죠?

Structural Directive는 DOM 자체를 추가 제거합니다.


짧은 설명으로는 이해가 어려우니 예제를 살펴보겠습니다.

ngIf 라는 Directive를 사용해볼게요.

ngIf 를 이용하면 조건에 따라 DOM을 추가/제거할 수 있습니다.


<h3 
  [ngStyle]="{
    'color':budget<=1000?'red':'black',
    'background-color':budget<=1000?'yellow':'transparent'}">
      My Budget: 
      <span *ngif="buget!==""">&#8361;</span>{{budget}}</h3>


'원'표시를 span 태그로 감싸주었습니다.

그리고 *ngIf 라는 directive를 안에 넣어주었죠.

그 안에는 조건문이 들어갑니다.

조건을 만족시키면 span을 보여주고, 아니면 제거하는 겁니다.

budget 값이 빈문자열이라면 가격표시가 사라집니다.


재미난 것은 span 태그가 숨겨지는게 아니라 실제로 사라집니다.

크롬의 개발자 도구에서 보면 정확히 보이는데요.


ngIf를 활용한 DOM의 생성과 삭제


위와 같이 필요에 따라 DOM의 생성, 제거를 제어할 수 있습니다.

Structural Directive의 활용은 다양할 수 있겠죠?

Validation Message를 띄워준다든지 하는 것들이요.


참고로 ngIf 앞의 *표시는 Structural Directive임을 나타내는 syntax 입니다.

대표적으로 *ngFor라는 녀석도 있습니다.

다음에 필요시 사용해보도록 할게요.


소스주소: https://github.com/jsrho1023/account-book


저작자표시 비영리 동일조건 (새창열림)

'IT Tech > Angular' 카테고리의 다른 글

Angular Material Icon  (0) 2018.03.18
Angular Material Header Toolbar  (0) 2018.03.11
Angular Directive (Attribute Directive)  (2) 2018.02.04
Angular Material 디자인  (0) 2018.01.27
Angular 데이터 바인딩 III (ngModel)  (0) 2018.01.21

TechTrip IT Tech/Angular

티스토리툴바