Angular ページトップにスクロールするボタン

こんにちは。レモンティーです。

今回はページトップにスクロールするボタンです。

よく画面の右下とかに見かけるやつですね。

ググるとjQueryでの便利なやり方が沢山ヒットします。
Angularの場合はどうすればいいでしょうか。
今回は@ViewChildとscrollIntoViewメソッドを使います。

テンプレートで、スクロールの移動先にする要素に#pageTopとつけて
Template reference variableとして扱えるようにします。詳しくは↓
https://angular.jp/guide/template-syntax

ここではdivですが他でもOKです。

<div #pageTop>スクロール先</div>

あとは

@ViewChild("pageTop") pageTop: ElementRef;

のように宣言して、
別途作成したトップページに戻るボタンが押されたら

scrollToTop(){
  this.pageTop.nativeElement.scrollIntoView({ behavior: "smooth", block: "start" });
}

のようにscrollIntoViewを呼べばOKです。
developer.mozilla.org


今回はこれでおしまいです。
www.sawalemontea.com

AngularMaterialのフォントを変更する方法

こんにちは。レモンティーです。

今回はAngularMaterialのフォントを変更する方法です。

Google FontsのフォントをAngularMaterialに設定します。
fonts.google.com

AngularMaterialのボタンやナビゲーションのフォントは
デフォルトではRobotoというフォントになっています。
これを変更するにはmat-typography-configを使います。

まず、プロジェクトのsrcフォルダとかに
適当な.scssファイルをつくって以下のように書きます
(もともと色を変えたりでカスタムテーマを使っている場合はその.scssファイルでOKです。)

mytheme.scss

@import '~@angular/material/theming';

$custom-typography: mat-typography-config(
  $font-family: 'Nunito,sans-serif'
);

@include mat-core($custom-typography);

次にangular.jsonファイルのstylesに
以下のように先ほどつくった.scssファイルを追加します。

"styles": [
    "src/styles.css",
    "src/mytheme.scss"
]


これでmythemeが反映されます。

次に好きなフォントをGoogle Fontsから探してきて
index.htmlのheadに↓のように書きます。

 <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">


これでAngularMaterialのフォントがデフォルトから変更できます。

ちなみに先ほどの.scssファイルで変更したのはあくまで
mat-buttonなどのAngularMaterialに関する部分のフォントなので
それ以外の部分は普通にstyle.cssでフォントを指定します。

body { margin: 0; font-family: 'Nunito', sans-serif;}

これでページ全体が好きなフォントになりましたね。

今回はこれでおしまいです。
www.sawalemontea.com