Setup Aplikasi Angular Material

by

Tutorial menggunakan versi Angular, node dan npm seperti berikut:

  • Angular CLI: 12.2.0
  • Node: 12.18.0
  • Package Manager: npm 6.14.4

Agar proses pembelajaran berjalan lancar, disarankan untuk menggunakan versi yang sama.

Untuk setup Angular, silakan lihat tutorial https://skillplus.web.id/membuat-web-app-menggunakan-angular-1/

Setelah Angular selesai di-setup, berikutnya adalah membuat aplikasi menggunakan Angular CLI.

Membuat Aplikasi Angular

Masuk ke direktori dimana project akan disimpan, lalu gunakan command ng new seperti berikut:

ng new nama-app

CLI akan memberikan beberapa pertanyaan:

Would you like add Angular Routing? dijawab No.
Which stylesheet format would you like to use? pilih SCSS (untuk kemudahan mengikuti tutorial, disarankan menggunakan SCSS).

Tunggu sampai aplikasi selesai di generate oleh Angular CLI.

Menambahkan Angular Material

Berikutnya adalah menambahkan Angular Material pada aplikasi, gunakan perintah berikut

ng add @angular/material

CLI akan menanyakan beberapa pertanyaan

  • Would you like to proceed?, dijawab Yes.
  • Choose a prebuilt theme, pada tutorial digunakan Indigo/Pink.
  • Set up global Angular Material typography styles? dijawab Yes.
  • Set up borwser animations for Angular Material? dijawab Yes.
i Using package manager: npm
√ Found compatible package version: @angular/material@12.2.13.
√ Package information loaded.

The package @angular/material@12.2.13 will be installed and executed.
Would you like to proceed? Yes
√ Package successfully installed.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink        [ Preview: https://material.angular.i
o?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes
UPDATE package.json (1136 bytes)
√ Packages installed successfully.
UPDATE src/app/app.module.ts (423 bytes)
UPDATE angular.json (3371 bytes)
UPDATE src/index.html (574 bytes)
UPDATE src/styles.scss (181 bytes)

Sampai disini inisialisasi awal project sudah selesai dilakukan.

Ada beberapa langkah yang akan dilakukan, karena pada langkah setup global angluar material typography styles kita menjawab yes, pada file index.html, element body akan ditambahkan class mat-typography, kita akan hapus.

File src/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angmat</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<!-- hapus class mat-typography -->
<body>
  <app-root></app-root>
</body>
</html>

Buka file file angular.json, pindahkan informasi “./node_modules/@angular/material/prebuilt-themes/indigo-pink.css” dari property styles ke file style.scss.

Berikut file akhir dari src/angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angmat": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angmat",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "angmat:build:production"
            },
            "development": {
              "browserTarget": "angmat:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angmat:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "defaultProject": "angmat"
}

File src/style.css

/* You can add global styles to this file, and also import other style files */

@import "@angular/material/prebuilt-themes/indigo-pink.css";

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

Sharing is caring:

Leave a Comment